[css-forms-1] Checkbox and radio sizing should meet WCAG minimum sizing

[lukewarlow]

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

[nt1m]

I don't think we should force a min size because it's a pain to override.

I'd much rather use a width/height here (which can involve the 24px minimum) given it's the more straightforward one to override.

I generally only want to reserve min sizes when strictly necessary, and checkboxes/radios seem like cases where it's not strictly necessary.

[lukewarlow]

So instead it'd be the below?

input:is([type=checkbox]:not([switch]), [type=radio]) {
    /* These size rules ensure accessibility by following WCAG rules:
    * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html */
    block-size: max(1em, 24px);
    inline-size: max(1em, 24px);

    /* This font-size rule ensures the checkmark fills the containing box. */
    font-size: max(1em, 24px);
    ...
}