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

Accessibility Issue in RichText: Keyboard focus is getting trapped inside Theme color section of Font Color due to which Automatic control not accessible using Shift-Tab key as well as Standard color is not accessible using Tab key same issue with Highlighted color control is getting trapped with tab key and not accessible using "Shift-Tab"

Open
#1,944 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

help wanted type:bug
Dominant language
TypeScript
Stars
433
Forks
418
Avg merge
5d 6m
Merged PRs (30d)
19

Description

User Experience:
Users who depend on keyboard will be impacted if "Automatic" control is not accessible using "Shift-Tab" key after you move inside Theme color picker or Standard Color picker. Keyboard functions and people that are blind or have low vision and people that use keyboard emulators cannot access the content which will confuse them.

Please Note: Standard Color picker is not accessible with pressing tab or arrow key at all.

Actual Result:
"Automatic" control is not accessible using "Shift-Tab" key upon navigating inside Theme color to pick a color.
Issue Reproduce for "No Color" control inside "Highlight color" button of the same dialog.

Expected Result:
"Automatic" control should be accessible using "Shift-Tab" key once you navigate inside Theme color/Standard color.

Image

We observed the focus is getting trapped once you tab inside the theme color and it won't allow to come out of it due to that standard colors section also not accessible for keyboard users

Same issue for Highlighted color as well see attached screenshot, once you go inside color picker you wont able to come back outside using Shift-tab key.

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 by reproducing the RichText Font Color and Highlight color controls with keyboard-only navigation, then trace the TypeScript entry point for these dialogs. Verify focus movement with Tab and Shift-Tab through Theme, Standard, Automatic, and No Color controls; done means users can reach each control and leave each color section without focus becoming trapped.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.