Carbon: Unable to navigate to secondary button using arrow keys (JAWS)

[BryChisholm]

Env

Windows 10
Google Chrome
JAWS

Detailed description

https://codepen.io/team/carbon/full/MRyeVV/ https://www.carbondesignsystem.com/components/modal/code
I'm unable to navigate this modal with JAWS using arrow keys. The focus is skipping right past the secondary button to the primary one. Should be going to the secondary button before the primary button. We have many carbon component modals with inputs facing this issue.

[asudoh]

Hi 👋 thank you for reporting - I don't have JAWS, but for regular tab-based navigation the tab and back-tab does not skip the secondary button. That said, is this issue specific to JAWS?

[BryChisholm]

Hey I just checked with NVDA and upon the modal opening, the focus is stuck within the text input when trying to navigate with the arrow keys. Once having tabbed to another element, the arrow keys work for navigation and let the user get to the secondary button. So the behaviour of not being able to use the arrow keys to navigate down to the secondary button is specific to JAWS. And this new issue of focus being stuck in the input field is specific to NVDA.

[asudoh]

@dakahn Do you have an environment where you can try JAWS and/or NVDA on this issue...? Thanks!

[snidersd]

@dakahn and @asudoh Tested codepen example (https://codepen.io/team/carbon/full/MRyeVV/) and it fails with Chrome 77.0.3865.75 on Windows 10 & JAWS 18.

1. Press "Enter" to open the modal. Focus is on the text input field.
2. Press "Tab" moves focus to Secondary button
3. Press "Tab" moves focus to Primary button
4. Press "Tab" moves focus out of Modal.
5. Continue to press "Tab" and eventually the focus moves back into the Modal and focus to the "X" close button.
   Also tested the code example with a text input at this link (https://www.carbondesignsystem.com/components/modal/code) and it works as expected.
6. Press "Enter" to open the modal. Focus is on the text input field.
7. Press "Tab" moves focus to Secondary button
8. Press "Tab" moves focus to Primary button
9. Press "Tab" moves focus to the Close button.
10. Press "Tab" moves focus back to the Text input field.

[asudoh]

Thanks @snidersd for testing! @dakahn Sounds that it's working as expected (with a potential enhancement request). Does this make sense...?

[dakahn]

@asudoh JAWS is a requirement for us so this will need to be added to the a11y backlog

[asudoh]

@dakahn You are right JAWS is a requirement. OTOH seems that tab-based navigation in modal is working correctly with JAWS. So I think it's a misunderstanding of the issue author wrt how the keyboard nav in modal should work?

[dakahn]

Okay cool -- i added the enhancement tag and set priority 👍

[emyarod]

is there an established guideline to reference on expected keyboard navigation behavior in modals?

[dakahn]

@emyarod https://w3c.github.io/aria-practices/examples/dialog-modal/dialog.html

Can dig up a few more references if you need some deeper interaction descriptions lemmeknow

[emyarod]

@dakahn this does not seem to contain anything regarding arrow key navigation, and given that tab based navigation is already possible with our component do we still want this as an enhancement? otherwise I believe we can close this issue