coreui / coreui-pro / 37239756253

96%

main: 94%

Build Type

push

github

Committed by web-flow

Commit Message

feat(Stepper): move focus to the new step when focus was inside (#1564)

* feat(Stepper): move focus to the new step instead of live panes

Every pane carried aria-live="polite", and VoiceOver in Safari and in
Chrome read nothing from it, neither after a Next button in the pane nor
after next() called from outside. The Next button sits in the pane that
the step change hides, so focus fell to the body and the user was not
told which step they were on.

The panes are no longer live regions. When showStep() (and with it
next(), prev() and the step buttons) or reset() runs while focus is
inside the stepper, focus moves to the button of the new step, so a
screen reader reads the step. A change made from outside the stepper
leaves focus where it is. The Stepper page and the a11y config say so.

* fix(Stepper): keep the panes live and refresh step states on reset

The panes stay aria-live="polite": VoiceOver in Safari and Chrome reads
a validation message that appears in the open step from that region,
and nothing else does yet. The focus move to the new step stays.

reset() now rewrites aria-selected, aria-expanded and tabindex of the
step buttons, so the button it focuses no longer reads as unselected
while the old step keeps the only tab stop. The focus check reads the
active element of the stepper's own root, so a vertical stepper inside
a shadow root moves focus too.

* chore: raise the bundlewatch ceilings for coreui.bundle.js and coreui.esm.js

Moving focus to the new step adds 63 B to coreui.bundle.js and 57 B to
coreui.esm.js (gzip -9 against v6-dev at d1cdb945), which takes both
10 B over their ceilings, so both go up by 0.25 kB.

Coverage Stats

6937 of 7492 branches covered (92.59%)

Branch coverage included in aggregate %.

8 of 8 new or added lines in 1 file covered. (100.0%)

2 existing lines in 1 file now uncovered.

12095 of 12390 relevant lines covered (97.62%)

1483.86 hits per line