tr role="button" on table row

[Wolfr]

ember-data-table/addon/templates/components/data-table-content-body.hbs

Line 6 in ffb1e24

<tr role="button" class="{{if (contains wrapper.item data-table.selection) "selected"}} {{if onClickRow "clickable"}}" onclick={{action (optional onClickRow) wrapper.item}}>

It is not helpful to put this ARIA role here.

You are not supposed to add role="button" to a table row, this doesn't help the accessibility. In my understanding of screen readers, the screen reader will now treat the whole row content as a single string and it will not be able to interpret the table correctly.

[madnificent]

Hi @Wolfr, thanks for the report.

Is there a way to indicate the full row can be interacted with whilst also letting screen readers understand the content are still table cells?

[Wolfr]

I stumbled upon this because an “accessible table” problem occured again in another project. I noticed I never got to answering this.

My recommendation would be to avoid the problem, by using a visible link to a detail page from an overview grid; and not make whole table rows clickable.

But if you must have clickable rows (for example if a design specifies it, and you can't seem to convince the designer to drop it (hint hint ;) ); then my recommended method would be to:

• add an action to one of the last table cells, with the link to the detail route
• This link should be accessible to screen readers but hidden from non-screen-reader users
• Javascript can be used to grab the link's href which can then be put on the table row with a click event.

Ét voila, we have an accessible table that will be read out correctly.

[madnificent]

We should revisit this component so we have cleaner modern EmberJS abstractions. This suggestion seems to be a great solution for efficient operation from both the perspective of highly interactive visual browser agents as well as for screen-readers and the likes.

Thank you for the suggestion. Is this an urgent topic for you?

[Wolfr]

Not very urgent, since in our big government project we don't use this pattern at the moment.

However this was on my mind.

Here's a codepen which shows the idea that I talked about, abstracted to as little code as possible.

https://codepen.io/wolfr/pen/rNWdNyX

In this video you can see me navigating using a screen reader.

ScreenFlow.mp4

There is a problem that you have to tab twice to get through the list when using a keyboard.

Perhaps this code can help to have a more accessible Ember component.