demo · v132

Carousel pages: only the visible slide is in the tab order

The motivating use case for interactivity: inert. Step through a three-slide carousel, then press “collect tab order” — only the controls on the active slide should appear. Swap between cascade-driven CSS and the legacy HTML inert attribute to compare.

checking support…
slide 1 of 3
press “collect tab order” to walk the focusable controls in order
.carousel .slide:not([data-active]) {
  interactivity: inert;  /* cascade-driven; no JS to manage tabindex */
  opacity: 0.32;
}

see also