[a11y] Restructure WalletTable
component
#10033
Labels
needs triage 📥
This issue needs triaged before being worked on
WalletTable
component
#10033
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 atr
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:
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:
cc @pettinarip, @corwintines, @minimalsm for thoughts and discussion, recognizing the original implementation comes from PR #6457
The text was updated successfully, but these errors were encountered: