coreui / coreui-pro / 37645673948

96%

main: 94%

push

github

feat(forms): move focus to the field when its label is clicked (#1587)

Clicking the label of an input focuses the input, but the date, time and
code fields are groups, so a click on their label did nothing in any of
them, whether a <label for> pointed at the element or aria-labelledby named
the label.

A new field-label util, exported as @coreui/coreui-pro/utils/field-label
for the React and Vue editions, keeps a registry of such fields and one
click listener on their document. A click on a <label> or .form-label is
resolved when it happens: the element its `for` points at, otherwise the
first element whose aria-labelledby lists it, then that element when it is
registered or the first registered field inside it. So a label added after
the field works, a label shared by two fields focuses the first, and the
pickers and the date range input need no wiring of their own: their first
field takes the click. The click is left alone when the page prevented it,
when the browser already activates a control of the label, on a double or
triple click, while the label text is selected, and on a link or control
inside the label.

The section inputs (date, time and date-time) register themselves and move
focus to the first empty section, which also serves the start date of a
range and the field of a picker; the code input moves focus to the first
empty slot, through a method its value field now shares. A disabled field,
also one in a disabled fieldset, leaves the focus where it is. The
accessibility sections of the seven pages say so.

The JS budgets go up because the change measured +1020 B gzip on
coreui.bundle.js (+402 B on coreui.bundle.min.js, +1025 B on coreui.esm.js,
+424 B on coreui.esm.min.js, +1015 B on coreui.js, +397 B on coreui.min.js,
gzip -9 against v6-dev), and the bundles had 0.19 kB left. Each ceiling
moves to the next quarter kB that leaves at least 0.25 kB.

7312 of 7883 branches covered (92.76%)

Branch coverage included in aggregate %.

50 of 50 new or added lines in 3 files covered. (100.0%)

12656 of 12951 relevant lines covered (97.72%)

1588.18 hits per line