Accessible names through aria-labelledby in Shadow DOM doesn't work

[damyanpetev]

Description

See description in https://github.com/IgniteUI/igniteui-webcomponents/issues/430. We have a few components that assign aria-labelledby in Shadow DOM like:

<input
  ...
  aria-labelledby=${condition ? this.ariaLabelledby}

Unfortunately, this doesn't work as id refs won't work between light and shadow DOM.

Steps to reproduce

1. Create the following setup as an example:

<label id="check1">Label 1</label>
<igc-checkbox aria-labelledby="check1"></igc-checkbox>

<label id="check2">Label 2</label>
<input type="checkbox" aria-labelledby="check2" />

2. Start a screen reader
3. Focus the first checkbox
4. Focus the second checkbox

Result

Fist checkbox is announced similar to "Checkbox, not checked" (no label) while the second is read like "Label 2 checkbox, not checked"

Expected result

Having aria-labelledby explicitly exposed as public API and setting it the assumption is it'd work as expected. However, that's not possible currently.

We should probably deprecate the respective ariaLabelledby properties and drop their logic (since it doesn't work anyway). The affected components seem to be the Checkbox, Switch, Radio and those already have a built-in label and the scenario in this issue is a fallback alternative in case the default cannot be used for some reason. So I'm not sure an alternative like aria-label should be exposed additionally, since the built-in label can do the same job (perhaps being hidden via CSS if the use case calls for it?).

Attachments

Attach a sample if available, and screenshots, if applicable.