DogStark / DogStark/PetChain-MobileApp

Add `accessibilityHint` to all icon-only buttons in the app

Open
#613 2 comments 0 reactions 0 assignees View on GitHub
Frontend Stellar Wave
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.