Cart line-item error a11y

[ludoboludo]

Why are these changes introduced?

Fixes #471

What approach did you take?

Followed the recommendations posted in the issue. Added a role="status" on the error text and changed the elements used.

Other considerations

This isn't fixing: #398

Demo links

• Store
• Editor

Checklist

• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[svinkle]

@ludoboludo Which product can I use to test with?

[ludoboludo]

@ludoboludo Which product can I use to test with?

You can use the Test 3D models, video one that should show up on the home page in the feat. collection section. If you add that one to the cart, the default variant selected, you shouldn't be able to raise the quantity above 1 or 2.

[svinkle]

@ludoboludo There's a few other live announcements happening which pushes this to the end. I'm curious how it would sound when swapping role="status" with the more urgent role="alert". I'm also considering adding a visually hidden "Error:" string to the beginning of the text to make the current state known.

[svinkle]

@ludoboludo I think I also discovered a bug while testing this. If you adjust the input value and press Enter, the new value goes through and no error is displayed.

Gif

[ludoboludo]

For now I will just fix the issue the PR is linked to but I'll create an issue so that we can check on page load to make sure the quantities shown are accurate. From what I'm seeing when entering the number and pressing Enter, it trigger the function to check the quantity but because it ends up reloading the page, it actually goes through. We need to run a check on page load.

It only seems to happen when there one item only in the cart 🤔

Looks like there is an issue created for this: #380 to which I added a video showing the issue you found Scott.

[tauthomas01]

Tested with VO and it is announced: video