AdvancedTable Keyboard navigation doc update
#2698
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
andgen404
changed the title
Advanced Table Keyboard navigation doc update AdvancedTable Keyboard navigation doc update
andgen404
dismissed stale reviews from shleewhite and KristinLBradley
via
19a0952
There was a problem hiding this comment.
It looks like this one missed getting the extra white space added to the bottom.
There was a problem hiding this comment.
It looks like you may be using this image in two places. That might be okay if they both needed the extra white space, but I don't think the one directly above the "Row selection" section needs it because it's followed by a heading with extra white space built in.
| The Advanced Table supports two keyboard interaction modes: Navigation Mode and Action Mode. These modes allow users to move through table data and interact with elements using a keyboard. | ||
|
|
||
| ### Navigation Mode | ||
|
|
There was a problem hiding this comment.
[nit] There's an extra return in here
| When a user tabs into the Advanced Table, the first cell is focused. | ||
|
|
||
|  | ||
|
|
|
|
||
|  | ||
|
|
||
| <Doc::Badge @type="neutral">Fn</Doc::Badge><Doc::Badge @type="neutral"><Hds::Icon @name="arrow-left" @title="Left arrow" /></Doc::Badge> |
There was a problem hiding this comment.
I'll second this, it also might work to just create images of each of these steps (maybe with a little border or differentiation), but up to you.
| Arrow keys move focus to cells in the direction of the input. If the table extends beyond the screen, arrow keys allow movement to access hidden columns. | ||
|
|
||
|  | ||
|
|
| Move focus to the first cell in the row. | ||
|
|
||
|  | ||
|
|
|
|
||
| <Doc::Badge @type="neutral">Enter</Doc::Badge> | ||
|
|
||
| Press Enter in Navigation Mode to enable Action Mode and interact with elements inside a cell. Focus will move to the first actionable element. |
There was a problem hiding this comment.
You say "inside a cell", but action mode works in any table element (and you use an image of a header in the next example). Should this be more generic?
There was a problem hiding this comment.
I think Andrew is correct with the current wording - with the advanced table you cant focus anything inside a cell until you press enter. The Advanced Table is by default 1 tab stop (so users can skip past it if they want). When you press enter you focus the first interactive element inside the cell and your focus is trapped within that cell until you press escape.
I agree it would be more consistent to use an image of a header cell here to follow with the rest of the action mode images, but definitely not a blocker to me.
shleewhite
force-pushed
the
advanced-table-keyboard-navigation-documentation
branch
from
dc8e8df to
93ce7c8
Compare
📌 Summary
This PR will add more content to the accessibility tab, which includes a video demonstration and documentation.
👀 ----> https://hds-website-git-advanced-table-keyboard-naviga-1680ef-hashicorp.vercel.app/components/table/advanced-table?tab=accessibility
🛠️ Detailed description
This is a follow-up to the work on the Advanced Table documentation. The accessibility tab will include a video and some documentation, giving consumers an overview of keyboard navigation within the Advanced Table component.
🔗 External links
Jira ticket: HDS-4390