demo · v132
Tab into and out of every scroller
Three scrollers, in three configurations — with focusable children, without, and explicitly opt-out via tabindex="-1". Tab through the page and watch the focus log. v132 makes Tab land on scrollers that lack focusable children, so Page Down works.
1. scroller with focusable child
tab order: passes through unchanged — focus lands on the button
Lorem ipsum dolor sit amet, lorem ipsum a much longer piece of text that overflows just enough to require scrolling, especially when laid out at this width and with the editorial font choices.
2. scroller without focusable children (v132 change)
tab order: pre-v132 skipped; v132+ lands here so user can Page Down
Lorem ipsum dolor sit amet, lorem ipsum a much longer piece of text that overflows just enough to require scrolling, especially when laid out at this width and with the editorial font choices. Continued: more text, more text, more text, more text, more text, more text.
3. scroller with tabindex="-1" (opt-out)
tab order: explicitly skipped — tabindex="-1" overrides the v132 default
Lorem ipsum dolor sit amet, lorem ipsum a much longer piece of text that overflows just enough to require scrolling. This one has been explicitly removed from the tab order.
4. scroller with explicit tabindex="0" (always-on)
tab order: always — pre-v132 and v132 both
Lorem ipsum dolor sit amet, lorem ipsum a much longer piece of text that overflows just enough to require scrolling. This one is explicitly in the tab order at all times.