fix: Make overflow items inert (#2886)

All items hidden by overflow should be [inert](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert) [category:Components] Co-authored-by: manuel.carrera <[email protected]>
Workday · Aug 27, 2024 · 5887d55 · 5887d55
1 parent f95783d
commit 5887d55
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 27 deletions.
diff --git a/modules/react/breadcrumbs/lib/BreadcrumbsItem.tsx b/modules/react/breadcrumbs/lib/BreadcrumbsItem.tsx
@@ -1,10 +1,5 @@
 import * as React from 'react';
-import {
-  composeHooks,
-  createSubcomponent,
-  createElemPropsHook,
-  useIsRTL,
-} from '@workday/canvas-kit-react/common';
+import {composeHooks, createSubcomponent, useIsRTL} from '@workday/canvas-kit-react/common';
 import {
   useListItemRegister,
   useOverflowListItemMeasure,
@@ -33,27 +28,7 @@ export interface BreadcrumbsItemProps extends FlexProps {
   'data-id'?: string;
 }
 
-export const useBreadcrumbsItem = composeHooks(
-  useOverflowListItemMeasure,
-  createElemPropsHook(useBreadcrumbsModel)(
-    (
-      {state},
-      _,
-      elemProps: {
-        'data-id'?: string;
-        item?: {id: string};
-      } = {}
-    ) => {
-      const [localId] = React.useState(elemProps['data-id'] || elemProps.item?.id || '');
-
-      return {
-        inert: state.nonInteractiveIds.includes(localId) ? '' : undefined,
-        disabled: undefined,
-      };
-    }
-  ),
-  useListItemRegister
-);
+export const useBreadcrumbsItem = composeHooks(useOverflowListItemMeasure, useListItemRegister);
 
 export const BreadcrumbsItem = createSubcomponent('li')({
   displayName: 'Breadcrumbs.Item',

diff --git a/modules/react/collection/lib/useOverflowListItemMeasure.tsx b/modules/react/collection/lib/useOverflowListItemMeasure.tsx
@@ -46,6 +46,7 @@ export const useOverflowListItemMeasure = createElemPropsHook(useOverflowListMod
       ref: elementRef,
       'aria-hidden': hidden || undefined,
       style: hidden ? hiddenStyles : {},
+      inert: hidden ? '' : undefined,
     };
   }
 );