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

Bug - MenuToggle - aria labelling doesn't work as intended

未关闭
#11,805 7 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
65/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
冷清
技术栈
react, typescript

调研方向

定位 MenuToggle 的实现、其 props 接口,以及 issue 中链接的 React Select 示例。检查当前如何渲染 aria-label、aria-labelledby 和动态 toggle 文本,然后更新组件和示例,使内部 button 具有所需的 accessible name。使用 single-select 示例和 VoiceOver 验证生成的 markup。

由索引模型根据 Issue 内容生成。

描述

A11y PF Team Stale

Describe the problem
Per https://github.com/patternfly/patternfly/issues/6562, we need to update how aria labeling is handled in MenuToggle, namely:

  • Right now the aria-label on the MenuToggle does nothing since the text content is taking precedence,

  • We need to ensure MenuToggle's with dynamic text content have an accessible name that includes a static label as well as the dynamic toggle content

How do you reproduce the problem?
Go to a MenuToggle and Select example and navigate both with VoiceOver. Notice that only the text content gets announced. Then choose a new option in the Select example, and notice that there's no context for what the Select is actually for but rather just the current text content.

Expected behavior
Note this is most likely only for a non-typeahead and non-plain MenuToggle, basically only a MenuToggle whose content would be dynamic like in Select examples (where by default the toggle content may be "Choose an option", then choosing an option updates the toggle content to e.g. "Option 1").

  • MenuToggle should have an aria-labelledby on its internal button element that should reference the pf-v6-c-menu-toggle__button (if aria-label is passed; if aria-labelledby is passed to MenuToggle then this internal aria-labelledby should reference that ID instead) and pf-v6-c-menu-toggle__text elements -- this should only occur when aria-label or aria-labelledby are passed to MenuToggle

  • We should add aria-labelledby to the props interface to explicitly expose it

  • Examples using MenuToggle must be updated so that there is a unique/descriptive static label as well as its content label

Using the single select example in React, here's what the markup should end up looking similar to:

image

Is this issue blocking you?
List the workaround if there is one.

Screenshots
If applicable, add screenshots to help explain the issue.

What is your environment?

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

What is your product and what release date are you targeting?

Any other information?


Jira Issue: PF-1729

主要语言
TypeScript
星标
862
派生
392
平均合并
4 天 8 小时
30 天内合并 PR
9

贡献指南

打开贡献指南

从这里开始

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

patternfly/patternfly-react 的其他 Issue

查看 patternfly/patternfly-react 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

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