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"
Nobody has claimed this yet.
- 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.
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.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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