MetaMask / MetaMask/metamask-design-system

Add Accessibility Props for ButtonIcon Component in React Native

Open
#421 0 comments 0 reactions 0 assignees View on GitHub
team-design-system
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.