oopsy

Author: ameerf-wix

packages/interact/docs/guides/conditions-and-media-queries.md

@@ -56,9 +56,6 @@ effect applies to; without it the predicate is appended to the element's own sel
 }
 ```
 
-> There is no container-query condition type. Scope by viewport with a `media` condition, or by
-> ancestor with a `selector` condition.
-
 ## Cascading of effects
 
 Interact allows you to apply multiple effects on the same target and have them cascade, just like they do in CSS.

packages/interact/src/handlers/eventTrigger.ts

@@ -194,6 +194,10 @@ function addEventTriggerHandler(
   } else {
     const events = genericConfig.toggle ?? [];
     events.forEach((eventType) => {
+      if (eventType === 'keydown') {
+        // A keydown listener is useless on an element the keyboard cannot reach.
+        source.tabIndex = 0;
+      }
       const passive = eventType !== 'keydown';
       const opts = { once, passive };
       addListener(source, eventType, opts);

packages/interact/test/mini.spec.ts

@@ -2978,6 +2978,18 @@ describe('interact (mini)', () => {
           expect.any(Object),
         );
       });
+
+      it('should make the source focusable so the keydown listener is reachable', () => {
+        Interact.setup({ allowA11yTriggers: true });
+        Interact.create(getA11yConfig('click', 'click-tabindex'));
+        a11yElement = document.createElement('div');
+
+        expect(a11yElement.tabIndex).toBe(-1);
+
+        add(a11yElement, 'click-tabindex');
+
+        expect(a11yElement.tabIndex).toBe(0);
+      });
     });
 
     describe('hover trigger with allowA11yTriggers flag', () => {