coreui / coreui-pro / 37243962639

96%

main: 94%

push

github

feat(LoadingButton): keep focus while loading and announce the change (#1565)

* feat(LoadingButton): keep focus while loading and announce the change

With disabledOnLoading the button set the disabled attribute on itself,
so focus fell to the body the moment it was pressed, and the spinner's
role="status" was hidden with aria-hidden, so nothing was announced.

While loading, disabledOnLoading now sets aria-disabled="true" and
.disabled instead: the button keeps focus, and a capture listener on it
cancels clicks and form submission until it stops. When the button has
focus, announce() reads its name followed by the new ariaLoadingLabel
option ("Save, Loading") at the start and its name again at the end.
The spinner is aria-hidden without a role. The page and the migration
guide describe both.

* chore: raise the six JavaScript bundlewatch ceilings for the loading button

Announcing the loading state and blocking clicks in script brings
announce() into LoadingButton: +229 B on coreui.js, +198 B on
coreui.min.js, +239 B on coreui.esm.js, +187 B on coreui.esm.min.js,
+229 B on coreui.bundle.js and +204 B on coreui.bundle.min.js (gzip -9
against v6-dev at 1c10094c). Four files go over their ceilings and two
are left with 0 and 20 B, so all six go up by 0.25 kB.

* fix(LoadingButton): name the busy state and keep the page's own state

While loading, the spinner is a role="img" named by ariaLoadingLabel,
so the button's own name says it is busy to anyone who reaches it. The
start is announced before the start event and the end before the stop
event, so a listener that stops or disposes the button no longer
reverses the messages or throws; the end message is polite and comes
only after a start message, which it cancels if it was not read yet.
The announced name follows aria-labelledby, aria-label, the text without
hidden parts, then title.

The click guard starts when aria-disabled is set, so the click that
started loading goes through, a disabled state the... (continued)

6961 of 7518 branches covered (92.59%)

Branch coverage included in aggregate %.

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

12140 of 12435 relevant lines covered (97.63%)

1478.97 hits per line