fix(a11y): Increase Windows / Firefox HCM support

[tw15egan]

Closes #6859 [Slider]
Closes #6767 [Pagination]
Closes #6471 [Checkbox]
Closes #6862 [Modal]
Closes #6748 [Radio Button]
Closes #6755 [Select]

Adds in Windows and Firefox HCM support. This PR focuses on ensuring all elements are visible, especially icons. Focus issues will be addressed in a separate PR (mainly for the Firefox HCM support, Edge is pretty good).

Changelog

New

HCM changes to the following components

• Accordion
• Button
• Checkbox
• Data Table
• Dropdown
• List Box
• Modal
• Overflow Menu
• Pagination
• Radio Button
• Search
• Select
• Slider
• Tooltip

Changed

• Modified the stylelint package to not throw an error with the unreleased prefers-contrast flag

Testing / Reviewing

On a Windows 10 machine, go to settings --> ease of access --> high contrast and flick the switch. Compare the storybook in Edge (Should be in High Contrast) to Chrome (Should look normal).
For Firefox, you'll need to open it up and type about:config into the address bar. Then, search for layout.css.prefers-contrast and set it to true.

Ensure there are no missing UI elements for the following components:

• Accordion
• Button
• Checkbox
• Data Table
• Dropdown
• List Box
• Modal
• Overflow Menu
• Pagination
• Radio Button
• Search
• Select
• Slider
• Tooltip

[netlify]

Deploy preview for carbon-elements ready!

Built with commit e876c58

https://deploy-preview-6892--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit e876c58

https://deploy-preview-6892--carbon-components-react.netlify.app

[joshblack]

@tw15egan would this help out at all as a top-level reset? https://github.com/carbon-design-system/carbon/blob/master/packages/icons/scss/mixins.scss

Not sure if it overlaps or not, just saw that this involved icons and remember that we used that for HCM at some point 🤔 Maybe if we update it to include the prefers-contrast query?

[joshblack]

bump @dakahn when you have a sec to review 👀

[tw15egan]

@joshblack I noticed that, and it looks like we already pull it in via our reset:

carbon/packages/components/src/globals/scss/_css--reset.scss

Line 198 in 5408d0b

@include carbon--icons;

Problem is, anywhere we define a fill (that is not currentColor), it takes precedence over this selector. We could slap an !important on there and call it a day though 🤔

[dakahn]

Awesome freakin job! 💪

[joshblack]

@tw15egan ah that makes a ton of sense, thanks for explaining.

[tw15egan]

@joshblack @dakahn do we want to go forward as-is? Or do we want to change it so that mixin takes precedence in HCM with an important!?

[joshblack]

@tw15egan I think going forward as-is works out, maybe we could add a lint rule to stylelint to warn us about this in the future?