Overlay with long content does not accept keyboard navigation by default

[luptonn]

Latest version

• [X] I have tested the latest version

Description

When showing long content Overlay does not allow user to TAB into the scrollable content to scroll with the keyboard. This can be rectified by setting a tabIndex on OverlayPanelContent.

Steps to reproduce

https://salt-template-yxnzmn.stackblitz.io

Expected behavior

Automatically enable tab into content when content becomes scrollable

Package name(s)

Core (@salt-ds/core)

Package version(s)

1.37.0

Browser

• [X] Chrome
• [ ] Safari
• [x] Firefox
• [ ] Microsoft Edge

Operating system

• [ ] macOS
• [X] Windows
• [ ] Linux
• [ ] iOS
• [ ] Android

Are you a JPMorgan Chase & Co. employee?

• [X] I am an employee of JPMorgan Chase & Co.

[joshwooding]

This will be fixed in newer browsers as this is being added there:

https://developer.chrome.com/blog/keyboard-focusable-scrollers

@jake-costa we should decide if we provide an automatic fix or add guidance.

[jake-costa]

@joshwooding I believe we should address this. (e.g. tabindex="0", role="region" and ensure it has a accessible name via either aria-label or aria-labelledby targeting the ID of the visible heading) Though the naming might be more appropriate as pattern guidance. Let me know if you want to discuss.