[docs] Add blog post for enhanceHighContrast#48753
Conversation
silviuaavram
added
docs
Deploy previewBundle size
Check out the code infra dashboard for more information about this PR. |
There was a problem hiding this comment.
Pull request overview
Adds new documentation content around Windows High Contrast / forced-colors support in Material UI by publishing a blog post and introducing a showcase demo that compares component states with and without the enhanceHighContrast theme enhancer. It also updates docs infrastructure to recognize the new author and tag.
Changes:
- Add a new blog post page for “Windows High Contrast mode support in Material UI”.
- Add a
HighContrastShowcasedemo and reference it from the palette customization docs and blog post. - Extend blog metadata support (author registry and whitelisted tags) for the new post.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/src/modules/components/TopLayoutBlog.js | Registers the new blog author so the post can render author metadata. |
| docs/pages/blog/designing-for-forced-colors-in-material-ui.md | Adds the blog post content, including a demo embed for the new showcase. |
| docs/pages/blog/designing-for-forced-colors-in-material-ui.js | Adds the Next.js page wrapper to render the markdown blog post with TopLayoutBlog. |
| docs/lib/sourcing.ts | Whitelists Accessibility as an allowed blog tag (used by the new post). |
| docs/data/material/customization/palette/palette.md | Links the new showcase demo from the “Windows High Contrast mode” section. |
| docs/data/material/customization/palette/HighContrastShowcase.tsx | Adds the TypeScript version of the showcase demo. |
| docs/data/material/customization/palette/HighContrastShowcase.js | Adds the JavaScript version of the showcase demo. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| CSS provides a media query that detects whenever forced colors are active: | ||
|
|
||
| ### @media (forced-colors: $value) | ||
|
|
|
|
||
| Here, we're using a pair of system colors to style a menu item's selected state. Native HTML elements get a lot of this behavior from the browser for free. Custom-built components do not always have that same semantic mapping, so component libraries need to fill the gap. | ||
|
|
||
| ### forced-color-adjust: $value |
7baf093 to
47a4625
Compare
siriwatknp
left a comment
siriwatknp
left a comment
There was a problem hiding this comment.
The demo layout could be improved:
- add more space for the toggle
- may be showing tooltip placement as top or bottom
|
|
||
| Browsers force a defined set of color-related properties at paint time. That detail matters: the CSS cascade can still contain author colors, but the browser paints a forced system color instead. System color keywords give authors a way to make the rest of the component fit that same palette. | ||
|
|
||
| ## CSS Features |
There was a problem hiding this comment.
I think this part is a bit confusing. As I read, I am not sure which is included in Material UI.
I suggest to start with something like "Material UI adopt/uses … " and then if you want to explain it more, it's okay for a few sentences.
|
|
||
| This is a sharp tool. When `forced-color-adjust: none` is used, the browser stops protecting that element's colors, so the author becomes responsible for the contrast of the element and its children. In Material UI, that made sense for selected and active states where we wanted to pair colors like `SelectedItem` with `SelectedItemText` or `Highlight` with `HighlightText`. | ||
|
|
||
| ## Chrome DevTools Emulation |
There was a problem hiding this comment.
I would remove this as a H2 and move to the hint above or below demo instead so user know how to emulate properly.
Adding it here has no connection in the blog at all.
| @@ -0,0 +1,248 @@ | |||
| --- | |||
| title: Windows High Contrast mode support in Material UI | |||
There was a problem hiding this comment.
After reading, I feel like the title should be around "A quest to support Windows High Contrast mode for Material UI".
Because you started with intro and then problem and then explain approached taken until a final solution.
| tags: ['Material UI', 'Accessibility', 'Guide'] | ||
| manualCard: false | ||
| --- | ||
|
|
There was a problem hiding this comment.
I suggest a "TLDR;" to summarize everything at the top.
I have followed (at least) the PR section of the contributing guide.
Add blog post documenting the creation of
enhanceHighContrastAdd a demo to show the fixed components and their states.