pnp / pnp/sp-dev-fx-controls-react

Accessibility Issue in RichText: Screen reader doesn't announce state of text formatting controls whether its selected or not when accessing it through tab.

Open
#1,945 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

status:fixed-next-drop type:bug
Dominant language
TypeScript
Stars
433
Forks
418
Avg merge
5d 6m
Merged PRs (30d)
19

Description

User Experience:
Screen reader dependent users will be impacted as the Selected state is not defined for Style buttons. Due to this, users will not be able to identify the state of the control. This will confuse them.

Actual Result:
Selected state is not defined for Style buttons. i.e. Bold, Italic, Underline.

Note:
Same issue repro if we unselect button, screen reader doesn't announce any information regarding it.

Expected Result:
Selected state should be defined for Style buttons.
Screen reader should announce "selected" information when a button is selected.

Please see attached screenshot where i have selected Underline button but it doesn't announce whether it has been selected or not and also as you can see bold was already selected earlier and when i navigate to it by pressing tab it doesn't announce the selected state of that button which will confuse screen reader users.

Image

Contributor guide

No contributing guide indexed for this repository

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

Start at the RichText control's Bold, Italic, and Underline style buttons and reproduce the issue by navigating to selected and unselected controls with a screen reader and Tab. Done means the screen reader announces the selected state for each formatting control, including when a control is unselected.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.