ActionList: Allow items to remain focusable when disabled (#4481)

* Allow `ActionMenu` items, or `SelectPanel` items to be focusable when `disabled`

* Add changeset

* Update PR based on feedback

* Fix for test

---------

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>

Author: TylerJDev

.changeset/tall-ravens-hope.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Allows `ActionMenu` and `SelectPanel` items to remain focusable when `disabled`

packages/react/src/ActionList/Item.tsx

@@ -317,13 +317,20 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
     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 : ''
       }`,

packages/react/src/ActionMenu/ActionMenu.features.stories.tsx

@@ -282,3 +282,59 @@ export const Submenus = () => (
     </ActionMenu.Overlay>
   </ActionMenu>
 )
+
+export const DisabledItems = () => (
+  <ActionMenu>
+    <ActionMenu.Button>Open menu</ActionMenu.Button>
+    <ActionMenu.Overlay width="auto">
+      <ActionList>
+        <ActionList.Item disabled={true}>
+          Workflows
+          <ActionList.LeadingVisual>
+            <WorkflowIcon />
+          </ActionList.LeadingVisual>
+        </ActionList.Item>
+        <ActionList.Item onSelect={() => alert('Archived items clicked')}>
+          Archived items
+          <ActionList.LeadingVisual>
+            <ArchiveIcon />
+          </ActionList.LeadingVisual>
+        </ActionList.Item>
+        <ActionList.LinkItem href="/">
+          Settings
+          <ActionList.LeadingVisual>
+            <GearIcon />
+          </ActionList.LeadingVisual>
+        </ActionList.LinkItem>
+        <ActionList.Item disabled={true}>
+          Make a copy
+          <ActionList.LeadingVisual>
+            <CopyIcon />
+          </ActionList.LeadingVisual>
+        </ActionList.Item>
+        <ActionList.Divider />
+        <ActionList.Group>
+          <ActionList.GroupHeading>Github projects</ActionList.GroupHeading>
+          <ActionList.LinkItem href="/">
+            What&apos;s new
+            <ActionList.LeadingVisual>
+              <RocketIcon />
+            </ActionList.LeadingVisual>
+          </ActionList.LinkItem>
+          <ActionList.LinkItem href="/">
+            Give feedback
+            <ActionList.LeadingVisual>
+              <CommentIcon />
+            </ActionList.LeadingVisual>
+          </ActionList.LinkItem>
+          <ActionList.LinkItem href="/">
+            GitHub Docs
+            <ActionList.LeadingVisual>
+              <BookIcon />
+            </ActionList.LeadingVisual>
+          </ActionList.LinkItem>
+        </ActionList.Group>
+      </ActionList>
+    </ActionMenu.Overlay>
+  </ActionMenu>
+)