Add accessible table roles to cart table

[kmeleta]

PR Summary:

Improves VoiceOver announcements for the cart items table.

Why are these changes introduced?

When html tables have their display styles changed from table to flex,grid,etc it breaks the table semantics for VoiceOver in Safari. The cart items table currently does just that to accommodate our desired mobile layout.

Fixes #838

This PR improves the announcements of the mobile cart table and also fixes a smaller announcement issue with the product option description list within the table.

What approach did you take?

I see two options to fix this.

1. Rework the mobile styles so we don't need to change the table display
2. Attempt to add the proper roles to the table markup

This PR implements option 2. This has the benefit of not introducing any functional changes to the current markup.

Option 1 requires that the quantity input be duplicated inside the product column along with some CSS trickery, but I think the outcome is potentially more logical than the quantity input being read after the Total column on mobile, like we do now. I'm including links to this approach as well in case we want to consider it.

https://github.com/Shopify/dawn/compare/cart-table-a11y-fix
https://fn2i185r03ncp59h-45840990230.shopifypreview.com

Testing steps/scenarios
Add items to cart, navigate cart using VoiceOver in Safari with desktop and mobile sized viewports.

Demo links

• Store
• Editor

Checklist

• Added PR summary for release notes
• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[svinkle]

Doing some early testing with Safari + VO to start, I'm noticing some odd behaviour.

When using the virtual cursor to navigate (Ctrl + Opt + ←/→)

• "Quantity" column header is skipped when moving forward through the content. When moving backward, the header is announced. Other headers are announced as expected.
• When the end of the table is reached, VO makes an announces as if entering a new table, "table, 4 columns, 2 rows." It should announce, "end of table."

I still need to test other environments but this is a good place to start with an investigation.

[svinkle]

With the exception of macOS Safari as previously noted, other desktop environments are working as expected.

Mobile iOS is improved. It's announcing table columns and rows as expected. The concern now is the announcement of, "table, 4 columns, 2 rows." Technically this is correct as there are 4 columns (td elements) presented in the DOM. Visually however, there appears to be only 2 columns; product and total. The product row also appears to have 2 columns, product and total, as the quantity selector is visually placed under the Product header.

This is a concern for sighted screen reader users who'd hear one thing (4 columns) and see another (2 columns.) Thoughts on moving the quantity controls and content within the product column for mobile?

There seems to be no difference in Android Talkback when comparing the before and after state of this PR. I'll need to do more testing but don't let this be a blocker for this PR.

[kmeleta]

Thoughts on moving the quantity controls and content within the product column for mobile?

@svinkle I tried an alternative approach to this PR too that basically requires the quantity input be moved into the product column on mobile. This links and description of the approach are higher up in the PR description if you wanted to try that out and see if that is significantly better.

[svinkle]

@kmeleta Thanks, I missed this when I read the description.

While I understand option 1 is more work and code, it works infinitely better than option 2. When I navigate the tables on desktop and mobile, option 1 provides the experience I'd expect when comparing the visual to aural UX. Option 2 is quite broken with Safari+VO on desktop, and on mobile, the aural and visual UX doesn't match.

I recommend to implement option 1 in terms of providing a better, more accurate UX for AT users. Curious what others think.

[kmeleta]

I recommend to implement option 1 in terms of providing a better, more accurate UX for AT users. Curious what others think.

Ok perfect, then I think what I'll do is open a PR for the other approach and get dev/ux eyes on that instead. If that ends up getting approved, I'll abandon this PR.

[kmeleta]

New PR with alternate approach open at #1507 @svinkle I'll leave this one open until that one is determined viable.

[svinkle]

@kmeleta Let's role with this PR.

I've been doing more testing. The issue I found with the skipping of column headers and VO not describing the end of the table stems from the fact that the accessibility tree is constructing a broken table: a mismatch of row cell count. The thead row consists of 3 cells and the tbody row consists of 4 cells. This is throwing things off and VO doesn't seem to know how to cope.

If we can include and empty td cell in the thead to match the cell count in the tbody row, this specific Safari+VO issue should be resolved. This PR should then address the original issue of the table semantics not being conveyed on mobile.

Let's table the other issue regarding the duplicate quantity selector as this is out of scope.

[ludoboludo]

For me it's announcing the 4th column when reaching the quantity selectors.

When I get to the table, for some reason it's not reading the first column header and goes straight to the last one (total).

Then I'm seeing some layout issues where the product-option is not getting space: screenshot