Cannot specify tabIndex on ActionList.LinkItem

[jdrush89]

Describe the bug I am not able to specify a tabindex on an ActionList.LinkItem. I would like the link item to be tabbable, but it seems like the focuszone handling focus within the list is overriding that.

To Reproduce Steps to reproduce the behavior:

1. Go to https://primer.style/react/ActionMenu
2. Enter the following code to the first example:

<ActionMenu>
  <ActionMenu.Button>Menu</ActionMenu.Button>

  <ActionMenu.Overlay>
    <ActionList>
      <ActionList.Item onSelect={event => console.log('New file')}>New file</ActionList.Item>
      <ActionList.Item>Copy link</ActionList.Item>
      <ActionList.Item>Edit file</ActionList.Item>
      <ActionList.Divider />
      <ActionList.Item variant="danger">Delete file</ActionList.Item>
      <ActionList.LinkItem href="www.github.com" tabIndex={0}>Link</ActionList.LinkItem>
    </ActionList>
  </ActionMenu.Overlay>
</ActionMenu>

3. Open the Menu and press 'tab'

Expected behavior The Link should be reachable with tab instead of having to use the down arrows. The main use case I have for this currently is in the ref selector in the code tab of github. There can be thousands of refs in the menu when it is opened, and at the bottom is a link to 'view all' that is very difficult to reach for keyboard users.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome
• Version 103.0.5060.66 (Official Build) (32-bit)

[owenniblock]

@jdrush89 Unfortunately this behavior would be incompatible with the accessible semantics of an element with role="menu".

For more information about the valid use of menus there's a good section in the WAI-ARIA guidelines on the menu pattern

Technically, pressing tab inside the menu should close the menu, so it's possible that the use of ActionMenu is incorrect in this instance - maybe an ActionList would make more sense here?

If the only option is to use ActionMenu here (although it feels semantically incorrect), I would advise moving the View all branches link outside the ActionMenu so that it doesn't sit within the menu itself.

[lesliecdubs]

Hi @jdrush89 👋 Did Owen's comment above provide a solution you are able to run with?

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.