Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[a11y] Restructure WalletTable component #10033

Closed
TylerAPfledderer opened this issue Apr 22, 2023 · 1 comment
Closed

[a11y] Restructure WalletTable component #10033

TylerAPfledderer opened this issue Apr 22, 2023 · 1 comment
Labels
needs triage 📥 This issue needs triaged before being worked on

Comments

@TylerAPfledderer
Copy link
Contributor

Proposal

This issue is to propose structural improvements to the WalletTable component, in post-completion of its migration to Chakra UI (see #9982).

I would argue that for accessibility purposes it should be an accordion list and not a table.

Firstly, the structure of the component in its current state is rendering nested Tables; essentially, each wallet item row is a table element wrapping a tr element.

Visually speaking, it behaves more like an accordion, with each Wallet listing having a clickable header that reveals more details.

Even if I were to fix the structure to not have the nested tables, I see two issues:

  1. The clickable wallet items do not have focus to be able to reveal the additional details via the spacebar or enter keys. The accordion item headers are buttons so that would alleviate that blocker for those who can only navigate with a keyboard, and includes those with the screen readers.
  2. I believe a table here would not provide enough accessibility necessary for a blind user with a screen reader to discern the list of information after applying filters from the sidebar and comparisons from the three dropdown options. There might be a case of cognitive overload instead.

As to No. 2, I would want to look for an efficient way to provide dynamic info to a screen reader only to give information to a user about their three comparative selections for each wallet item. Currently the comparisons are only through visual indicators of icons (the check and 'X' marks). And a table cell at least in the current state would not provide enough information to minimize cognitive load to identify which Icon is for which selection. It also would take a long time for the user to reach the arrow to toggle the dropdown of more content and might forget that it's there.

In short: I think there a too many pieces of functionality clashing along with the improper rendering of HTML structure that compromise accessibility.


I'm thinking of this interactive approach:

  1. User navigates through the filter sidebar to select their options
  2. User then navigates to the comparison selections to select three items to compare (a separate container sitting above the list)
  3. User then navigates to the list, which reads off with the total number of results from the filter. (This number could be left in the same place as before, but the accordion list would still read this off)
  4. When a user tabs over each wallet item (with focus assuming they are accordion buttons), there would be some read-out stating the name of the wallet then each comparison item on whether or not the wallet has the selected feature.
  5. Should the user wish to gain more info about the wallet item, then they can toggle this header they are focused on with the spacebar then move through the contents inside.

cc @pettinarip, @corwintines, @minimalsm for thoughts and discussion, recognizing the original implementation comes from PR #6457

@github-actions github-actions bot added the needs triage 📥 This issue needs triaged before being worked on label Apr 22, 2023
@TylerAPfledderer
Copy link
Contributor Author

Sending this to a discussion, #10034

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs triage 📥 This issue needs triaged before being worked on
Projects
None yet
Development

No branches or pull requests

1 participant