Bug - MenuToggle - aria labelling doesn't work as intended
還沒有人認領這個 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 內容生成。
描述
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
buttonelement that should reference thepf-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) andpf-v6-c-menu-toggle__textelements -- 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:
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
貢獻指南
從這裡開始
- 先讀完整個 Issue,再讀專案的貢獻指南。
- 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
- Fork 儲存庫,在一個分支上完成修改。
- 送出 Pull Request,並在描述裡引用這個 Issue 編號。
patternfly/patternfly-react 的其他 Issue
-
PF Team
難度 2/5 1-3 小時 新手友好度 68/100
patternfly/patternfly-react#12651 ·
-
難度 2/5 1-3 小時 新手友好度 78/100
patternfly/patternfly-react#12637 ·
-
PF Team
難度 2/5 1-3 小時 新手友好度 72/100
patternfly/patternfly-react#12617 · 1 則留言 ·
-
PF Team
難度 2/5 1-3 小時 新手友好度 68/100
patternfly/patternfly-react#12610 · 1 則留言 · 1 個 reaction ·
-
難度 2/5 1-3 小時 新手友好度 68/100
patternfly/patternfly-react#12600 ·
查看 patternfly/patternfly-react 的全部 Issue
相似的 Issue
-
bug(cli): hapi doctor inline-media prints a fabricated B:\ helper-script path in packaged installs 未關閉
難度 2/5 1-3 小時 新手友好度 70/100
-
Crush 未關閉
難度 1/5 1 小時以內 新手友好度 85/100
catppuccin/catppuccin#3125 ·
-
難度 1/5 1 小時以內 新手友好度 90/100
ElementsProject/cln-application#167 · 1 則留言 · 1 個 reaction ·
-
難度 2/5 1-3 小時 新手友好度 75/100
Quantco/pnpm-licenses#17 ·
-
難度 2/5 1-3 小時 新手友好度 75/100