From 0ea1ef5241dae88c1f0ca093a4ff4f02a267fa60 Mon Sep 17 00:00:00 2001 From: Zeeshan Tamboli Date: Sat, 21 Dec 2024 13:11:25 +0530 Subject: [PATCH] [Accordion] Fix invalid HTML inside heading (#44408) --- .../accordion/AccordionExpandDefault.js | 4 ++-- .../accordion/AccordionExpandDefault.tsx | 4 ++-- .../accordion/AccordionExpandIcon.js | 4 ++-- .../accordion/AccordionExpandIcon.tsx | 4 ++-- .../accordion/AccordionTransition.js | 4 ++-- .../accordion/AccordionTransition.tsx | 4 ++-- .../components/accordion/AccordionUsage.js | 7 ++++--- .../components/accordion/AccordionUsage.tsx | 7 ++++--- .../accordion/ControlledAccordions.js | 20 ++++++++++++------- .../accordion/ControlledAccordions.tsx | 20 ++++++++++++------- .../accordion/CustomizedAccordions.js | 6 +++--- .../accordion/CustomizedAccordions.tsx | 6 +++--- .../components/accordion/DisabledAccordion.js | 6 +++--- .../accordion/DisabledAccordion.tsx | 6 +++--- .../masonry/MasonryWithVariableHeightItems.js | 2 +- .../MasonryWithVariableHeightItems.tsx | 2 +- ...MasonryWithVariableHeightItems.tsx.preview | 2 +- .../marketing-page/components/FAQ.js | 8 ++++---- .../marketing-page/components/FAQ.tsx | 8 ++++---- .../migration/upgrade-to-v6/upgrade-to-v6.md | 9 +++++++++ .../material-ui/api/accordion-summary.json | 2 +- .../src/AccordionSummary/AccordionSummary.js | 7 ++++--- .../AccordionSummary/AccordionSummary.test.js | 2 +- 23 files changed, 84 insertions(+), 60 deletions(-) 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" > - Expanded by default + Expanded by default @@ -29,7 +29,7 @@ export default function AccordionExpandDefault() { aria-controls="panel2-content" id="panel2-header" > - Header + Header 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" > - Expanded by default + Expanded by default @@ -29,7 +29,7 @@ export default function AccordionExpandDefault() { aria-controls="panel2-content" id="panel2-header" > - Header + Header 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" > - Accordion 1 + Accordion 1 @@ -30,7 +30,7 @@ export default function AccordionExpandIcon() { aria-controls="panel2-content" id="panel2-header" > - Accordion 2 + Accordion 2 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" > - Accordion 1 + Accordion 1 @@ -30,7 +30,7 @@ export default function AccordionExpandIcon() { aria-controls="panel2-content" id="panel2-header" > - Accordion 2 + Accordion 2 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" > - Custom transition using Fade + Custom transition using Fade @@ -62,7 +62,7 @@ export default function AccordionTransition() { aria-controls="panel2-content" id="panel2-header" > - Default transition using Collapse + Default transition using Collapse 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" > - Custom transition using Fade + Custom transition using Fade @@ -65,7 +65,7 @@ export default function AccordionTransition() { aria-controls="panel2-content" id="panel2-header" > - Default transition using Collapse + Default transition using Collapse 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 + Accordion 1 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 + Accordion 2 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 + Accordion Actions 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 + Accordion 1 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 + Accordion 2 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 + Accordion Actions 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" > - + General settings - I am an accordion + + I am an accordion + @@ -38,8 +40,10 @@ export default function ControlledAccordions() { aria-controls="panel2bh-content" id="panel2bh-header" > - Users - + + Users + + You are currently not an owner @@ -57,10 +61,10 @@ export default function ControlledAccordions() { aria-controls="panel3bh-content" id="panel3bh-header" > - + Advanced settings - + Filtering has been entirely disabled for whole web server @@ -77,7 +81,9 @@ export default function ControlledAccordions() { aria-controls="panel4bh-content" id="panel4bh-header" > - Personal data + + Personal data + 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" > - + General settings - I am an accordion + + I am an accordion + @@ -39,8 +41,10 @@ export default function ControlledAccordions() { aria-controls="panel2bh-content" id="panel2bh-header" > - Users - + + Users + + You are currently not an owner @@ -58,10 +62,10 @@ export default function ControlledAccordions() { aria-controls="panel3bh-content" id="panel3bh-header" > - + Advanced settings - + Filtering has been entirely disabled for whole web server @@ -78,7 +82,9 @@ export default function ControlledAccordions() { aria-controls="panel4bh-content" id="panel4bh-header" > - Personal data + + Personal data + 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() {
- Collapsible Group Item #1 + Collapsible Group Item #1 @@ -69,7 +69,7 @@ export default function CustomizedAccordions() { - Collapsible Group Item #2 + Collapsible Group Item #2 @@ -82,7 +82,7 @@ export default function CustomizedAccordions() { - Collapsible Group Item #3 + Collapsible Group Item #3 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() {
- Collapsible Group Item #1 + Collapsible Group Item #1 @@ -71,7 +71,7 @@ export default function CustomizedAccordions() { - Collapsible Group Item #2 + Collapsible Group Item #2 @@ -84,7 +84,7 @@ export default function CustomizedAccordions() { - Collapsible Group Item #3 + Collapsible Group Item #3 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" > - Accordion 1 + Accordion 1 @@ -29,7 +29,7 @@ export default function DisabledAccordion() { aria-controls="panel2-content" id="panel2-header" > - Accordion 2 + Accordion 2 @@ -44,7 +44,7 @@ export default function DisabledAccordion() { aria-controls="panel3-content" id="panel3-header" > - Disabled Accordion + Disabled Accordion
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" > - Accordion 1 + Accordion 1 @@ -29,7 +29,7 @@ export default function DisabledAccordion() { aria-controls="panel2-content" id="panel2-header" > - Accordion 2 + Accordion 2 @@ -44,7 +44,7 @@ export default function DisabledAccordion() { aria-controls="panel3-content" id="panel3-header" > - Disabled Accordion + Disabled Accordion
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() { }> - Accordion {index + 1} + Accordion {index + 1} Contents 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() { }> - Accordion {index + 1} + Accordion {index + 1} Contents 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 @@ }> - Accordion {index + 1} + Accordion {index + 1} Contents 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" > - + How do I contact customer support if I have a question or issue? @@ -77,7 +77,7 @@ export default function FAQ() { aria-controls="panel2d-content" id="panel2d-header" > - + Can I return the product if it doesn't meet my expectations? @@ -102,7 +102,7 @@ export default function FAQ() { aria-controls="panel3d-content" id="panel3d-header" > - + What makes your product stand out from others in the market? @@ -127,7 +127,7 @@ export default function FAQ() { aria-controls="panel4d-content" id="panel4d-header" > - + Is there a warranty on the product, and what does it cover? 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" > - + How do I contact customer support if I have a question or issue? @@ -80,7 +80,7 @@ export default function FAQ() { aria-controls="panel2d-content" id="panel2d-header" > - + Can I return the product if it doesn't meet my expectations? @@ -105,7 +105,7 @@ export default function FAQ() { aria-controls="panel3d-content" id="panel3d-header" > - + What makes your product stand out from others in the market? @@ -130,7 +130,7 @@ export default function FAQ() { aria-controls="panel4d-content" id="panel4d-header" > - + Is there a warranty on the product, and what does it cover? 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 `

` 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 ``` +#### 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 (``), 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": "", 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('', () => { classes, inheritComponent: ButtonBase, render, - refInstanceof: window.HTMLDivElement, + refInstanceof: window.HTMLButtonElement, muiName: 'MuiAccordionSummary', testVariantProps: { disabled: true }, testDeepOverrides: { slotName: 'content', slotClassName: classes.content },