Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

ActionMenu.Anchor should only accept button

Abierto
  • ¿Algo no está bien?
#5,477 5 comentarios 3 reacciones 2 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@siddharthkp ya está trabajando en esto.

Desde el 9/3/2026.

  • #7640 de @copilot-swe-agent — cerrado sin fusionar

Evaluación

Este issue todavía no se ha evaluado.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
3.9k
Forks
691
Merge medio
3 d 6 h
PR fusionados (30 d)
54

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de primer/react

Todos los issues de primer/react

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.