Fix/keyboard shortcut modal scrolling

[tohmjudson]

What?

Fixes #41500

Why?

Users are unable to scroll inside the keyboard shortcut modal

How?

Adds a container with tabindex to the modal content to allow focus on content div to allow scrolling.

Testing Instructions

1. Open keyboard shortcut modal
2. Press tab to highlight the "Close" Button
3. Press tab again to focus on the shortcut container
4. Use down and up arrow keys to scroll

Note: This may need an aria-label for the new region. It does not seem to be required to pass or function, but would be helpful to have a non-empty tab stop for screenreader users. I am unsure of how that would work with internationalization so I have not added it yet. This would be inserted at line 204 in packages/components/src/modal/index.tsx

References

https://www.tpgi.com/short-note-on-improving-usability-of-scrollable-regions/
https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable
https://accessibilityinsights.io/info-examples/web/scrollable-region-focusable/

Tested:
Safari: Version 16.0 (17614.1.25.9.10, 17614)
Firefox: Version 106.0.5
Chrome: Version 107.0.5304.110

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @tohmjudson! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[alexstine]

@tohmjudson Thanks for the PR! Could you please resolve the conflicts?

Thanks.

[alexstine]

@tohmjudson Some further thoughts. Please note, this is a fairly difficult issue to solve considering the accessibility issues involved. If you can't solve the A11Y part of this, I can try to help.

[alexstine]

Hmm, let's not modify the Modal component. The problem only exists in the keyboard shortcuts modal, these changes are not needed globally, right?

[alexstine]

This region is not going to work here I do not think.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role

Does not look like this would really be a valid approach. I wonder what would happen without the role here? Might be worth a try. If we introduce this ARIA here, we'll have to introduce it elsewhere. E.g. Using role="banner", role="main", role="contentinfo". Having one region like this in my opinion would be too confusing.