ember-table icon indicating copy to clipboard operation
ember-table copied to clipboard

Set aria-* attributes to help screen readers when using occlusion

Open HeroicEric opened this issue 4 years ago • 0 comments

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-rowcount to the <table> element
  • Adding aria-rowindex to 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.

HeroicEric avatar Mar 18 '21 18:03 HeroicEric