[docs] Fix duplicate IDs and HTML validation issues#48095
Merged
Janpot merged 4 commits intomui:masterfrom Mar 30, 2026
Merged
Conversation
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>
1 task
Netlify deploy previewhttps://deploy-preview-48095--material-ui.netlify.app/ Bundle size report
|
Janpot
added
the
scope: docs-infra
Janpot
changed the title
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>
Janpot
changed the title
Janpot
added a commit
to Janpot/material-ui
that referenced
this pull request
Mar 26, 2026
Cherry-pick fixes from mui#48107 and mui#48095: - Replace <span> with <div> 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>
mj12albert
approved these changes
Mar 29, 2026
Janpot
added a commit
to Janpot/material-ui
that referenced
this pull request
Mar 30, 2026
Cherry-pick fixes from mui#48107 and mui#48095: - Replace <span> with <div> 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Caught in #48088
React.useId()instead of hardcoded$ROOTprefix so multiple instances (collapsed/expanded views on default-theme page) don't produce duplicate IDs. (https://deploy-preview-48095--material-ui.netlify.app/material-ui/customization/default-theme/)React.useId()instead of hardcodedapp-search-labelID so multiple instances (AppHeader and AppFrame) don't conflict.aria-labellands on the Fab (interactive) instead of a wrapper div.React.useId()for unique IDs per instance, and fixaria-controlsto reference the menu ID instead of the button's own ID.