Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

ActionMenu.Anchor should only accept button

Aperta
  • Qualcosa non va?
#5,477 5 commenti 3 reazioni 2 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@siddharthkp ci sta già lavorando.

Dal 9/3/2026.

  • #7640 di @copilot-swe-agent — chiusa senza merge

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

accessibility bug component: ActionMenu primer-quality react staff
Description

ActionMenu has preferred API of ActionMenu.Button which uses a Primer Button and wires it up correctly.

However, if you want to customise the anchor, we also provide a ActionMenu.Anchor that can be used to give a custom element.

While this API is required, it's possible to use it incorrectly.

Spotted in the wild: In this example, the developer is trying to add an "active indicator" on the IconButton by adding an additional element (with aria-label) and positioning it

<ActionMenu.Anchor>
  <div className="relative">
    <IconButton aria-label="Filter files in tree" icon={FilterIcon} />
    {filterEnabled && (
      <div aria-label="Showing only files changed" className="active-indicator" />
    )}
  </div>
</ActionMenu.Anchor>

The above JSX renders inaccessible html:

<div
  class="relative"
  id=":rku:" <!-- used to label the menu when open, this should have been on the button? -->
  aria-haspopup="true"
  aria-expanded="false"
  tabindex="0" <!-- tabindex=0 added by ActionMenu to make sure anchor gets focus -->
>
  <button
    data-component="IconButton"
    type="button"
    aria-labelledby=":rl0:" <!-- points to tooltip -->
    aria-describedby=":rl1:-loading-announcement"
  >
    <svg aria-hidden="true"></svg>
  </button>
  <span
    class="Tooltip__StyledTooltip-sc-e45c7z-0 iBBTma"
    id=":rl0:"
    aria-hidden="true"
    popover="auto"
  >
    Filter files in tree
  </span>
  <div aria-label="Showing only changed files" class="absolute active-indicator"/>
</div>

https://github.com/user-attachments/assets/988470d7-0f1a-43a8-aa7b-3a874dc3cb33

Video description:

  1. Pressing tab on the close button seems to focus the filter button but does not show tooltip.
  2. The screen reader reads out "Filter files in tree, Showing only changed files, menu pop-up, group"
  3. You'd expect tabbing again would focus the text input, but it focuses the button instead. Now a tooltip is visible with text "Filter files in tree".
  4. The screen reader now reads "Filter files in tree, button, Filter files in tree, Showing only changed files, menu pop-up, group" (still reading out the group)
  5. Tabbing again finally focuses the text input
Proposed Solution

I have 2 suggestions:

  1. Reduce: The most common use case of ActionMenu.Anchor is to use an IconButton, we should create a shortcut ActionMenu.IconButton as a companion to ActionMenu.Button.
    A blessed shortcut would reduce the chances of implementing it incorrectly.
  2. Validate: ActionMenu.Anchor should validate it's children, if it receives an incorrect element as the root, it should throw a warning and guide the developer to correct usage.
    My guess is that only button is valid, but we need to validate that assumption. Non-interactive element is definitely a violation. For prior art, we have similar (if not more advanced) checks in Tooltip
Suggested prioritisation:

I have fixed the instance where this was spotted so I am not blocked.

But there are 258 instances of ActionMenu.Anchor that need to be audited for their children to decide if this is a widespread bug or a good to have

Steps to reproduce

Navigate to custom anchor story and replace the Anchor with:

<ActionMenu.Anchor>
  <div className="relative">
    <IconButton aria-label="Filter files in tree" icon={FilterIcon} />
    {filterEnabled && (
      <div aria-label="Showing only files changed" className="active-indicator" />
    )}
  </div>
</ActionMenu.Anchor>
Version

v37.5.0

Browser

Chrome

Lingua principale
TypeScript
Stelle
3.9k
Fork
691
Merge medio
3g 6h
PR unite (30g)
54

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di primer/react

Tutte le issue di primer/react

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.