[Feat][Checkbox][Switch]: CheckboxBase should support label, labelledby and describedby

[majornista]

Code of conduct

• [X] I agree to follow this project's code of conduct.

Impacted component(s)

Checkbox, CheckboxBase, Switch

Description of the requested feature

It should be possible to label a Checkbox, without a visible label, using label, labelledby and describedby, so that for example checkboxes in a Table used for row selection can be labeled using label="Select" and labelledby referencing the checkbox itself and IDREFs for the row header cells.

Mockups or screenshots

No response

Implementation notes or ideas

No response

[Westbrook]

Spectrum doesn't technically support this usage: https://spectrum.adobe.com/page/checkbox/, which is why we don't support it. It's an interesting feature, and one that will be discussed more broadly as part of https://github.com/Igalia/webengineshackfest/issues/10 which looks to be a great conversation, amongst a bevy of great work at that event.

[majornista]

Spectrum doesn't technically support this usage: https://spectrum.adobe.com/page/checkbox/, which is why we don't support it. It's an interesting feature, and one that will be discussed more broadly as part of Igalia/webengineshackfest#10 which looks to be a great conversation, amongst a bevy of great work at that event.

It looks like we should at least support label: https://spectrum.adobe.com/page/checkbox/#Table-of-options

[Westbrook]

We currently support label as HTML:

<sp-checkbox>${label}</sp-checkbox>

[majornista]

But, we need to be able to label a standalone checkbox, as in this example: https://spectrum.adobe.com/page/checkbox/#When-to-use-a-standalone-checkbox, in order to disambiguate between different instances of a standalone checkbox.

[Westbrook]

Interesting. I'd want to know more about that pattern, and the accessibility model for it, before committing to a specific set of work in this area.

[majornista]

It would be equivalent to <input type="checkbox" aria-label="Fill" checked /> or <input type="checkbox" aria-label="Border" checked />. If I were to use <sp-checkbox checked></sp-checkbox> for each of these checkboxes, there would be no way for someone using a screen reader to tell them apart.

Here's a possible workaround using a visually hidden span as a label:

<sp-checkbox checked>
  <span style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;">
    Fill
  </span>
</sp-checkbox>

[Westbrook]

Oh, I'm more wondering about the extended UI. I see this as label content, for the first two:

<sp-checkbox><sp-swatch></sp-swatch>Fill</sp-checkbox>

But the last is unclear:

<sp-checkbox>Background blue<sp-icon-chevron-down></sp-icon-chevron-down></sp-checkbox>

This delivers the UI, but what the accessibility tree meant to be for such a UI?

[majornista]

Oh, I'm more wondering about the extended UI. I see this as label content, for the first two:

<sp-checkbox><sp-swatch></sp-swatch>Fill</sp-checkbox>

But the last is unclear:

<sp-checkbox>Background blue<sp-icon-chevron-down></sp-icon-chevron-down></sp-checkbox>

This delivers the UI, but what the accessibility tree meant to be for such a UI?

I assume what you have as a "swatch" here is a popup button for an interactive color picker, in which case, we shouldn't be nesting interactive content within the label for a Checkbox. Which is why we need a way to label the Checkbox without a visible label for this use case.

We have ways to hide the label in the Slider control, and we can use label on Textfield to add an aria-label to the input.

[Rajdeepc]

Should wait for https://github.com/WICG/aom/blob/gh-pages/reference-target-explainer.md to land.