Clean up redundant ARIA roles

[metamoni]

There are several places in the codebase where we're using ARIA roles on semantic HTML elements that already have that implicit role. This is bad practice and we should stop doing it going forward.

See W3C author requirements

It is NOT RECOMMENDED for authors to set the ARIA role and aria-* attributes to values that match the implicit ARIA semantics defined in either table.

We should clean up the codebase and remove all redundant ARIA roles. This can be done in multiple PRs and we can handle each role at a time:

• role="main" on main
• role="navigation" on nav
• we have a role="rowheader" on td, which is improperly used. If we want the purpose of this to be a table header, then we should use th instead

For the following, further investigation is needed across different browsers/screen readers, before removing. See comments below for further details about why these were implented.

• role="list" on ul or ol
• role="table" on table
• role="rowgroup" on tbody, tfoot, thead
• role="cell" on td
• role="columnheader" on th
• role="row" on tr

[KaichenWang]

@metamoni Thanks for performing this audit of our role attributes! A few things to note:

1. In my experience, various screen readers work differently and some may actually require explicit role attributes to work properly. For example, we added the explicit role="list" for ul elements to address an issue with Safari and Voiceover (originally brought up in a PR from 2022). I'm not sure this is still needed in the latest versions, but something to keep in mind and test for.

2. Are there any examples of negative side-effects of keeping the role attribute? This may help determine our approach. If we can identify real-world issues that screen readers exhibit when interacting with redundant role attributes, then we should fix this urgently. Otherwise, we may want to err on the side of caution and invest more time to properly test before taking action.

[kmeleta]

I would be careful with removing some of these. Let's definitely revalidate as some of these may no longer be needed, but most of these likely served a purpose at some point. ..Most times that purpose is catering to VO in safari losing context resulting from certain CSS styles.

For example, when we set list-style: none; on a ul VO stops treating the element as a list. Adding a redundant role="list" on the element reinforces the semantics.

For tables, we change the display from table to things like flex to support a modified mobile table layout, which also causes serious issues in VO announcements. That said, I know tables aren't reading well on mobile right now regardless. Below are some attempts to improve this in the cart tables. tl;dr it's been difficult.

#1486
#1507
#838

[metamoni]

@svinkle and @menigk-shopify can you help us out here? Which ones of these are safe to remove?

[svinkle]

• role="list" on lists is purposeful, as described above
• role="main" on main elements can be removed, support is broad
• Same with role="navigation" on nav, well supported
• As mentioned, the table roles are also purposeful due to CSS

All that said, it's been a good year or more since these were implemented. Feel free to test to verify these are still required.

[metamoni]

@svinkle what about role="rowheader" being used on td? This breaks the rules outlined here and should be instead used on th. Can we change that or was that also intentional?

[svinkle]

@metamoni Where is this being output?

[metamoni]

@svinkle in the main-order.liquid file, in several places.

[svinkle]

@metamoni Swapping the element to th make sense.