Example app: icon-only IconButtons on the Icon Button screen have no accessible name

未關閉 適合新手
#5,182 0 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

維護者通常 1 天內回覆

還沒有人認領這個 Issue。

評估

難度
1/5
預估耗時
1-3 小時
新手友好度
86/100
Issue 類型
缺陷
描述清晰度
描述清楚
活躍度
活躍
技術堆疊
react-native, typescript

研究方向

開啟example/src/Examples/IconButtonExample.tsx,檢查每個僅顯示圖示的IconButton。新增描述其操作的aria-label,接著在 Web 上執行範例應用程式,並使用 axe-core 檢查/icon-button。當 axe 在該畫面上不再回報button-name違規時,即表示完成。

由索引模型根據 Issue 內容生成。

描述

Accessibility example app good first task
Current behaviour

On the example app's Icon Button screen (example/src/Examples/IconButtonExample.tsx), no IconButton passes an aria-label, so the icon-only ones render as buttons with no text, and a screen reader announces them only as "button". On the web axe-core reports button-name (critical): "Buttons must have discernible text".

Expected behaviour

Every icon-only IconButton in the example has an aria-label that says what it does, and axe reports no button-name violation on the screen.

How to reproduce?
  1. Run the example app on the web from main (yarn install, then npx expo start --web in example/).
  2. Open the Icon Button example (/icon-button).
  3. Run axe-core on the page.
Preview
What have you tried so far?
Your Environment
software version
react-native-paper main (8cb344b)
browser Chromium 153
主要語言
TypeScript
星號
14.5k
分支
2.3k
平均合併
2 天 12 小時
30 天內合併 PR
22

環境準備

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

callstack/react-native-paper 的其他 Issue

查看 callstack/react-native-paper 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。