diff --git a/.changeset/tall-ravens-hope.md b/.changeset/tall-ravens-hope.md new file mode 100644 index 00000000000..2562db51a17 --- /dev/null +++ b/.changeset/tall-ravens-hope.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Allows `ActionMenu` and `SelectPanel` items to remain focusable when `disabled` diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index d90b40a1ce8..30fc2f44570 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/packages/react/src/ActionList/Item.tsx @@ -317,13 +317,20 @@ export const Item = React.forwardRef( const selectableRoles = ['menuitemradio', 'menuitemcheckbox', 'option'] const includeSelectionAttribute = itemSelectionAttribute && itemRole && selectableRoles.includes(itemRole) + let focusable + + // if item is disabled and is of type (menuitem*, option) it should remain focusable, if inactive, apply the same rules + if ((disabled && !inferredItemRole) || showInactiveIndicator) { + focusable = true + } + const menuItemProps = { onClick: clickHandler, onKeyPress: !buttonSemantics ? keyPressHandler : undefined, 'aria-disabled': disabled ? true : undefined, 'data-inactive': inactive ? true : undefined, 'data-loading': loading && !inactive ? true : undefined, - tabIndex: disabled || showInactiveIndicator ? undefined : 0, + tabIndex: focusable ? undefined : 0, 'aria-labelledby': `${labelId} ${slots.trailingVisual ? trailingVisualId : ''} ${ slots.inlineDescription ? inlineDescriptionId : '' }`, diff --git a/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx b/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx index 564229a929e..9e4cd6b74d2 100644 --- a/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx +++ b/packages/react/src/ActionMenu/ActionMenu.features.stories.tsx @@ -282,3 +282,59 @@ export const Submenus = () => ( ) + +export const DisabledItems = () => ( + + Open menu + + + + Workflows + + + + + alert('Archived items clicked')}> + Archived items + + + + + + Settings + + + + + + Make a copy + + + + + + + Github projects + + What's new + + + + + + Give feedback + + + + + + GitHub Docs + + + + + + + + +)