coreui / coreui-pro / 37981822576

96%

main: 94%

push

github

feat(RangeSlider): take a validation state and make the element a group (#1599)

The range slider takes a validationState option, or .is-invalid/.is-valid
on its element read once when it starts. The state shows on the element
and on every handle: the class colours the thumbs, and 'invalid' sets
aria-invalid and links the invalid feedback after the element, or the one
named in its data-coreui-invalid-feedback, on each handle. A given
'invalid' blocks the submit through the first handle, with the feedback
text as the browser's message, so the browser shows one message and moves
the focus to the start of the range. The user's move of a handle and a
native form reset drop the state before the change events, also when the
page rebuilds the slider in its own reset listener; a change from code
keeps it, and setConfig with only validationState does not build the
handles again.

A range never fails the browser's own validation, so the state comes from
the page; a validity the page sets on a handle shows once a validation
reports it. The handles are owned by the slider, so the form plugin leaves
their classes and ARIA to it.

The slider element gets role="group" and keeps its label, so a screen
reader announces the field when the focus enters it and then each handle
by its own name; a single handle takes the name of the field, also under a
role of the page. The description still moves onto the handles.

In a form with data-coreui-validate="valid", :user-valid no longer paints a
range thumb that carries .is-invalid, so the handles after the blocking
one stay red.

The JS bundlewatch ceilings go up for the measured growth against the base
with gzip -9: coreui.bundle.js +826 B, coreui.bundle.min.js +726 B,
coreui.esm.js +892 B, coreui.esm.min.js +722 B, coreui.js +882 B,
coreui.min.js +708 B. coreui.min.css grows by 12 B.

7698 of 8285 branches covered (92.91%)

Branch coverage included in aggregate %.

102 of 103 new or added lines in 1 file covered. (99.03%)

13257 of 13556 relevant lines covered (97.79%)

1626.81 hits per line