Problem
Safari requires tabindex="0" for keyboard access to scrollable containers. Chrome (v130+) and Firefox (v4+) handle this automatically.
Current Behavior
Chrome/Firefox: Scrollable div with overflow: auto → automatically keyboard-accessible (Tab to focus, Arrow keys to scroll)
Safari: Same element → NOT keyboard-accessible unless:
Add tabindex="0", OR
Container has focusable children
Workaround
<div style="overflow-y: auto; height: 300px;" tabindex="0">
<!-- content -->
</div>
Issue: Adds unnecessary tab stops on Chrome/Firefox where not needed.
Request
Will Safari support auto-focus for scrollable containers? (matching Chrome/Firefox)
If not planned: Any official Apple guide for cross-browser scrollable accessibility?
Timeline? If on roadmap, estimated Safari version? Can I subscribe for updates?
Use Cases
Dropdown menus
Modal dialogs
Tab panels
Data tables
Chat interfaces
Reference:
WCAG 2.1 Keyboard Accessible: https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html
Example component: https://www.radix-ui.com/themes/docs/components/scroll-area
Selecting any option will automatically load the page