Set aria-* attributes to help screen readers when using occlusion
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 1.7k
- Forks
- 351
- Avg merge
- 1d 22h
- Merged PRs (30d)
- 1
Description
When ember-table occludes table rows, screen readers can have difficulty understanding the table since all the rows are not present in the DOM.
We can help them out by providing a few aria attributes:
- Adding
aria-rowcountto the<table>element - Adding
aria-rowindexto each<tr>
This helps the screenreader understand the total row count and which rows are currently visible.
There's some info about this in https://sarahmhigley.com/writing/grids-part2/#lazy-loading-rows-or-columns
The vertical-collection addon used to do the occlusion looks like it provides the item index so I don't think this would be too difficult to add.
I started to implement a WIP of this but then I realized that I'm not sure how this needs to work to support the tree features So I need to look a little bit more into that.
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 reviewing ember-table's occlusion behavior and the linked tree features documentation, then inspect how the vertical-collection addon exposes item indexes. Confirm how row indexes should work for both regular and tree rows. Done means the table exposes the total row count and each rendered row exposes its correct index without breaking tree behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100