diff --git a/docs/data/material/components/accordion/AccordionExpandDefault.js b/docs/data/material/components/accordion/AccordionExpandDefault.js
index cb49c530d96eea..eedc0e71de1f1b 100644
--- 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
index cb49c530d96eea..eedc0e71de1f1b 100644
--- 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
index 3ec7af1b9a6385..9dc4e90d2b72e0 100644
--- 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
index 3ec7af1b9a6385..9dc4e90d2b72e0 100644
--- 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
index 0b05acdf3236fd..b0a39321fdbb8e 100644
--- 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
index d3f90707145255..85620309beecd9 100644
--- 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
index 0b425cf4dbc32c..55987822e87b15 100644
--- 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
index 0b425cf4dbc32c..55987822e87b15 100644
--- 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
index 8aa4b05ca525dc..d9a0067cb62a5b 100644
--- 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
index 73ea841a29c217..1eaa7c910ea988 100644
--- 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
index 5710f8c1cca468..0390578a7d5c2d 100644
--- 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
index 3d6644f9358f2f..16707f15eb63cd 100644
--- 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
index a5200f7f30e3b8..6eb9da4c367262 100644
--- 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
index a5200f7f30e3b8..6eb9da4c367262 100644
--- 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
index c894e3fac75041..e918e133f73d10 100644
--- 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>
diff --git a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx
index c894e3fac75041..e918e133f73d10 100644
--- a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx
+++ b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx
@@ -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>
diff --git a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx.preview b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx.preview
index 60b1a0832ff1e8..a1f1717c0d3e5d 100644
--- a/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx.preview
+++ b/docs/data/material/components/masonry/MasonryWithVariableHeightItems.tsx.preview
@@ -3,7 +3,7 @@
     <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>
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/FAQ.js b/docs/data/material/getting-started/templates/marketing-page/components/FAQ.js
index 5f34782ffb1234..ea232ae74cc126 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/FAQ.js
+++ b/docs/data/material/getting-started/templates/marketing-page/components/FAQ.js
@@ -51,7 +51,7 @@ export default function FAQ() {
             aria-controls="panel1d-content"
             id="panel1d-header"
           >
-            <Typography component="h3" variant="subtitle2">
+            <Typography component="span" variant="subtitle2">
               How do I contact customer support if I have a question or issue?
             </Typography>
           </AccordionSummary>
@@ -77,7 +77,7 @@ export default function FAQ() {
             aria-controls="panel2d-content"
             id="panel2d-header"
           >
-            <Typography component="h3" variant="subtitle2">
+            <Typography component="span" variant="subtitle2">
               Can I return the product if it doesn&apos;t meet my expectations?
             </Typography>
           </AccordionSummary>
@@ -102,7 +102,7 @@ export default function FAQ() {
             aria-controls="panel3d-content"
             id="panel3d-header"
           >
-            <Typography component="h3" variant="subtitle2">
+            <Typography component="span" variant="subtitle2">
               What makes your product stand out from others in the market?
             </Typography>
           </AccordionSummary>
@@ -127,7 +127,7 @@ export default function FAQ() {
             aria-controls="panel4d-content"
             id="panel4d-header"
           >
-            <Typography component="h3" variant="subtitle2">
+            <Typography component="span" variant="subtitle2">
               Is there a warranty on the product, and what does it cover?
             </Typography>
           </AccordionSummary>
diff --git a/docs/data/material/getting-started/templates/marketing-page/components/FAQ.tsx b/docs/data/material/getting-started/templates/marketing-page/components/FAQ.tsx
index 03319f0654ce93..84c0770f449c41 100644
--- a/docs/data/material/getting-started/templates/marketing-page/components/FAQ.tsx
+++ b/docs/data/material/getting-started/templates/marketing-page/components/FAQ.tsx
@@ -54,7 +54,7 @@ export default function FAQ() {
             aria-controls="panel1d-content"
             id="panel1d-header"
           >
-            <Typography component="h3" variant="subtitle2">
+            <Typography component="span" variant="subtitle2">
               How do I contact customer support if I have a question or issue?
             </Typography>
           </AccordionSummary>
@@ -80,7 +80,7 @@ export default function FAQ() {
             aria-controls="panel2d-content"
             id="panel2d-header"
           >
-            <Typography component="h3" variant="subtitle2">
+            <Typography component="span" variant="subtitle2">
               Can I return the product if it doesn&apos;t meet my expectations?
             </Typography>
           </AccordionSummary>
@@ -105,7 +105,7 @@ export default function FAQ() {
             aria-controls="panel3d-content"
             id="panel3d-header"
           >
-            <Typography component="h3" variant="subtitle2">
+            <Typography component="span" variant="subtitle2">
               What makes your product stand out from others in the market?
             </Typography>
           </AccordionSummary>
@@ -130,7 +130,7 @@ export default function FAQ() {
             aria-controls="panel4d-content"
             id="panel4d-header"
           >
-            <Typography component="h3" variant="subtitle2">
+            <Typography component="span" variant="subtitle2">
               Is there a warranty on the product, and what does it cover?
             </Typography>
           </AccordionSummary>
diff --git a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
index 00559f268f5d28..9157d2ca92cfcc 100644
--- a/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
+++ b/docs/data/material/migration/upgrade-to-v6/upgrade-to-v6.md
@@ -132,6 +132,8 @@ For alternative installation methods, refer to the [CDN documentation](/material
 
 ### Accordion
 
+#### Summary wrapped in a heading
+
 To meet the [W3C Accordion Pattern standard](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/), the Accordion Summary is now wrapped with a default `<h3>` heading element.
 This change may affect customizations relying on the previous DOM structure and CSS specificity.
 Additionally, the default heading element might conflict with existing heading structures on your page.
@@ -155,6 +157,13 @@ If the default heading element conflicts with your existing structure, you can c
 </Accordion>
 ```
 
+#### Summary as a button (from v6.3.0)
+
+- The Accordion Summary HTML structure has been updated to fix invalid HTML introduced by wrapping it with a heading shown above:
+  - The root element is now a `button`.
+  - Summary content and the icon wrapper are rendered as `span`.
+- Developers using the previous `div` element for styling in the `AccordionSummary` should update their styling. Additionally, those using `Typography` for text, which defaults to rendering a `p` tag, should replace it with a `span`. You can use the `component` prop to replace the HTML tag (`<Typography component="span" />`), as shown in the [Accordion demos](https://mui.com/material-ui/react-accordion/).
+
 ### Autocomplete
 
 Three new values have been introduced to the `reason` argument in the `onInputChange` callback of the Autocomplete component.
diff --git a/docs/pages/material-ui/api/accordion-summary.json b/docs/pages/material-ui/api/accordion-summary.json
index fe7addfbbbe5d5..5702726ea6922e 100644
--- a/docs/pages/material-ui/api/accordion-summary.json
+++ b/docs/pages/material-ui/api/accordion-summary.json
@@ -71,7 +71,7 @@
   "spread": true,
   "themeDefaultProps": true,
   "muiName": "MuiAccordionSummary",
-  "forwardsRefTo": "HTMLDivElement",
+  "forwardsRefTo": "HTMLButtonElement",
   "filename": "/packages/mui-material/src/AccordionSummary/AccordionSummary.js",
   "inheritance": { "component": "ButtonBase", "pathname": "/material-ui/api/button-base/" },
   "demos": "<ul><li><a href=\"/material-ui/react-accordion/\">Accordion</a></li></ul>",
diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.js b/packages/mui-material/src/AccordionSummary/AccordionSummary.js
index 4ca5ae9dfa0df4..409030638c6d22 100644
--- a/packages/mui-material/src/AccordionSummary/AccordionSummary.js
+++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.js
@@ -37,6 +37,7 @@ const AccordionSummaryRoot = styled(ButtonBase, {
 
     return {
       display: 'flex',
+      width: '100%',
       minHeight: 48,
       padding: theme.spacing(0, 2),
       transition: theme.transitions.create(['min-height', 'background-color'], transition),
@@ -63,13 +64,14 @@ const AccordionSummaryRoot = styled(ButtonBase, {
   }),
 );
 
-const AccordionSummaryContent = styled('div', {
+const AccordionSummaryContent = styled('span', {
   name: 'MuiAccordionSummary',
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content,
 })(
   memoTheme(({ theme }) => ({
     display: 'flex',
+    textAlign: 'start',
     flexGrow: 1,
     margin: '12px 0',
     variants: [
@@ -88,7 +90,7 @@ const AccordionSummaryContent = styled('div', {
   })),
 );
 
-const AccordionSummaryExpandIconWrapper = styled('div', {
+const AccordionSummaryExpandIconWrapper = styled('span', {
   name: 'MuiAccordionSummary',
   slot: 'ExpandIconWrapper',
   overridesResolver: (props, styles) => styles.expandIconWrapper,
@@ -134,7 +136,6 @@ const AccordionSummary = React.forwardRef(function AccordionSummary(inProps, ref
       focusRipple={false}
       disableRipple
       disabled={disabled}
-      component="div"
       aria-expanded={expanded}
       className={clsx(classes.root, className)}
       focusVisibleClassName={clsx(classes.focusVisible, focusVisibleClassName)}
diff --git a/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js b/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js
index a8d1cf1aaa510d..f237ef5d524053 100644
--- a/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js
+++ b/packages/mui-material/src/AccordionSummary/AccordionSummary.test.js
@@ -16,7 +16,7 @@ describe('<AccordionSummary />', () => {
     classes,
     inheritComponent: ButtonBase,
     render,
-    refInstanceof: window.HTMLDivElement,
+    refInstanceof: window.HTMLButtonElement,
     muiName: 'MuiAccordionSummary',
     testVariantProps: { disabled: true },
     testDeepOverrides: { slotName: 'content', slotClassName: classes.content },