Add WAI-ARIA Roles, States, and Properties to ToggleSwitch

[rak-phillip]

Summary

This adds additional WAI-ARIA Roles, States, and Properties to ToggleSwitch. Noted missing properties and keyboard interactions:

• role
• aria-label
• @keydown.enter - defined as optional, but I opted to include it here

Fixes #12817

Technical notes summary

aria-label is set to onLabel because this should be the primary when working with the switch.

The following patterns specified for the switch pattern in the APG¹ have been implemented. Patterns not implemented are not relevant to this PR.

Keyboard Interaction

• ✅ Space: When focus is on the switch, changes the state of the switch.
• ✅ Enter (Optional): When focus is on the switch, changes the state of the switch.

WAI-ARIA Roles, States, and Properties

• ✅ The switch has role switch.
• ✅ The switch has an accessible label provided by one of the following:
  • ◻️ Visible text content contained within the element with role switch.
  • ◻️ A visible label referenced by the value of aria-labelledby set on the element with role switch.
  • ✅ aria-label set on the element with role switch.
• ◻️ When on, the switch element has state aria-checked set to true.
• ◻️ When off, the switch element has state aria-checked set to false.
• ✅ If the switch element is an HTML input[type="checkbox"], it uses the HTML checked attribute instead of the aria-checked property.
• ◻️ If a set of switches is presented as a logical group with a visible label, either:
  • ◻️ The switches are included in an element with role group that has the property aria-labelledby set to the ID of the element containing the group label.
  • ◻️ The set is contained in an HTML fieldset and the label for the set is contained in an HTML legend element.
• ◻️ If the presentation includes additional descriptive static text relevant to a switch or switch group, the switch or switch group has the property aria-describedby set to the ID of the element containing the description.

Areas or cases that should be tested

ToggleSwitch is used in the following components:

• shell/components/form/Labels.vue
• shell/edit/provisioning.cattle.io.cluster/index.vue
• shell/pages/c/_cluster/auth/user.retention/index.vue

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes

Footnotes

1. https://www.w3.org/WAI/ARIA/apg/patterns/switch/ ↩

[aalves08]

I've taken it for a spin and I checked the presence of the missing elements. Can we fix the focus state for it while we are at it? we don't know if we are focused on the right element or not...

If we can do that on this PR it's one less UI element for us to worry about in the future. The rest LGTM 🙏

Screen.Recording.2025-02-05.at.18.04.37.mov

[rak-phillip]

Can we fix the focus state for it while we are at it? we don't know if we are focused on the right element or not...

@aalves08 good point - I added the focus ring to the element. I originally considered it to be out of scope wrt the issue, but it's not too big of an ask to get this in.

[aalves08]

LGTM mate! 💪

FYI @IsaSih , fixes #13296