microsoft / microsoft/react-native-gallery

Bug 58075193: [React Native Gallery -> Sketch]: Upon selecting any color, screen reader fails to announce the selected state information.

Open
#618 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

A11ySev2 Area: Accessibility Area: Paper
Dominant language
TypeScript
Stars
257
Forks
57
Avg merge
18h 19m
Merged PRs (30d)
10

Description

Build Details:
OS Version: Dev (OS Build 27871.1000)
App: React Native Gallery
App Version: 1.0.18.0
React Native Windows Version: 0.79.0

AT: Screen Reader

Pre-Requisite:
Turn on Narrator (Ctrl + Win + Enter).

Repro-Steps:
Launch the React Native Gallery app.
Navigate to ‘Media' button present in left navigation pane and expand it.
Navigate to 'Sketch' button and activate it.
Navigate to any color and activate it.
Listen to narrator announcement.
Actual Result:
Upon selecting any color, screen reader fails to announce the selected state information.
While navigating in between the different colors also, narrator is not announcing the selected state of the colors. It simply announces as "Black, button", or "Red, button" etc.

Note: Same issue is observed in 'Text-to-Speech' control also.

Expected Result:
Narrator is should the selected state of the color. When user navigate in between the colors narrator should announce as "Black, button, Selected", etc.

User Impact:
Users with visual impairments who rely on screen reader will not be able to know whether the button is selected/unselected if narrator fails to announce the state of the buttons.

MAS Reference:
MAS 4.1.2 – Name, Role, Value

Trap ID:
1.6 - Poor Grouping

"Have feedback on bugs logged, please tag bug as “A11yRCA” and add your feedback in the comment section.”

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue in the React Native Gallery by opening Media > Sketch, selecting colors, and checking Narrator announcements; also verify the Text-to-Speech control noted in the report. Trace the color controls from those entry points and confirm that navigation announces each color's selected state when the fix is complete.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
accessibility, frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.