Switch is not correctly marked for screen reader

[Magsu]

Provide a general summary of the issue here

The switch element is not interpreted correctly by some screen readers. For example, NVDA does not even recognize the element’s existence: It can be focused, but NVDA does not give any output. This is because the aria roles and properties have been set to the wrong element.
Note: This does not appear a problem for VoiceOver (Mac, iOS) or TalkBack (Android) due to them interpreting some information differently than PC screen readers (e.g. NVDA).

🤔 Expected Behavior?

When using a screen reader (e.g. NVDA) the elements label, role and state are announced correctly.

😯 Current Behavior

Some screen readers cannot interpret the element at all. It can be still toggled, but the screen reader provides no output for the user.

💁 Possible Solution

The aria properties and role are set to the wrong element (sl-switch):

Due to the shadow root delegating focus, the actual user focus is in the div with tabindex=”0”.

If I set role=”genetic” to the sl-switch (this should be the role it has initially, for this I’ve set it visibly, so I can get rid of the properties and roles that are set programmatically using elementInternals) and give the proper properties to the actually focused div, the element’s role and state are announced correctly.
Note: As div-tag does not support “checked” property, the checked property must be given as aria-checked=”true/false”. This an be set either in HTML or by using elementInternals.
Note2: This also means required and disabled statuses must be indicated using aria-disabled="true" and aria-required="true"

This, however, leaves us with one more problem: The element’s label is not announced at all. This is because the text is not connected to the switch element in any way.
We cannot use a label-tag, because it does not support giving a label to a div. Unless we’re doing some changes to the structure (this would also require changing CSS), we have a few options.
One way to connect is giving an id to the slot and connecting it to the button with aria-labelledby:

Another way is to give the label using aria-label:

Moving the actual text inside the correct focused element works too, but this does break the current styling:

🖥️ Steps to Reproduce

1. Open a page with element (e.g. [Switch Basic](Open https://storybook.sanomalearning.design/?path=/story/form-switch--basic)
2. Start a screen reader (not VoiceOver/TalkBack)
3. Focus on the element and using the tab key

What browsers are you seeing the problem on? (only for bugs in code)

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 10

👤 Your name

Valtteri Järvinen

🧢 Your product/team

External

🎨 Your Theme(s)

Sanoma Learning

Tasks

Preview Give feedback

1. Test with NVDA and improve
2. Change documentation (if needed)

[anna-lach]

Probably adding input to the switch component with type='checkbox' and role='switch' could improve the a11y:
https://www.w3.org/WAI/ARIA/apg/patterns/switch/examples/switch-checkbox/