@wix/interact 1.91.0 → 1.92.0

package/dist/cjs/__tests__/interact.spec.js

@@ -396,8 +396,9 @@ describe('interact', () => {
     jest.clearAllMocks();
     // Clear Interact instances to ensure test isolation
     _Interact.Interact.destroy();
-    // Reset forceReducedMotion to default
+    // Reset static flags to default
     _Interact.Interact.forceReducedMotion = false;
+    _Interact.Interact.allowA11yTriggers = false;
   });
   describe('init Interact instance', () => {
     it('should initialize with valid config', () => {
@@ -1797,5 +1798,133 @@ describe('interact', () => {
       expect(spy).toHaveBeenCalledWith(pointerOptionsGetter);
     });
   });
+  describe('a11y - accessible triggers', () => {
+    let a11yElement;
+    function getA11yConfig(trigger, key) {
+      return {
+        interactions: [{
+          trigger,
+          key,
+          effects: [{
+            effectId: 'test-effect'
+          }]
+        }],
+        effects: {
+          'test-effect': {
+            namedEffect: {
+              type: 'BounceIn',
+              power: 'medium'
+            },
+            duration: 500
+          }
+        }
+      };
+    }
+    afterEach(() => {
+      _Interact.Interact.destroy();
+    });
+    describe('activate trigger', () => {
+      it('should add both click and keydown listeners', () => {
+        _Interact.Interact.create(getA11yConfig('activate', 'activate-div'));
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        (0, _add.add)(a11yElement, 'activate-div');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function), expect.any(Object));
+      });
+      it('should not double-invoke handler when Enter triggers both keydown and click', () => {
+        const {
+          getWebAnimation
+        } = require('@wix/motion');
+        const mockPlay = getWebAnimation().play;
+        mockPlay.mockClear();
+        _Interact.Interact.create(getA11yConfig('activate', 'activate-handler-test'));
+        a11yElement = document.createElement('interact-element');
+        const button = document.createElement('button');
+        a11yElement.append(button);
+        (0, _add.add)(a11yElement, 'activate-handler-test');
+
+        // Simulate browser behavior: Enter key triggers keydown AND synthesized click with no pointerType
+        button.dispatchEvent(new KeyboardEvent('keydown', {
+          code: 'Enter',
+          bubbles: true
+        }));
+        button.dispatchEvent(new MouseEvent('click', {
+          bubbles: true
+        }));
+        expect(mockPlay).toHaveBeenCalledTimes(1);
+      });
+    });
+    describe('interest trigger', () => {
+      it('should add focusin listener alongside mouseenter', () => {
+        _Interact.Interact.create(getA11yConfig('interest', 'interest-test'));
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        (0, _add.add)(a11yElement, 'interest-test');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).toHaveBeenCalledWith('focusin', expect.any(Function), expect.any(Object));
+      });
+    });
+    describe('click trigger with allowA11yTriggers flag', () => {
+      it('should NOT add keydown listener when flag is false', () => {
+        _Interact.Interact.create(getA11yConfig('click', 'click-no-flag'));
+        _Interact.Interact.setup({
+          allowA11yTriggers: false
+        });
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        (0, _add.add)(a11yElement, 'click-no-flag');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).not.toHaveBeenCalledWith('keydown', expect.any(Function), expect.any(Object));
+      });
+      it('should add keydown listener when flag is true', () => {
+        _Interact.Interact.setup({
+          allowA11yTriggers: true
+        });
+        _Interact.Interact.create(getA11yConfig('click', 'click-with-flag'));
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        (0, _add.add)(a11yElement, 'click-with-flag');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).toHaveBeenCalledWith('keydown', expect.any(Function), expect.any(Object));
+      });
+    });
+    describe('hover trigger with allowA11yTriggers flag', () => {
+      it('should NOT add focusin listener when flag is false', () => {
+        _Interact.Interact.setup({
+          allowA11yTriggers: false
+        });
+        _Interact.Interact.create(getA11yConfig('hover', 'hover-no-flag'));
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        (0, _add.add)(a11yElement, 'hover-no-flag');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).not.toHaveBeenCalledWith('focusin', expect.any(Function), expect.any(Object));
+      });
+      it('should add focusin listener when flag is true', () => {
+        _Interact.Interact.setup({
+          allowA11yTriggers: true
+        });
+        _Interact.Interact.create(getA11yConfig('hover', 'hover-with-flag'));
+        a11yElement = document.createElement('interact-element');
+        const div = document.createElement('div');
+        a11yElement.append(div);
+        const addEventListenerSpy = jest.spyOn(div, 'addEventListener');
+        (0, _add.add)(a11yElement, 'hover-with-flag');
+        expect(addEventListenerSpy).toHaveBeenCalledWith('mouseenter', expect.any(Function), expect.any(Object));
+        expect(addEventListenerSpy).toHaveBeenCalledWith('focusin', expect.any(Function), expect.any(Object));
+      });
+    });
+  });
 });
 //# sourceMappingURL=interact.spec.js.map