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

Improve keyboard actions in Datagrid toolbar #3241

Closed
2 of 4 tasks
Tracked by #3117
elycheea opened this issue Jul 18, 2023 · 0 comments
Closed
2 of 4 tasks
Tracked by #3117

Improve keyboard actions in Datagrid toolbar #3241

elycheea opened this issue Jul 18, 2023 · 0 comments
Assignees
Labels
component: Datagrid Sev 3 Visible or noticeable to users but does not impede functionality. Has a workaround. type: a11y ♿ Issues not following accessibility standards UX: issue Any type of experience feedback that once addressed improves or enhances the experience version: 1 Carbon 10 / v1 version: 2 Carbon 11 / v2

Comments

@elycheea
Copy link
Contributor

elycheea commented Jul 18, 2023

Priority fixes

  • Tabbing to previous or next item from settings popover should most likely close popover in toolbar
  • Popover should close on Escape
    • Carbon uses onKeyDown in Popover Storybook example

Enhancements

These are good to fix if simple, but are lower priority given that they most likely have a workaround and can be addressed after initial release so that we can prioritize bigger fixes.

  • When opening the popover with enter/space, focus should go to the first item in the popover list (radio)
    • Note: There is a workaround — users have an extra tab / up/down to navigate into the popover options
  • Using arrow keys to navigate radio items should not scroll the full table

--

  1. When you are able to correctly open the dropdown, you must press tab again - and the faint 1px blue focus state appears around settings, - then press tab a second time to enter the list before you are able to press up/down/L/R to navigate the list. Focus should be present in the first list item after pressing space/enter to activate the popover. Also as you press up/down arrows to cycle through the radio button options, the table itself moves up and down behind it.

  2. When popover is open and you tab to settings, it closes. However, if popover is open and you shift+tab to Download before interacting with the popover content, the popover remains open and overlaps with the Download tooltip. I’m thinking it should close so that what happens with shift+tab is consistent with what happens with tab.
    Screenshot 2023-07-03 at 8 16 05 AM

  3. When open, the popover should dismiss when Esc is pressed

Originally posted by @kristastarr in #3117 (comment)

@elycheea elycheea added component: Datagrid version: 2 Carbon 11 / v2 type: a11y ♿ Issues not following accessibility standards Sev 3 Visible or noticeable to users but does not impede functionality. Has a workaround. version: 1 Carbon 10 / v1 labels Jul 18, 2023
@elycheea elycheea added the UX: issue Any type of experience feedback that once addressed improves or enhances the experience label Jul 18, 2023
@elycheea elycheea moved this to Todo 📨 in Carbon for IBM Products Jul 20, 2023
@elycheea elycheea moved this from Todo 📨 to In progress in Carbon for IBM Products Aug 3, 2023
@elycheea elycheea changed the title Improve accessibility in Datagrid toolbar Improve keyboard actions in Datagrid toolbar Sep 14, 2023
@github-project-automation github-project-automation bot moved this from In progress to Done 🚀 in Carbon for IBM Products Sep 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: Datagrid Sev 3 Visible or noticeable to users but does not impede functionality. Has a workaround. type: a11y ♿ Issues not following accessibility standards UX: issue Any type of experience feedback that once addressed improves or enhances the experience version: 1 Carbon 10 / v1 version: 2 Carbon 11 / v2
Projects
Archived in project
Development

No branches or pull requests

3 participants