Automattic / Automattic/wp-calypso
Feature Request: Improve Accessibility for Adding Blocks in the Block Editor for Screen Reader Users
- Dominant language
- TypeScript
- Stars
- 12.6k
- Forks
- 2k
- Avg merge
- 1d 17h
- Merged PRs (30d)
- 552
Description
### What
Add functionality to improve the accessibility of the block editor for users who rely on Screen Readers. Specifically:
- Ensure the cursor is focused on the block search bar when the "Add Block" button is selected.
- Allow users to type the block name (e.g., "image") and press Enter to directly insert the block.
- Automatically focus on the first block option in the list when a user searches for a block, enabling quick selection.
### Why
This was a feature request made here: 9268447-zd-a8c by a visually impaired user who uses Screen Reader to edit their site.
This feature addresses accessibility challenges faced by visually impaired users and Screen Reader users. The current workflow requires navigation and interaction with the screen, which can be difficult.
By automatically focusing the cursor in the block search bar and streamlining block selection, we can reduce friction and make it easier to add blocks.
It solves the problem of:
- Users struggling to locate the search bar and interact with block options.
- Easier accessibility to the block editor for users who have visual impairments.
### How
This is what the user suggested:
1. When a user activates the "Add Block" button, set the focus on the search bar for the block.
2. Allow the user to type the name of the block (e.g., "image") and press Enter to insert it directly into the editor.
3. If multiple block options are available, automatically focus on the first block option in the results list after the user presses Enter.
Contributor guide
Research direction
Start by locating the Block Editor implementation for the “Add Block” button, block search bar, and search results. Trace the current focus and Enter-key behavior, then identify the relevant accessibility tests or test entry points. Done means activating Add Block focuses search, Enter inserts a typed block, and search results support quick focus and selection for screen reader users.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100