[docs] Fix duplicate IDs and HTML validation issues by Janpot · Pull Request #48095 · mui/material-ui (original) (raw)
Use React.useId() instead of a hardcoded '$ROOT' prefix so that multiple ThemeViewer instances on the same page (e.g. collapsed and expanded views on /material-ui/customization/default-theme) produce unique element IDs.
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305).
label
[docs] Fix duplicate IDs in ThemeViewer [docs-infra] Fix duplicate IDs in ThemeViewer
Use React.useId() instead of a hardcoded 'app-search-label' ID so that multiple SearchButton instances (AppHeader and AppFrame) don't produce duplicate IDs in the DOM.
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
Move Tooltip inside the positioning Box so it wraps the Fab directly. This prevents aria-label from being applied to a non-interactive div.
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
Use React.useId() for unique IDs per instance, and fix aria-controls to reference the menu ID instead of the button's own ID.
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
[docs-infra] Fix duplicate IDs in ThemeViewer [docs] Fix duplicate IDs and HTML validation issues
Janpot added a commit to Janpot/material-ui that referenced this pull request
Cherry-pick fixes from mui#48107 and mui#48095:
- Replace with for dangerouslySetInnerHTML with block content
- Fix StyledIcon from span to div on material-icons page
- Use inline elements in ProductsSwitcher for valid span nesting
- Fix duplicate IDs in ThemeViewer, SearchButton, ToggleDisplayOption
- Fix aria-label misuse on BackToTop wrapper div
- Fix wrong aria-controls in ToggleDisplayOption
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
Janpot added a commit to Janpot/material-ui that referenced this pull request
Cherry-pick fixes from mui#48107 and mui#48095:
- Replace with for dangerouslySetInnerHTML with block content
- Fix StyledIcon from span to div on material-icons page
- Use inline elements in ProductsSwitcher for valid span nesting
- Fix duplicate IDs in ThemeViewer, SearchButton, ToggleDisplayOption
- Fix aria-label misuse on BackToTop wrapper div
- Fix wrong aria-controls in ToggleDisplayOption
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters
[ Show hidden characters]({{ revealButtonHref }})