update toggle elements to spans rather than divs to ensure HTML validity

[jorycunningham]

Description

Changes instances in Toggle component where divs were nested in labels or spans to ensure valid HTML

How has this been tested?

• Built and reviewed rendered HTML
• Ran axe-core against demo permutations page
• Checked rendered HTML using the W3C Nu validator

Documentation changes

[Do the changes include any API documentation changes?]

• [ ] Yes, this change contains documentation changes.
• [X] No.

Related Links

See AWSUI-18915

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• [ X] Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• [ X] Changes do not include unsupported browser features, see CONTRIBUTING.md.
• [X ] Changes were manually tested for accessibility, see accessibility guidelines.

Security

• [ ] If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• [ ] Changes are covered with new/existing unit tests?
• [ ] Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov-commenter]

Codecov Report

Merging #109 (ce06c32) into main (65e3a6f) will not change coverage. The diff coverage is 100.00%.

:exclamation: Current head ce06c32 differs from pull request most recent head f4d28e0. Consider uploading reports for the commit f4d28e0 to get more accurate results

@@           Coverage Diff           @@
##             main     #109   +/-   ##
=======================================
  Coverage   92.49%   92.49%           
=======================================
  Files         539      539           
  Lines       15604    15604           
  Branches     4299     4299           
=======================================
  Hits        14433    14433           
  Misses       1089     1089           
  Partials       82       82           

Impacted Files	Coverage Δ
src/toggle/internal.tsx	100.00% <ø> (ø)
src/internal/components/abstract-switch/index.tsx	100.00% <100.00%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[jorycunningham]

@pan-kot I've added comments per your suggestion. In terms of automated testing, I think a dedicated HTML validator, run globally, would be more effective than AXE here. Might we consider adding something like HTML-Validate?

[pan-kot]

@pan-kot I've added comments per your suggestion. In terms of automated testing, I think a dedicated HTML validator, run globally, would be more effective than AXE here. Might we consider adding something like HTML-Validate?

Sure, that might be a nice follow-up exercise. I will discuss it with the team.

[YueyingLu]

Hi @jorycunningham the focus style is gone with the change. If you open the for example checkbox/focus-test page, click focus button then tab, the focus ring doesn't appear anymore. It is the same for Toggle and RadioGroup. https://github.com/cloudscape-design/components/blob/main/src/checkbox/styles.scss#L25

[jorycunningham]

@YueyingLu @avinashbot

I've updated this PR based on our conversations, specifically:

• Change css element selectors that rely on the HTML structure of AbstractSwitch to use spans, not divs
• Add a comment to the tsx file for AbstractSwitch
• Update the PR title to better reflect scope of this work