More accessibility changes to make ARC Toolkit stop complaining
More accessibility changes to make ARC Toolkit stop complaining
mc2002tii
Posts: 17Questions: 3Answers: 0
Allen, thank you for all the previous changes you've made for my accessibility requests. I think these might be the last ones. I tested with DataTables 2.1.7 with Bootstrap 5 integration.
None of these affect usability, but after some digging I think ARC Toolkit is technically correct here.
- The root <tr> element of the header row has role="row" explicitly defined on it. For some reason this triggers weird findings of incompatible attributes inside the row. Given that the implicit role of a <tr> is row just removing that attribute should have no side effects and makes the findings go away.
- The <th> elements for each sortable column in the header have role="button" defined and a tabindex="0" set. That role prompts conflicts with the aria-sort attribute. Since there is a <span> inside the <tr> that also has role="button", removing the role from the <th> and moving the tabindex to the span fixes the errors, better matches the intent of the elements, and still seems to work correctly.
Replies
1) Fix committed. Ironically it was originally added to improve accessibility! Times have moved on and those browser bugs have been resolved.
2) The conflict is that an element can't have a
role=buttonandaria-sort? Let me think about this one a bit - it might be a DataTables 2.2 change - I'm thinking about some options for reworking the header a bit.Allan
Thank you!
On #2, yes, exactly. And in the outputted code the role on the th is extraneous because of the span with role=button nested inside of it. The tabindex would just need to be moved when that's dropped.
I'm tempted to move the sort tabindex / button to the sorting icon element. Seems like it would make sense to have it there. What do you think?
Allan
Do you mean the up/down arrows? If so, since those are rendered using ::before/::after pseudo-elements it might be worse from an accessibility standpoint. Is it even possible to set a tabindex on those?
On the
spanthat surrounds them. You are correct though, the icons are pseudo elements of thatspan, which is otherwise empty.Allan
Ah, that makes sense. As long as it has a tabindex on it that seems like it would work.