ui: attach WASD key listener to the main UI, not the document body

ui/src/base/dom_utils.ts

@@ -137,3 +137,20 @@ export function bindEventListener<K extends keyof HTMLElementEventMap>(
     },
   };
 }
+
+export function ancestorThat(el: Element | null, predicate: (htmlEl: HTMLElement) => boolean): HTMLElement | undefined {
+  let result: HTMLElement | undefined;
+
+  while (!result && el instanceof HTMLElement) {
+    if (predicate(el)) {
+      result = el;
+    }
+    el = el.parentElement;
+  }
+
+  return result;
+}
+
+export function matchesSelector(selector: string): (el: HTMLElement) => boolean {
+  return (el) => el.matches(selector);
+}

ui/src/base/dom_utils_unittest.ts

@@ -13,10 +13,12 @@
 // limitations under the License.
 
 import {
+  ancestorThat,
   bindEventListener,
   elementIsEditable,
   findRef,
   isOrContains,
+  matchesSelector,
   toHTMLElement,
 } from './dom_utils';
 
@@ -162,3 +164,102 @@ describe('bindEventListener', () => {
     }).not.toThrow();
   });
 });
+
+describe('ancestorThat', () => {
+  test('returns undefined for null element', () => {
+    expect(ancestorThat(null, () => true)).toBeUndefined();
+  });
+
+  test('returns the element itself if it matches the predicate', () => {
+    const el = document.createElement('div');
+    el.classList.add('target');
+    expect(ancestorThat(el, (e) => e.classList.contains('target'))).toBe(el);
+  });
+
+  test('finds ancestor matching predicate', () => {
+    const grandparent = document.createElement('div');
+    grandparent.classList.add('grandparent');
+    const parent = document.createElement('div');
+    parent.classList.add('parent');
+    const child = document.createElement('div');
+    child.classList.add('child');
+
+    grandparent.appendChild(parent);
+    parent.appendChild(child);
+
+    expect(ancestorThat(child, (e) => e.classList.contains('parent'))).toBe(
+      parent,
+    );
+    expect(
+      ancestorThat(child, (e) => e.classList.contains('grandparent')),
+    ).toBe(grandparent);
+  });
+
+  test('returns closest matching ancestor', () => {
+    const outer = document.createElement('div');
+    outer.classList.add('match');
+    const inner = document.createElement('div');
+    inner.classList.add('match');
+    const child = document.createElement('div');
+
+    outer.appendChild(inner);
+    inner.appendChild(child);
+
+    expect(ancestorThat(child, (e) => e.classList.contains('match'))).toBe(
+      inner,
+    );
+  });
+
+  test('returns undefined when no ancestor matches', () => {
+    const parent = document.createElement('div');
+    const child = document.createElement('div');
+    parent.appendChild(child);
+
+    expect(
+      ancestorThat(child, (e) => e.classList.contains('nonexistent')),
+    ).toBeUndefined();
+  });
+
+  test('does not match non-HTMLElement ancestors', () => {
+    const svgElement = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'svg',
+    );
+    expect(ancestorThat(svgElement, () => true)).toBeUndefined();
+  });
+});
+
+describe('matchesSelector', () => {
+  test('matchesSelector for a single class', () => {
+    const el = document.createElement('div');
+    el.classList.add('foo');
+
+    const hasFoo = matchesSelector('.foo');
+    const hasBar = matchesSelector('.bar');
+
+    expect(hasFoo(el)).toBe(true);
+    expect(hasBar(el)).toBe(false);
+  });
+
+  test('checks for multiple classes', () => {
+    const el = document.createElement('div');
+    el.classList.add('foo', 'bar');
+
+    const hasFooAndBar = matchesSelector('.foo.bar');
+    const hasFooAndBaz = matchesSelector('.foo.baz');
+
+    expect(hasFooAndBar(el)).toBe(true);
+    expect(hasFooAndBaz(el)).toBe(false);
+  });
+
+  test('works with ancestorThat', () => {
+    const parent = document.createElement('div');
+    parent.classList.add('container', 'active');
+    const child = document.createElement('div');
+    parent.appendChild(child);
+
+    expect(ancestorThat(child, matchesSelector('.container'))).toBe(parent);
+    expect(ancestorThat(child, matchesSelector('.container.active'))).toBe(parent);
+    expect(ancestorThat(child, matchesSelector('.container.inactive'))).toBeUndefined();
+  });
+});

ui/src/frontend/viewer_page/wasd_navigation_handler.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {DisposableStack} from '../../base/disposable_stack';
-import {currentTargetOffset, elementIsEditable} from '../../base/dom_utils';
+import {ancestorThat, currentTargetOffset, elementIsEditable, matchesSelector} from '../../base/dom_utils';
 import {Animation} from '../animation';
 
 // When first starting to pan or zoom, move at least this many units.
@@ -113,18 +113,21 @@ export class KeyboardNavigationHandler implements Disposable {
     this.onZoomed = onZoomed;
     this.trash = new DisposableStack();
 
-    if (!element.getAttribute('tabindex')) {
+    // Don't add the listener on the document body because we may be embedded in a host application.
+    // Instead, add the listener on the containing UIMain if we can find it, otherwise the element
+    const keyTarget = ancestorThat(this.element, matchesSelector('.pf-ui-main')) ?? this.element;
+    if (!keyTarget.getAttribute('tabindex')) {
       // Make it focusable and also tabbable for keyboard accessibility
-      element.setAttribute('tabindex', '0');
+      keyTarget.setAttribute('tabindex', '0');
     }
 
-    document.body.addEventListener('keydown', this.boundOnKeyDown);
-    document.body.addEventListener('keyup', this.boundOnKeyUp);
+    keyTarget.addEventListener('keydown', this.boundOnKeyDown);
+    keyTarget.addEventListener('keyup', this.boundOnKeyUp);
     this.element.addEventListener('mousemove', this.boundOnMouseMove);
     this.trash.defer(() => {
       this.element.removeEventListener('mousemove', this.boundOnMouseMove);
-      document.body.removeEventListener('keyup', this.boundOnKeyUp);
-      document.body.removeEventListener('keydown', this.boundOnKeyDown);
+      keyTarget.removeEventListener('keyup', this.boundOnKeyUp);
+      keyTarget.removeEventListener('keydown', this.boundOnKeyDown);
     });
   }