DogStark / DogStark/PetChain-MobileApp
Add `accessibilityHint` to all icon-only buttons in the app
- Dominant language
- TypeScript
- Stars
- 1
- Forks
- 134
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 27
Description
**Labels:** `frontend` `accessibility`
**Background**
`docs/ACCESSIBILITY.md` flags that icon-only buttons (filter icons, close buttons, action menu triggers) lack `accessibilityHint` in several screens. Screen reader users hear only the label with no context for what will happen when they activate the button.
**What "Done" Looks Like**
- Audit all screens for icon-only or icon-plus-label-missing buttons
- Add `accessibilityHint` (describes the action outcome) where missing, e.g., `accessibilityHint="Opens filter options for the vet directory"`
- Create a checklist in the PR of all buttons audited with pass/fail
- Add an ESLint rule (custom or from `eslint-plugin-jsx-a11y`) that warns when `TouchableOpacity` has no accessible text — add it to `eslint.config.js`
Contributor guide
Research direction
Start by reading docs/ACCESSIBILITY.md and reviewing eslint.config.js, then search the app for TouchableOpacity instances and icon-only buttons across its screens. Add accessibilityHint where the audit finds missing context, document every audited button in the PR checklist, and verify that the ESLint rule warns about TouchableOpacity elements without accessible text.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- eslint, react-native, typescript
- Domain
- accessibility, frontend, mobile-dev, tooling
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100