Collapsible list: unlabeled accessible button, decorative image
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 68/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
Research direction
Start at the collapsible list button used in Docs and inspect its current accessibility behavior with a screen reader. Give the button an action-specific accessible name such as “Collapse list” or “Expand list,” hide its decorative image from assistive technologies, and verify both collapsed and expanded states.
Written by the indexing model from the issue text.
Description
What’s broken?
The button used to collapse/expand a collapsible list does not have an accessible name. The image it contains is not hidden from assistive technologies. As a result, the component is not vocalized and the user cannot identify the presence of a collapsible list in the document.
Impact
A blind user navigating with a screen reader cannot identify the collapsible list button. The component is unreachable: the user does not know that a collapsible list exists in the document and cannot interact with it.
What did you expect to happen?
The button must have an accessible name describing its action (for example "Collapse list" / "Expand list"). The decorative image contained in the button must be hidden from screen readers.
Steps to reproduce
Open a document containing a collapsible list in Docs.
Navigate with a screen reader.
Observe that the collapsible list button is not vocalized.
BlockNote version
0.51.1
Environment
No response
Additional context
No response
Contribution
- I'd be interested in contributing a fix for this issue
Sponsor
- I'm a sponsor and would appreciate if you could look into this sooner than later 💖
- Dominant language
- TypeScript
- Stars
- 10.2k
- Forks
- 772
- Avg merge
- 3d 11h
- Merged PRs (30d)
- 17
Contributor guide
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.
More from TypeCellOS/BlockNote
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
TypeCellOS/BlockNote#3098 ·
-
needs-triage
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
TypeCellOS/BlockNote#3073 ·
-
needs-triage
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
TypeCellOS/BlockNote#3072 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
TypeCellOS/BlockNote#2949 · 1 comment ·
-
a11y
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
TypeCellOS/BlockNote#2855 ·
All issues in TypeCellOS/BlockNote
Similar issues
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 76/100
-
code-quality refactoring
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
langchain-ai/deepagents#6450 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
vercel/react-tweet#225 ·