Table > Use correct ARIA attributes and roles
Problem
Some ARIA attributes and roles are either unnecessary or not allowed on a <table>
and sub elements. Overall, in the stories it seems that semantic tables had roles and attributes added to them that would be used when other elements like <div>
s are used to construct a table and the semantics have to be added. If there's a need to demonstrate how to construct a table out of non-table elements then it should be done as a separate story with documentation.
Solution
Evaluate each ARIA attribute a/role and either remove or document correct use. The following table includes all ARIA attributes and roles found in current stories and what action to take for each.
Attribute or role | Action |
---|---|
role="table" on <table>
|
When coded as a <table> this is redundant and not necessary unless resetting table semantics that were lost by CSS that changed the table layout. |
aria-busy="false on <table>
|
Should only be used on an ARIA live region, more info on usage on MDN Web Docs. |
aria-colcount on <table>
|
From MDN Web Docs, "If all columns in a table are present in the DOM, the aria-colcount attribute isn't needed, as browsers automatically calculate the total number of columns. However, if only a portion of the columns is present in the DOM at a given moment, that is when this attribute is helpful and needed." In the Storybook examples this isn't needed, and I'm not sure if any examples exist in the product that require this. If so, the pattern should be documented separately. |
aria-multiselectable="true" on <table>
|
This gets flagged in multiple automated tests because a <table> isn't a valid element to which it should be applied. It should only be used for grid , listbox , tablist , and tree roles. See MDN Web Docs for details. |
role="rowgroup" on <thead> , <tbody> , and <tfoot>
|
When coded as a <thead> , <tbody> , or <tfoot> this is redundant and not necessary unless resetting table semantics that were lost by CSS that changed the table layout. |
role="row" |
When coded as a <tr> this is redundant and not necessary unless resetting table semantics that were lost by CSS that changed the table layout. |
role="columnheader" on <th>
|
When coded as a <th> this is redundant and not necessary unless resetting table semantics that were lost by CSS that changed the table layout. |
aria-colindex on <th> and <td>
|
Related to aria-colcount mentioned above. |
aria-selected="false" on <tr>
|
The rows shouldn't be interactive elements, and nothing otherwise indicates that they are so this should be removed. On that note, tabindex="0" should also be removed, and that is being addressed in #1728 (moved). |
role="cell" |
When coded as a <td> this is redundant and not necessary unless resetting table semantics that were lost by CSS that changed the table layout. |
Edited by Jeremy Elder