Skip to content

[docs] Fix invalid HTML nesting of block elements inside span#48107

Draft
Janpot wants to merge 4 commits intomui:masterfrom
Janpot:fix/html-nesting-validation
Draft

[docs] Fix invalid HTML nesting of block elements inside span#48107
Janpot wants to merge 4 commits intomui:masterfrom
Janpot:fix/html-nesting-validation

Conversation

@Janpot
Copy link
Copy Markdown
Member

@Janpot Janpot commented Mar 26, 2026

Summary

  • Replace <span dangerouslySetInnerHTML> with <div> in API page components where the HTML content contains block-level elements (<p>, <ul>)
  • Fix StyledIcon on the material-icons page from styled('span') to styled('div') since it wraps <div> children
  • Use inline elements throughout ProductsSwitcher on the homepage since its parent Highlighter renders as a <span>

Fixes element-permitted-content HTML validation errors on:

Replace <span> with <div> for dangerouslySetInnerHTML containers that
hold block-level content (<p>, <ul>) on API pages. Use inline elements
throughout ProductsSwitcher since its parent renders as <span>. Change
StyledIcon from <span> to <div> on the material-icons page since it
wraps <div> children.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@mui-bot
Copy link
Copy Markdown

mui-bot commented Mar 26, 2026

Netlify deploy preview

https://deploy-preview-48107--material-ui.netlify.app/

Bundle size report

Bundle Parsed size Gzip size
@mui/material 0B(0.00%) 0B(0.00%)
@mui/lab 0B(0.00%) 0B(0.00%)
@mui/system 0B(0.00%) 0B(0.00%)
@mui/utils 0B(0.00%) 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against b7414ac

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 26, 2026
Janpot added 2 commits March 26, 2026 11:05
Signed-off-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 26, 2026
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants