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