Incomplete useGridList WAI/ARIA pattern? #4371
-
|
Im trying to use the useGridList hook to standardize search results across my app. These items have titles, descriptions, some with data-lists and actions, etc. Accoding to WAI/ARIA, specifically Example 3: Scrollable Search Results on that page, shows this pattern should be able to accommodate multiple focusable grid cells within a grid row. I think this is the closest hook react-aria provides that would provide accessibility for what is essentially arbitrarily detailed product-card search results, however from what i can see the docs don't show how to use multiple focusable grid cells within a grid row. Is this possible? Cheers folks. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 6 replies
-
|
useGridList is basically a way to have a list with interactive children (so an alternative to list box, which doesn't allow interactive children). It uses the grid pattern to achieve this, where each row has one grid cell with all it's contents inside. Interactive children within the row can be navigated with left/right arrow keys. It sounds like that's exactly what you need. Each interactive child doesn't necessarily need it's own grid cell to achieve what you're describing. |
Beta Was this translation helpful? Give feedback.
-
|
yeah it would appear that can be the case. i went down a hectic rabbit hole with the DOM structure of the examples given in the link above and specifically Example 3. if you notice the example search list, each search row is made up of 3 grid cells, 2 of which are just 'span' tags but are still focusable within the row in isolation. The header tag that also doubles as an 'a' tag doesn't intrinsically detect being pressed either with react aria, so navigation needs to be programmatic based on the key derived from the onAction callback, so would i still keep the header wrapped in an a-tag? does a screen reader know to call it as an a tag still? |
Beta Was this translation helpful? Give feedback.
-
|
You could achieve that if you wanted using the grid hooks themselves, although we don't have docs for them. You can see this basically being done in the table hooks, if you have a cell with just a link inside, the link will be focused instead of the cell. That might be a solution, or you could just have your gridlist row action trigger the link. |
Beta Was this translation helpful? Give feedback.
-
|
ahh yep ill have a squizz at the table implementation and see how it does it, so your suggesting it wouldn't be unachievable to translate that across to a mutli cell grid list row? also with the "link inside a cell", what ive found is even after focusing a link, keyboard interaction doesn't activate the link at all. id still have to be careful about the key i use for the cell and use that in some custom onAction callback on the grid list myself |
Beta Was this translation helpful? Give feedback.
-
|
Grid list only has one grid cell within a row, so that won't be achievable. I'm not sure why the link wouldn't work within a cell, I haven't seen that. We pretty commonly have links inside table cells in Spectrum. Feel free to post a sandbox if it is easy to recreate. |
Beta Was this translation helpful? Give feedback.
-
|
yeah for sure ill add it here in a bit. but yeah i can 100% confirm hitting enter or space on a selected grid list item will fire an onAction, but won't trigger the link itself. mouse clicking does though. If you don't mind id also like to include an issue where the modal doesn't actually trap focus if theres only 1 focusable element within it. case in point, i have a menu button that triggers a modal with a useSearchField inside it that auto focuses. when you start typing a grid list is dynamically populated beneath it and away you go. however, if you get trigger happy on the tabs when your auto focused into the modal, you'll go right on out and start focusing elements outside of the modal, ive been forced to wrap the modal in a FocusScope but i thought that was already done internally? anyway, ill get a codesandbox up and running and we'll go from there |
Beta Was this translation helpful? Give feedback.
-
|
im a moron. it helps when you focus into the grid row to a link when you use the keyboard. tip for young players. |
Beta Was this translation helpful? Give feedback.
You could achieve that if you wanted using the grid hooks themselves, although we don't have docs for them. You can see this basically being done in the table hooks, if you have a cell with just a link inside, the link will be focused instead of the cell. That might be a solution, or you could just have your gridlist row action trigger the link.