Example app: icon-only IconButtons on the Icon Button screen have no accessible name
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 1/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 86/100
- Issue type
- Bug
- Clarity
- Clearly specified
- Activity status
- Active
- Tech stack
- react-native, typescript
- Domain
- accessibility, frontend
Research direction
Open example/src/Examples/IconButtonExample.tsx and inspect each icon-only IconButton. Add an aria-label that describes its action, then run the example app on web and check /icon-button with axe-core. Done when axe reports no button-name violation on that screen.
Written by the indexing model from the issue text.
Description
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?
- Run the example app on the web from
main(yarn install, thennpx expo start --webinexample/). - Open the Icon Button example (
/icon-button). - 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 |
- Dominant language
- TypeScript
- Stars
- 14.5k
- Forks
- 2.3k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 22
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from callstack/react-native-paper
-
feature request
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
callstack/react-native-paper#5189 ·
Maintainers usually reply within 1 day
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
callstack/react-native-paper#5187 ·
Maintainers usually reply within 1 day
-
Accessibility bug web
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
callstack/react-native-paper#5180 ·
Maintainers usually reply within 1 day
-
Chip: accessibilityState passed by caller is discarded; aria-checked is never forwarded to the real rendered nodePossibly taken @bhumikabiyani claimed this 2 days ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
callstack/react-native-paper#5146 · 2 comments ·
Maintainers usually reply within 1 day
-
Tooltip: onPress event object is not propagated to parent component on nativePossibly taken @aliyilmaztech claimed this 86 days ago. Openbug
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
callstack/react-native-paper#5003 ·
Maintainers usually reply within 1 day
All issues in callstack/react-native-paper
Similar issues
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
Maintainers usually reply within 1 day
-
pending close triaging
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
anomalyco/opencode#62582 · 1 comment ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
live-codes/livecodes#1079 · 1 comment ·
Maintainers usually reply within 1 day
-
Add: ESP 2 ROOpenapproved check:passed streams:add
Difficulty 2/5 1-3 hours Newbie friendliness 66/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day