momentum-design / momentum-ui

Momentum UI is a collection of UI libraries for implementing Momentum Design into web applications and websites.
https://momentum.design
MIT License
199 stars 204 forks source link

fix: add property to toggle switch for accessible desciption #1641

Closed evaoconn closed 4 months ago

evaoconn commented 4 months ago

Description

Added a new property, description to the <md-toggle-switch /> web-component to enable it to accept an accessible description.

Related Issue

https://jira-eng-sjc12.cisco.com/jira/browse/CX-10250

Motivation and Context

Without this change, the <md-toggle-switch /> component could not provide an accessible description because the aria-describedby property takes the ID of another element to point to. In some cases the description label will be outside the components' shadow DOM, in which case there was no suitable mechanism for providing an accessible description. To circumvent this issue, this PR adds an invisible description label inside the shadow DOM of the component, and if the description property is set, then the underlying <input /> within the component will point to this invisible description label.

How Has This Been Tested?

Screenshots:

There are no visual changes to the component with this change. Screenshots show changes in what is read out by Mac VoiceOver when component is focused.

Before (If applicable):

Screenshot 2024-06-04 at 11 45 43

After:

Screenshot 2024-05-29 at 16 30 47

Types of changes

Checklist:

codecov[bot] commented 4 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 94.28%. Comparing base (22debd5) to head (b50cd0f).

Additional details and impacted files ```diff @@ Coverage Diff @@ ## master #1641 +/- ## ========================================== + Coverage 94.20% 94.28% +0.07% ========================================== Files 134 134 Lines 19308 19317 +9 Branches 2993 2995 +2 ========================================== + Hits 18190 18213 +23 + Misses 1118 1104 -14 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.