Open
Description
Per guideline 3 in https://drafts.csswg.org/css-forms-1/#basic-appearance-principles "The controls pass 100% of WCAG 2.2 AA standards."
We should ensure controls meet https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
For checkbox, and radio inputs we currently have:
input:is([type=checkbox]:not([switch]), [type=radio]) {
width: 1em;
height: 1em;
...
}I propose we change this to:
input:is([type=checkbox]:not([switch]), [type=radio]) {
/* These min-size rules ensure accessibility by following WCAG rules:
* https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
min-block-size: max(1em, 24px);
min-inline-size: max(1em, 24px);
aspect-ratio: 1/1;
/* This font-size rule ensures the checkmark fills the containing box. */
font-size: max(1em, 24px);
...
}cc @nt1m