[Accordion] Fix invalid HTML inside heading (#44408)

mui · Dec 21, 2024 · 0ea1ef5 · 0ea1ef5
1 parent 065fcda
commit 0ea1ef5
Show file tree

Hide file tree

Showing 23 changed files with 84 additions and 60 deletions.
diff --git a/docs/data/material/components/accordion/AccordionExpandDefault.js b/docs/data/material/components/accordion/AccordionExpandDefault.js
@@ -14,7 +14,7 @@ export default function AccordionExpandDefault() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          <Typography>Expanded by default</Typography>
+          <Typography component="span">Expanded by default</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -29,7 +29,7 @@ export default function AccordionExpandDefault() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          <Typography>Header</Typography>
+          <Typography component="span">Header</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

diff --git a/docs/data/material/components/accordion/AccordionExpandDefault.tsx b/docs/data/material/components/accordion/AccordionExpandDefault.tsx
@@ -14,7 +14,7 @@ export default function AccordionExpandDefault() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          <Typography>Expanded by default</Typography>
+          <Typography component="span">Expanded by default</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -29,7 +29,7 @@ export default function AccordionExpandDefault() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          <Typography>Header</Typography>
+          <Typography component="span">Header</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

diff --git a/docs/data/material/components/accordion/AccordionExpandIcon.js b/docs/data/material/components/accordion/AccordionExpandIcon.js
@@ -15,7 +15,7 @@ export default function AccordionExpandIcon() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          <Typography>Accordion 1</Typography>
+          <Typography component="span">Accordion 1</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -30,7 +30,7 @@ export default function AccordionExpandIcon() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          <Typography>Accordion 2</Typography>
+          <Typography component="span">Accordion 2</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

diff --git a/docs/data/material/components/accordion/AccordionExpandIcon.tsx b/docs/data/material/components/accordion/AccordionExpandIcon.tsx
@@ -15,7 +15,7 @@ export default function AccordionExpandIcon() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          <Typography>Accordion 1</Typography>
+          <Typography component="span">Accordion 1</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -30,7 +30,7 @@ export default function AccordionExpandIcon() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          <Typography>Accordion 2</Typography>
+          <Typography component="span">Accordion 2</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

diff --git a/docs/data/material/components/accordion/AccordionTransition.js b/docs/data/material/components/accordion/AccordionTransition.js
@@ -47,7 +47,7 @@ export default function AccordionTransition() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          <Typography>Custom transition using Fade</Typography>
+          <Typography component="span">Custom transition using Fade</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -62,7 +62,7 @@ export default function AccordionTransition() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          <Typography>Default transition using Collapse</Typography>
+          <Typography component="span">Default transition using Collapse</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

diff --git a/docs/data/material/components/accordion/AccordionTransition.tsx b/docs/data/material/components/accordion/AccordionTransition.tsx
@@ -50,7 +50,7 @@ export default function AccordionTransition() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          <Typography>Custom transition using Fade</Typography>
+          <Typography component="span">Custom transition using Fade</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -65,7 +65,7 @@ export default function AccordionTransition() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          <Typography>Default transition using Collapse</Typography>
+          <Typography component="span">Default transition using Collapse</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

diff --git a/docs/data/material/components/accordion/AccordionUsage.js b/docs/data/material/components/accordion/AccordionUsage.js
@@ -3,6 +3,7 @@ import Accordion from '@mui/material/Accordion';
 import AccordionActions from '@mui/material/AccordionActions';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Button from '@mui/material/Button';
 
@@ -15,7 +16,7 @@ export default function AccordionUsage() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          Accordion 1
+          <Typography component="span">Accordion 1</Typography>
         </AccordionSummary>
         <AccordionDetails>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
@@ -28,7 +29,7 @@ export default function AccordionUsage() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          Accordion 2
+          <Typography component="span">Accordion 2</Typography>
         </AccordionSummary>
         <AccordionDetails>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
@@ -41,7 +42,7 @@ export default function AccordionUsage() {
           aria-controls="panel3-content"
           id="panel3-header"
         >
-          Accordion Actions
+          <Typography component="span">Accordion Actions</Typography>
         </AccordionSummary>
         <AccordionDetails>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse

diff --git a/docs/data/material/components/accordion/AccordionUsage.tsx b/docs/data/material/components/accordion/AccordionUsage.tsx
@@ -3,6 +3,7 @@ import Accordion from '@mui/material/Accordion';
 import AccordionActions from '@mui/material/AccordionActions';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Button from '@mui/material/Button';
 
@@ -15,7 +16,7 @@ export default function AccordionUsage() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          Accordion 1
+          <Typography component="span">Accordion 1</Typography>
         </AccordionSummary>
         <AccordionDetails>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
@@ -28,7 +29,7 @@ export default function AccordionUsage() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          Accordion 2
+          <Typography component="span">Accordion 2</Typography>
         </AccordionSummary>
         <AccordionDetails>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
@@ -41,7 +42,7 @@ export default function AccordionUsage() {
           aria-controls="panel3-content"
           id="panel3-header"
         >
-          Accordion Actions
+          <Typography component="span">Accordion Actions</Typography>
         </AccordionSummary>
         <AccordionDetails>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse

diff --git a/docs/data/material/components/accordion/ControlledAccordions.js b/docs/data/material/components/accordion/ControlledAccordions.js
@@ -20,10 +20,12 @@ export default function ControlledAccordions() {
           aria-controls="panel1bh-content"
           id="panel1bh-header"
         >
-          <Typography sx={{ width: '33%', flexShrink: 0 }}>
+          <Typography component="span" sx={{ width: '33%', flexShrink: 0 }}>
             General settings
           </Typography>
-          <Typography sx={{ color: 'text.secondary' }}>I am an accordion</Typography>
+          <Typography component="span" sx={{ color: 'text.secondary' }}>
+            I am an accordion
+          </Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -38,8 +40,10 @@ export default function ControlledAccordions() {
           aria-controls="panel2bh-content"
           id="panel2bh-header"
         >
-          <Typography sx={{ width: '33%', flexShrink: 0 }}>Users</Typography>
-          <Typography sx={{ color: 'text.secondary' }}>
+          <Typography component="span" sx={{ width: '33%', flexShrink: 0 }}>
+            Users
+          </Typography>
+          <Typography component="span" sx={{ color: 'text.secondary' }}>
             You are currently not an owner
           </Typography>
         </AccordionSummary>
@@ -57,10 +61,10 @@ export default function ControlledAccordions() {
           aria-controls="panel3bh-content"
           id="panel3bh-header"
         >
-          <Typography sx={{ width: '33%', flexShrink: 0 }}>
+          <Typography component="span" sx={{ width: '33%', flexShrink: 0 }}>
             Advanced settings
           </Typography>
-          <Typography sx={{ color: 'text.secondary' }}>
+          <Typography component="span" sx={{ color: 'text.secondary' }}>
             Filtering has been entirely disabled for whole web server
           </Typography>
         </AccordionSummary>
@@ -77,7 +81,9 @@ export default function ControlledAccordions() {
           aria-controls="panel4bh-content"
           id="panel4bh-header"
         >
-          <Typography sx={{ width: '33%', flexShrink: 0 }}>Personal data</Typography>
+          <Typography component="span" sx={{ width: '33%', flexShrink: 0 }}>
+            Personal data
+          </Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

diff --git a/docs/data/material/components/accordion/ControlledAccordions.tsx b/docs/data/material/components/accordion/ControlledAccordions.tsx
@@ -21,10 +21,12 @@ export default function ControlledAccordions() {
           aria-controls="panel1bh-content"
           id="panel1bh-header"
         >
-          <Typography sx={{ width: '33%', flexShrink: 0 }}>
+          <Typography component="span" sx={{ width: '33%', flexShrink: 0 }}>
             General settings
           </Typography>
-          <Typography sx={{ color: 'text.secondary' }}>I am an accordion</Typography>
+          <Typography component="span" sx={{ color: 'text.secondary' }}>
+            I am an accordion
+          </Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -39,8 +41,10 @@ export default function ControlledAccordions() {
           aria-controls="panel2bh-content"
           id="panel2bh-header"
         >
-          <Typography sx={{ width: '33%', flexShrink: 0 }}>Users</Typography>
-          <Typography sx={{ color: 'text.secondary' }}>
+          <Typography component="span" sx={{ width: '33%', flexShrink: 0 }}>
+            Users
+          </Typography>
+          <Typography component="span" sx={{ color: 'text.secondary' }}>
             You are currently not an owner
           </Typography>
         </AccordionSummary>
@@ -58,10 +62,10 @@ export default function ControlledAccordions() {
           aria-controls="panel3bh-content"
           id="panel3bh-header"
         >
-          <Typography sx={{ width: '33%', flexShrink: 0 }}>
+          <Typography component="span" sx={{ width: '33%', flexShrink: 0 }}>
             Advanced settings
           </Typography>
-          <Typography sx={{ color: 'text.secondary' }}>
+          <Typography component="span" sx={{ color: 'text.secondary' }}>
             Filtering has been entirely disabled for whole web server
           </Typography>
         </AccordionSummary>
@@ -78,7 +82,9 @@ export default function ControlledAccordions() {
           aria-controls="panel4bh-content"
           id="panel4bh-header"
         >
-          <Typography sx={{ width: '33%', flexShrink: 0 }}>Personal data</Typography>
+          <Typography component="span" sx={{ width: '33%', flexShrink: 0 }}>
+            Personal data
+          </Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

diff --git a/docs/data/material/components/accordion/CustomizedAccordions.js b/docs/data/material/components/accordion/CustomizedAccordions.js
@@ -56,7 +56,7 @@ export default function CustomizedAccordions() {
     <div>
       <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
         <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
-          <Typography>Collapsible Group Item #1</Typography>
+          <Typography component="span">Collapsible Group Item #1</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -69,7 +69,7 @@ export default function CustomizedAccordions() {
       </Accordion>
       <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
         <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
-          <Typography>Collapsible Group Item #2</Typography>
+          <Typography component="span">Collapsible Group Item #2</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -82,7 +82,7 @@ export default function CustomizedAccordions() {
       </Accordion>
       <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
         <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
-          <Typography>Collapsible Group Item #3</Typography>
+          <Typography component="span">Collapsible Group Item #3</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

diff --git a/docs/data/material/components/accordion/CustomizedAccordions.tsx b/docs/data/material/components/accordion/CustomizedAccordions.tsx
@@ -58,7 +58,7 @@ export default function CustomizedAccordions() {
     <div>
       <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
         <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
-          <Typography>Collapsible Group Item #1</Typography>
+          <Typography component="span">Collapsible Group Item #1</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -71,7 +71,7 @@ export default function CustomizedAccordions() {
       </Accordion>
       <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
         <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
-          <Typography>Collapsible Group Item #2</Typography>
+          <Typography component="span">Collapsible Group Item #2</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -84,7 +84,7 @@ export default function CustomizedAccordions() {
       </Accordion>
       <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
         <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
-          <Typography>Collapsible Group Item #3</Typography>
+          <Typography component="span">Collapsible Group Item #3</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

diff --git a/docs/data/material/components/accordion/DisabledAccordion.js b/docs/data/material/components/accordion/DisabledAccordion.js
@@ -14,7 +14,7 @@ export default function DisabledAccordion() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          <Typography>Accordion 1</Typography>
+          <Typography component="span">Accordion 1</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -29,7 +29,7 @@ export default function DisabledAccordion() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          <Typography>Accordion 2</Typography>
+          <Typography component="span">Accordion 2</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -44,7 +44,7 @@ export default function DisabledAccordion() {
           aria-controls="panel3-content"
           id="panel3-header"
         >
-          <Typography>Disabled Accordion</Typography>
+          <Typography component="span">Disabled Accordion</Typography>
         </AccordionSummary>
       </Accordion>
     </div>

diff --git a/docs/data/material/components/accordion/DisabledAccordion.tsx b/docs/data/material/components/accordion/DisabledAccordion.tsx
@@ -14,7 +14,7 @@ export default function DisabledAccordion() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          <Typography>Accordion 1</Typography>
+          <Typography component="span">Accordion 1</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -29,7 +29,7 @@ export default function DisabledAccordion() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          <Typography>Accordion 2</Typography>
+          <Typography component="span">Accordion 2</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -44,7 +44,7 @@ export default function DisabledAccordion() {
           aria-controls="panel3-content"
           id="panel3-header"
         >
-          <Typography>Disabled Accordion</Typography>
+          <Typography component="span">Disabled Accordion</Typography>
         </AccordionSummary>
       </Accordion>
     </div>

diff --git a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.js
@@ -27,7 +27,7 @@ export default function MasonryWithVariableHeightItems() {
           <Paper key={index}>
             <StyledAccordion sx={{ minHeight: height }}>
               <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-                <Typography>Accordion {index + 1}</Typography>
+                <Typography component="span">Accordion {index + 1}</Typography>
               </AccordionSummary>
               <AccordionDetails>Contents</AccordionDetails>
             </StyledAccordion>