MetaMask / MetaMask/metamask-design-system
Add Accessibility Props for ButtonIcon Component in React Native
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
### **Description**
The `ButtonIcon` component, which uses `Pressable`, currently lacks appropriate accessibility props for React Native. Since it has no text, it needs to support screen readers properly to ensure an inclusive user experience.
### **Technical Details**
- Add `accessibilityLabel` to provide a textual description for screen readers.
- Ensure `accessibilityRole="button"` is set for proper semantics.
- Consider `accessibilityHint` if additional context is needed.
- Verify with VoiceOver (iOS) and TalkBack (Android).
### **Acceptance Criteria**
- Screen readers properly announce the button’s function.
- Users can navigate and activate the button using assistive technology.
- Accessibility tests confirm correct behavior.
### **References**
- [[React Native Accessibility Docs](https://reactnative.dev/docs/accessibility)](https://reactnative.dev/docs/accessibility)
- Related internal discussions/issues if available.
Contributor guide
Research direction
Locate the ButtonIcon component and inspect how its Pressable is configured. Read the React Native Accessibility documentation linked in the issue, then add the requested accessibility behavior and run the project's accessibility tests. Done means screen readers announce the button's function and assistive technology users can navigate and activate it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- accessibility, mobile-dev
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100