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]: Modal: A keyboard user cannot activate the scrollbars on a dialog #13711

Closed
Tracked by #12727
tay1orjones opened this issue May 2, 2023 · 1 comment · Fixed by #15515
Closed
Tracked by #12727

[a11y]: Modal: A keyboard user cannot activate the scrollbars on a dialog #13711

tay1orjones opened this issue May 2, 2023 · 1 comment · Fixed by #15515

Comments

@tay1orjones
Copy link
Member

tay1orjones commented May 2, 2023

Originally outlined in #12727:

On the Full Width composed modal, the dialog's body contains a large text-only table. Scrollbars appear to let this table be viewed; however, while a mouse user can easily click on the scrollbars, they cannot be activated by a keyboard user. In order to allow scrolling, the body of the dialog needs to be given a tabindex (tabindex="-1" is probably adequate) and have the initial focus set to it. This is also a problem where there are form inputs. The body gets the focus in this situation, but since the keyboard user is inside a form input, the up/down and space keys are eaten by the input; if users have dedicated pg up/down keys, they have a work around sev 2

One way to address this is to put a tabindex on the dialog body. Ideally this would only occur where scrollbars are detected (so as not to put another tabstop in all dialogs, and so as not to disrupt the usual item taking focus). There is a hasScrollingContent boolean in Carbon, that if set to true resolves this, but it must be set by the developer. If developers were dilligent in its use, this would solve a lot of use cases; however, where a user zooms up there content or increases their text spacing, they may have scrollbars even though a dialog did not contain them with default text size. So it would be ideal if the presence of scrollbars could be detected automatically and the tabindex only set then.
Finally, ideally this would not take focus on modal load, but leave the default item with focus (as described in the accessibilty's keyboard section); the body would be in the tab order, so could be tabbed to.

Steps to reproduce

  1. Open the full screen version of the State manager https://react.carbondesignsystem.com/iframe.html?args=&id=components-modal--with-state-manager&viewMode=story
  2. Increase browser zoom to 400%
  3. Launch modal
  4. Attempt to navigate by Tab around input
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
3 participants