Merge branch 'main' into copilot/add-webkit-test-support

Author: louis-bompart

.github/workflows/ci.yml

@@ -398,10 +398,9 @@ jobs:
   cypress-atomic-test:
     name: "Run Cypress tests on Atomic"
     needs: affected
-    if: contains(needs.affected.outputs.projects, '@coveo/atomic')
+    if: contains(needs.affected.outputs.projects, '@coveo/atomic') && github.event_name != 'merge_group'
     runs-on: ubuntu-latest
     strategy:
-      fail-fast: ${{ github.event_name == 'merge_group' }}
       matrix:
         containers:
           [
@@ -758,7 +757,6 @@ jobs:
       - "playwright-atomic-theming"
       - "playwright-atomic-hosted-page-test"
       - "playwright-headless-ssr-commerce-nextjs-test"
-      - "cypress-atomic-test"
       - "e2e-quantic"
       - "cypress-atomic-screenshots"
       - "playwright-atomic-search-commerce-react-test"

packages/atomic-react/src/components/commerce/components.ts

@@ -27,6 +27,7 @@ import {
   AtomicCommerceText as LitAtomicCommerceText,
   AtomicCommerceTimeframeFacet as LitAtomicCommerceTimeframeFacet,
   AtomicComponentError as LitAtomicComponentError,
+  AtomicFocusTrap as LitAtomicFocusTrap,
   AtomicIcon as LitAtomicIcon,
   AtomicInsightGenerateAnswerButton as LitAtomicInsightGenerateAnswerButton,
   AtomicInsightInterface as LitAtomicInsightInterface,
@@ -225,6 +226,12 @@ export const AtomicComponentError = createComponent({
   elementClass: LitAtomicComponentError,
 });
 
+export const AtomicFocusTrap = createComponent({
+  tagName: 'atomic-focus-trap',
+  react: React,
+  elementClass: LitAtomicFocusTrap,
+});
+
 export const AtomicIcon = createComponent({
   tagName: 'atomic-icon',
   react: React,

packages/atomic-react/src/components/search/components.ts

@@ -3,6 +3,7 @@ import {
   AtomicComponentError as LitAtomicComponentError,
   AtomicExternal as LitAtomicExternal,
   AtomicFacet as LitAtomicFacet,
+  AtomicFocusTrap as LitAtomicFocusTrap,
   AtomicHtml as LitAtomicHtml,
   AtomicIcon as LitAtomicIcon,
   AtomicInsightGenerateAnswerButton as LitAtomicInsightGenerateAnswerButton,
@@ -63,6 +64,12 @@ export const AtomicFacet = createComponent({
   elementClass: LitAtomicFacet,
 });
 
+export const AtomicFocusTrap = createComponent({
+  tagName: 'atomic-focus-trap',
+  react: React,
+  elementClass: LitAtomicFocusTrap,
+});
+
 export const AtomicHtml = createComponent({
   tagName: 'atomic-html',
   react: React,

packages/atomic/cypress/e2e/refine-toggle.cypress.ts

@@ -7,7 +7,6 @@ import {colorFacetField} from './facets/color-facet/color-facet-actions';
 import {colorFacetComponent} from './facets/color-facet/color-facet-selectors';
 import {field as facetField} from './facets/facet/facet-actions';
 import {facetComponent} from './facets/facet/facet-selectors';
-import {facetManagerComponent} from './facets/manager/facet-manager-actions';
 import {numericFacetField} from './facets/numeric-facet/numeric-facet-actions';
 import {numericFacetComponent} from './facets/numeric-facet/numeric-facet-selectors';
 import {ratingFacetField} from './facets/rating-facet/rating-facet-actions';
@@ -168,11 +167,6 @@ describe('Refine Toggle Test Suites', () => {
       RefineModalSelectors.facets().should('not.exist');
     });
 
-    it('should have a focus trap', () => {
-      RefineModalSelectors.focusTrap().should('exist');
-      cy.get(`${facetManagerComponent}[aria-hidden="true"]`).should('exist');
-    });
-
     it('should respect the collapseFacetsAfter prop', () => {
       RefineModalSelectors.facets()
         .children()

packages/atomic/src/components.d.ts

@@ -311,25 +311,6 @@ export namespace Components {
          */
         "mustNotMatch": Record<string, string[]>;
     }
-    interface AtomicFocusTrap {
-        "active": boolean;
-        /**
-          * The container to hide from the tabindex and accessibility DOM when the focus trap is inactive.
-         */
-        "container"?: HTMLElement;
-        /**
-          * The common ancestor of the focus trap and of all the elements that should be inaccessible when inside the focus trap.
-         */
-        "scope": HTMLElement;
-        /**
-          * Whether the element should be hidden from screen readers & not interactive with the tab, when not active.
-         */
-        "shouldHideSelf": boolean;
-        /**
-          * The source to focus when the focus trap becomes inactive.
-         */
-        "source"?: HTMLElement;
-    }
     /**
      * The `atomic-folded-result-list` component is responsible for displaying folded query results, by applying one or more result templates for up to three layers (that is, to the result, child, and grandchild).
      */
@@ -2372,12 +2353,6 @@ declare global {
         prototype: HTMLAtomicFieldConditionElement;
         new (): HTMLAtomicFieldConditionElement;
     };
-    interface HTMLAtomicFocusTrapElement extends Components.AtomicFocusTrap, HTMLStencilElement {
-    }
-    var HTMLAtomicFocusTrapElement: {
-        prototype: HTMLAtomicFocusTrapElement;
-        new (): HTMLAtomicFocusTrapElement;
-    };
     /**
      * The `atomic-folded-result-list` component is responsible for displaying folded query results, by applying one or more result templates for up to three layers (that is, to the result, child, and grandchild).
      */
@@ -3443,7 +3418,6 @@ declare global {
         "atomic-facet-manager": HTMLAtomicFacetManagerElement;
         "atomic-facet-number-input": HTMLAtomicFacetNumberInputElement;
         "atomic-field-condition": HTMLAtomicFieldConditionElement;
-        "atomic-focus-trap": HTMLAtomicFocusTrapElement;
         "atomic-folded-result-list": HTMLAtomicFoldedResultListElement;
         "atomic-format-currency": HTMLAtomicFormatCurrencyElement;
         "atomic-format-number": HTMLAtomicFormatNumberElement;
@@ -3826,25 +3800,6 @@ declare namespace LocalJSX {
          */
         "mustNotMatch"?: Record<string, string[]>;
     }
-    interface AtomicFocusTrap {
-        "active"?: boolean;
-        /**
-          * The container to hide from the tabindex and accessibility DOM when the focus trap is inactive.
-         */
-        "container"?: HTMLElement;
-        /**
-          * The common ancestor of the focus trap and of all the elements that should be inaccessible when inside the focus trap.
-         */
-        "scope"?: HTMLElement;
-        /**
-          * Whether the element should be hidden from screen readers & not interactive with the tab, when not active.
-         */
-        "shouldHideSelf"?: boolean;
-        /**
-          * The source to focus when the focus trap becomes inactive.
-         */
-        "source"?: HTMLElement;
-    }
     /**
      * The `atomic-folded-result-list` component is responsible for displaying folded query results, by applying one or more result templates for up to three layers (that is, to the result, child, and grandchild).
      */
@@ -5679,7 +5634,6 @@ declare namespace LocalJSX {
         "atomic-facet-manager": AtomicFacetManager;
         "atomic-facet-number-input": AtomicFacetNumberInput;
         "atomic-field-condition": AtomicFieldCondition;
-        "atomic-focus-trap": AtomicFocusTrap;
         "atomic-folded-result-list": AtomicFoldedResultList;
         "atomic-format-currency": AtomicFormatCurrency;
         "atomic-format-number": AtomicFormatNumber;
@@ -5846,7 +5800,6 @@ declare module "@stencil/core" {
              * @MapProp name: mustNotMatch;attr: must-not-match;docs: The field and values that define which result items the condition must not be applied to. For example, a template with the following attribute only applies to result items whose `filetype` is not `lithiummessage`: `must-not-match-filetype="lithiummessage";type: Record<string, string[]> ;default: {}
              */
             "atomic-field-condition": LocalJSX.AtomicFieldCondition & JSXBase.HTMLAttributes<HTMLAtomicFieldConditionElement>;
-            "atomic-focus-trap": LocalJSX.AtomicFocusTrap & JSXBase.HTMLAttributes<HTMLAtomicFocusTrapElement>;
             /**
              * The `atomic-folded-result-list` component is responsible for displaying folded query results, by applying one or more result templates for up to three layers (that is, to the result, child, and grandchild).
              */

packages/atomic/src/components/common/atomic-focus-trap.tsx

@@ -0,0 +1,29 @@
+import type {Meta, StoryObj as Story} from '@storybook/web-components-vite';
+import {getStorybookHelpers} from '@wc-toolkit/storybook-helpers';
+import {parameters} from '@/storybook-utils/common/common-meta-parameters';
+
+const {events, args, argTypes, template} = getStorybookHelpers(
+  'atomic-focus-trap',
+  {excludeCategories: ['methods']}
+);
+
+const meta: Meta = {
+  component: 'atomic-focus-trap',
+  title: 'Common/Focus Trap',
+  id: 'atomic-focus-trap',
+  render: (args) => template(args),
+  parameters: {
+    ...parameters,
+    actions: {
+      handles: events,
+    },
+  },
+  args,
+  argTypes,
+};
+
+export default meta;
+
+export const Default: Story = {
+  tags: ['!dev'],
+};