Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

ActionMenu.Anchor should only accept button

オープン
  • 何か問題がありますか？
#5,477 コメント 5 件 リアクション 3 件 担当者 2 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@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
フォーク
691
平均マージ
3日 6時間
マージ済み PR（30日）
54

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートあり
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

primer/react のほかの issue

primer/react の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。