refactor(toggle): make toggle labels accessible

[emyarod]

Closes #2809

This PR refactors the toggle and small toggle components to have accessible labels.

question for reviewers: Do we want to wrap the component in a div.toggle? Do we also want to support an inline toggle?

Changelog

New

• class names for accessible toggle version (old classes and markup will be deprecated)

Changed

• markup structure of toggle label and switch

Removed

• deprecated check mark in small toggle (not found in v10 spec according to images in feat(toggle): add experimental toggle #1267)
• redundant style rules

Testing / Reviewing

Ensure the toggle and small toggle function and appear correctly

[netlify]

Deploy preview for the-carbon-components ready!

Built with commit 62654dc

https://deploy-preview-2885--the-carbon-components.netlify.com

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 62654dc

https://deploy-preview-2885--carbon-components-react.netlify.com

[asudoh]

Great that you started this effort @emyarod! Any explanation on why you chose to rip/replace the markup/style?

[emyarod]

@asudoh primarily to use proper markup for labeled toggles without breaking how the component appears. The current fieldset and legend structure is not proper usage of those elements

[carmacleod]

@emyarod Nice! I tested Vanilla (https://deploy-preview-2885--the-carbon-components.netlify.com/?nav=toggle) with JAWS & NVDA in Chrome & FF, and things sound good.

I only noticed 1 problem: for the "Toggle with visible label", please delete the aria-label completely, because:

1. It is unnecessary, because the <label> has already been properly connected to the <input> using the for attribute in the markup.
2. It is harder to maintain 2 strings - they can easily diverge because one of them is invisible.
   (even in the example, aria-label="example toggle with visible label" differs from "Toggle with visible label").

• Differing strings is a problem because they can be misleading to screen reader users, and also because users of speech control systems like Dragon need to be able to say "Click Toggle with visible label", and since the aria-label overrides the visible label, the toggle's name is actually "example toggle with visible label" which is not the same, so the voice command may not work.

[snidersd]

@emyarod I have tested it on macOS & VO with the same results as @carmacleod and I agree with her comments.

[emyarod]

got it @carmacleod @snidersd! I've made those adjustments

vanilla toggle and small toggle should be ready for code and visual review (and need design feedback on the visual changes and possible inline variant before continuing with the React version)

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 62654dc

https://deploy-preview-2885--carbon-elements.netlify.com

[laurenmrice]

We still need the checkmark in the small toggle, it should not be deprecated. The spec in the issue that is referenced was from Oct and is out of date. Please reference most up to date specs: https://ibm.ent.box.com/file/334120810490

Verified by Anna