Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

ActionMenu.Anchor should only accept button

未关闭
  • 哪里不对？
#5,477 5 条评论 3 个 reaction 已指派 2 人 在 GitHub 查看

维护者通常 2 天内回复

@siddharthkp 已经在做这个了。

开始于 2026年3月9日。

  • #7640 来自 @copilot-swe-agent —— 已关闭，未合并

评估

这个 Issue 还没有评估数据。

描述

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

主要语言
TypeScript
星标
3.9k
派生
697
平均合并
3 天 12 小时
30 天内合并 PR
41

环境准备

在 Codespaces 中打开

在浏览器里用你自己的 GitHub 账号启动这个项目的开发容器。

  • 没有 Dockerfile 或 Docker Compose 文件
  • 有 Pull Request 模板
  • 没有贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

primer/react 的其他 Issue

查看 primer/react 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。