fix: Restore keyboard focus for key triggers (#2634) (#2639)

- Closes #2634

tests/card-controller/card-element-manager.test.ts

@@ -123,6 +123,7 @@ describe('CardElementManager', () => {
 
     expect(element.getAttribute('panel')).toBeNull();
     expect(element.getAttribute('casted')).toBeNull();
+    expect(element.getAttribute('tabindex')).toBe('0');
     expect(api.getFullscreenManager().connect).toHaveBeenCalled();
 
     expect(addEventListener).toHaveBeenCalledWith(
@@ -173,6 +174,7 @@ describe('CardElementManager', () => {
     const element = createCardHTMLElement();
     element.setAttribute('panel', '');
     element.setAttribute('casted', '');
+    element.setAttribute('tabindex', '0');
 
     const removeEventListener = vi.fn();
     element.removeEventListener = removeEventListener;
@@ -190,6 +192,7 @@ describe('CardElementManager', () => {
 
     expect(element.getAttribute('panel')).toBeNull();
     expect(element.getAttribute('casted')).toBeNull();
+    expect(element.getAttribute('tabindex')).toBeNull();
     expect(api.getMediaLoadedInfoManager().clear).toHaveBeenCalled();
     expect(api.getFullscreenManager().disconnect).toHaveBeenCalled();
 

tests/card-controller/keyboard-state-manager.test.ts

@@ -72,6 +72,73 @@ describe('KeyboardStateManager', () => {
     });
   });
 
+  it('should not clear state when focus moves within the card', () => {
+    const api = createCardAPI();
+    const element = createLitElement();
+    vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+    const manager = new KeyboardStateManager(api);
+    manager.initialize();
+
+    element.dispatchEvent(new KeyboardEvent('keydown', { key: 'a' }));
+    element.dispatchEvent(new FocusEvent('blur', { relatedTarget: element }));
+
+    expect(api.getConditionStateManager().setState).toHaveBeenCalledTimes(1);
+    expect(api.getConditionStateManager().setState).toHaveBeenLastCalledWith({
+      keys: {
+        a: { state: 'down', ctrl: false, alt: false, meta: false, shift: false },
+      },
+    });
+  });
+
+  it('should take focus on pointerdown', () => {
+    const api = createCardAPI();
+    const element = createLitElement();
+    vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+    const focus = vi.spyOn(element, 'focus');
+    const manager = new KeyboardStateManager(api);
+    manager.initialize();
+
+    element.dispatchEvent(new Event('pointerdown'));
+
+    expect(focus).toHaveBeenCalledWith({ preventScroll: true });
+  });
+
+  it('should not take focus on pointerdown when focus is already within the card', () => {
+    const api = createCardAPI();
+    const element = createLitElement();
+    vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+    document.body.append(element);
+
+    const child = document.createElement('div');
+    child.setAttribute('tabindex', '0');
+    element.attachShadow({ mode: 'open' }).appendChild(child);
+    child.focus();
+
+    const focus = vi.spyOn(element, 'focus');
+    const manager = new KeyboardStateManager(api);
+    manager.initialize();
+
+    element.dispatchEvent(new Event('pointerdown'));
+
+    expect(focus).not.toHaveBeenCalled();
+
+    element.remove();
+  });
+
+  it('should not take focus on pointerdown after uninitialization', () => {
+    const api = createCardAPI();
+    const element = createLitElement();
+    vi.mocked(api.getCardElementManager().getElement).mockReturnValue(element);
+    const focus = vi.spyOn(element, 'focus');
+    const manager = new KeyboardStateManager(api);
+    manager.initialize();
+    manager.uninitialize();
+
+    element.dispatchEvent(new Event('pointerdown'));
+
+    expect(focus).not.toHaveBeenCalled();
+  });
+
   it('should not act after uninitialization', () => {
     const api = createCardAPI();
     const element = createLitElement();

tests/utils/focus.test.ts

@@ -0,0 +1,70 @@
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { isFocusWithin } from '../../src/utils/focus';
+
+// @vitest-environment jsdom
+describe('isFocusWithin', () => {
+  const createFocusableElement = (parent: Node): HTMLElement => {
+    const element = document.createElement('div');
+    element.setAttribute('tabindex', '0');
+    parent.appendChild(element);
+    return element;
+  };
+
+  afterEach(() => {
+    document.body.replaceChildren();
+  });
+
+  it('should return false without focus', () => {
+    const element = createFocusableElement(document.body);
+
+    expect(isFocusWithin(element)).toBeFalsy();
+  });
+
+  it('should return false when focus is elsewhere', () => {
+    const element = createFocusableElement(document.body);
+    createFocusableElement(document.body).focus();
+
+    expect(isFocusWithin(element)).toBeFalsy();
+  });
+
+  it('should return true when the element itself has focus', () => {
+    const element = createFocusableElement(document.body);
+    element.focus();
+
+    expect(isFocusWithin(element)).toBeTruthy();
+  });
+
+  it('should return true when a child has focus', () => {
+    const element = createFocusableElement(document.body);
+    createFocusableElement(element).focus();
+
+    expect(isFocusWithin(element)).toBeTruthy();
+  });
+
+  it('should return true when a child within nested shadow roots has focus', () => {
+    const element = createFocusableElement(document.body);
+    const outerShadow = element.attachShadow({ mode: 'open' });
+    const inner = createFocusableElement(outerShadow);
+    const innerShadow = inner.attachShadow({ mode: 'open' });
+
+    createFocusableElement(innerShadow).focus();
+
+    expect(isFocusWithin(element)).toBeTruthy();
+  });
+
+  it('should return true when the element is itself within a shadow root', () => {
+    const host = createFocusableElement(document.body);
+    const element = createFocusableElement(host.attachShadow({ mode: 'open' }));
+
+    createFocusableElement(element.attachShadow({ mode: 'open' })).focus();
+
+    expect(isFocusWithin(element)).toBeTruthy();
+  });
+
+  it('should return false when the element is not attached to a document', () => {
+    const element = document.createElement('div');
+
+    expect(isFocusWithin(element)).toBeFalsy();
+  });
+});