Skip to content

Cart is not accessible to VoiceOver in base styles #21447

Open
@scottsb

Description

Preconditions (*)

All versions from 2.0.0 to 2.3.0

Steps to reproduce (*)

  1. Add two items to cart.
  2. Use VoiceOver on Mac to navigate through cart using "next item" keyboard shortcut or gesture.

Expected result (*)

VoiceOver navigates through each cell in sequence.

Actual result (*)

  1. VoiceOver skips the first cell containing the item name, meaning that a visually impaired user cannot understand what is actually in their cart.
  2. VoiceOver skips the last row in the cart (containing action buttons), meaning they cannot remove or edit the last item from their cart.

Diagnosis

These have two separate causes:

  1. VoiceOver skips the first table cell because it is marked with display: block, which VoiceOver interprets as meaning the cell is only presentational. Anytime CSS changes the display property on a table element, it effectively changes the implicit role as well. This can be fixed by either getting rid of the CSS rule, which doesn't seem necessary in the first place, or by explicitly adding a role="gridcell" to the first <td> where the CSS rule is applied.
  2. VoiceOver skips the last row due to how the <caption> is being hidden. This seems like it may be a bug in VoiceOver itself, but by virtue of the position: absolute being applied through the lib-visually-hidden mixin, it seems to remove it from the table (for a similar reason as the prior point), yet fail to internally account for this properly when determining how many rows to read through.

I may submit a PR for this, but I'm waiting for feedback on the best way to resolve the second issue. Glad to hear any suggestions here, and I've also posted on Stack Overflow:
https://stackoverflow.com/questions/54876969/how-to-accessibly-hide-table-caption-element

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Component: ThemeIssue: Clear DescriptionGate 2 Passed. Manual verification of the issue description passedIssue: ConfirmedGate 3 Passed. Manual verification of the issue completed. Issue is confirmedIssue: Format is validGate 1 Passed. Automatic verification of issue format passedIssue: Ready for WorkGate 4. Acknowledged. Issue is added to backlog and ready for developmentPriority: P3May be fixed according to the position in the backlog.Progress: ready for devReproduced on 2.2.xThe issue has been reproduced on latest 2.2 releaseReproduced on 2.3.xThe issue has been reproduced on latest 2.3 releasestale issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions