fix(utilities): broaden HCM mixin to include macos query#10935
Conversation
|
✅ Deploy Preview for carbon-react-next ready! 🔨 Explore the source changes: 089b6e1 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/6234cfa29d12570008c6920c 😎 Browse the preview: https://deploy-preview-10935--carbon-react-next.netlify.app |
|
✅ Deploy Preview for carbon-elements ready! 🔨 Explore the source changes: 089b6e1 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/6234cfa2b2b1ab00080973c0 😎 Browse the preview: https://deploy-preview-10935--carbon-elements.netlify.app |
|
✅ Deploy Preview for carbon-components-react ready! 🔨 Explore the source changes: 089b6e1 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/6234cfa23240fd0008361665 😎 Browse the preview: https://deploy-preview-10935--carbon-components-react.netlify.app |
tay1orjones
left a comment
There was a problem hiding this comment.
@dakahn should this be mirrored over into v10 packages/components?
|
@dakahn I'm not seeing much (any?) difference. Let me know if there's a different setting I should be testing maybe? I just followed the stuff from the original issue. hcm-test.mov |
|
I'm also not seeing anything... Seems like it is currently only supported in Safari, but even there it seems like the |
|
Yep! Botched it lol. Good news is it's hitting the query -- bad news is it looks like our HCM styling is the problem. Since macOS HCM is just a css filter applied top the whole page (rather than a more holistic style sheet rewrite like in Windows) i'm going to see how it works to just exclude a truthy |
|
Looks like we can remove So it's been a few years since we looked at Firefox in Windows HCM and I thought there was a chance we didn't need that flag anymore. It seems like that might be the case 🎉 I'll give this a more thorough once over in the morning, but anyone else that wants to also take a look on a Windows machine it'd be a big help |
|
@dakahn I just tested in Windows, and don't see any regressions by changing the selector. I also verified that the changes work with Safari and increased contrast enabled. Nice work 🎉 Should we backport this to v10 as well? |
|
@tw15egan Radio button was the only one i found, but i updated the component to use the HCM mixin 👍🏾 |
| // Utilize a system color variable to accommodate any user HCM theme | ||
| border: 2px solid WindowText; | ||
| } | ||
| @include high-contrast-mode('icon-fill'); |
There was a problem hiding this comment.
Can we add this and the mixin updates to the V10 package as well?
There was a problem hiding this comment.
@tw15egan should i do this in the new fangled v10 branch instead now that @tay1orjones has made that?
There was a problem hiding this comment.
@dakahn Yeah good call, I vote for opening that in a separate PR into the v10 branch
There was a problem hiding this comment.
@dakahn @tay1orjones @tw15egan has this been delivered to the v10 branch? If so, can you include a link to that PR?
We're failing a particular WCAG guideline wrt Text Contrast as a result of this issue and our team does not plan to upgrade to v11 in the near term so having this fix in v10 would go a long way. Thanks.
There was a problem hiding this comment.
@fbarroso24 It has not. Thanks for letting us know, we can get this into the v10 branch and cut a release.
There was a problem hiding this comment.
@fbarroso24 This has been ported to the v10 branch via #11330, and is available in v10.57.1
…gn-system#10935) * fix(utilities): broaden HCM mixin to include macos query * fix(Utilites): update hcm media query * fix(Utilities): remove prefers-contrast query * fix(RadioButton): update styling to use HCM mixin
* fix(utilities): broaden HCM mixin to include macos query (#10935) * fix(utilities): broaden HCM mixin to include macos query * fix(Utilites): update hcm media query * fix(Utilities): remove prefers-contrast query * fix(RadioButton): update styling to use HCM mixin * chore(project): port HCM mixin changes from v10 to v11 Co-authored-by: DAK <40970507+dakahn@users.noreply.github.com>
partially closes #10844
Extends our high contrast mixin to include a media query that covers macOS 🏄🏾
Reference
https://adrianroselli.com/2017/11/os-high-contrast-versus-inverted-colors.html#MacOSICMQs
Testing / Reviewing
make sure Dropdown is accessible with macos HCM cranked up 👍🏾