Can not scroll keyboard shorcut window with cursor

[RaitisSevelis]

Description

When opening keyboard shortcut window, it is not possible to navigate with the cursor to review all the keyboard shortcuts.

Step-by-step reproduction instructions

1. Go to Keyboard shortcuts window
2. Use Tab to and cursor to navigate
3. Observe the issue: no option to see all shortcuts

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.0
• Browser: Chrome 102.0.5005.61

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[franrosa]

I was able to reproduce that error.
102.0.5005.61 / WP 6.0 / Mac

Once open, tab only goes to the closing cross, and scrolling with keyboard does not work at all.

[skorasaurus]

does pressing the down arrow on the keyboard not scroll the content of the keyboard shortcuts for you?

[afercia]

Firefox makes any block-level element with appropriate CSS overflow property value keyboard focusable. Edge, Chrome and Safari don’t. With these browsers, there's no way to move focus to the scrollable div and use the arrow keys. The scrollable div doesn't contain any focusable element as well.

This different browser behavior isn't new. It works this way since ages. There are techniques to remediate. Ideally, they should be applied to all the scrollable divs. More info: https://www.tpgi.com/short-note-on-improving-usability-of-scrollable-regions/ (see also the comments on the post).

[skorasaurus]

Firefox makes any block-level element with appropriate CSS overflow property value keyboard focusable. Edge, Chrome and Safari don’t. With these browsers, there's no way to move focus to the scrollable div and use the arrow keys. The scrollable div doesn't contain any focusable element as well.

This different browser behavior isn't new. It works this way since ages. There are techniques to remediate. Ideally, they should be applied to all the scrollable divs. More info: https://www.tpgi.com/short-note-on-improving-usability-of-scrollable-regions/ (see also the comments on the post).

Thanks for the context @afercia ; I had only tested on firefox where the scrolling was enabled with down arrow and was unaware that this behavior varied across browsers; can confirm that, on chrome, that scrolling in the keyboard shortcut modal is not possible with the keyboard.

Although this is unique to some browsers, as @afercia mentioned, we can implement this to workaround it, possibly by altering the tabindex (there may be other solutions).

[alexstine]

This can be tested on gutenberg.run. Enter PR number: 41987.

Interested to hear feedback if this is working or not.

[alexstine]

I closed my PR and hopefully someone with vision can attempt a fix. It just does not seem feasible for me.

Thanks.

[tohmjudson]

Very new to Gutenberg but came here from the training docs which recommended looking at "Good first issues".

I think the trick here is to wrap the lower sections in a div with tabindex="0". This allows keyboard users to scroll the container. this pattern is similar to the wcag "widget" pattern or tab pattern. I would also recommend adding a focus outline here (outline in image is Narrator)

Tested on Edge and with Narrator in browser, as I have not pulled down the repo. Might if you all think this is worth a try.

[alexstine]

@tohmjudson The approach seems like it is at least worth a try. Let me know if I can be of any assistance.

It is worth mentioning that our E2E tests in Playwright now support testing in other browsers, I believe. Might be good to create some scroll tests to ensure this does not break in the future once we've got a working solution.

Thanks.

[tohmjudson]

@alexstine Great! I'll pick it up and see what I can do

[afercia]

Noting that in #45809 I'm proposing to improve the accessibility of the Scrollable component. That could be re-used for most of the instances where there's a need for scrollable elements.

[tohmjudson]

@afercia Great plan! #45809 is definitely the right approach. I think you are right that this bug might be best corrected using the updated Scrollable component.

[afercia]

Note that I'm working on a PR for #45809 that would solve this issue as well.

[skorasaurus]

@afercia thank you for all of your effort fixing this but
I'm still able to reproduce this on chrome ( 112.0.5615.165) in linux.