[material-ui][Accordion] Add region slot (#46659)

Author: sai6855

docs/pages/material-ui/api/accordion.json

@@ -16,14 +16,14 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ heading?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
+        "description": "{ heading?: func<br>&#124;&nbsp;object, region?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object, transition?: func<br>&#124;&nbsp;object }"
       },
       "default": "{}"
     },
     "slots": {
       "type": {
         "name": "shape",
-        "description": "{ heading?: elementType, root?: elementType, transition?: elementType }"
+        "description": "{ heading?: elementType, region?: elementType, root?: elementType, transition?: elementType }"
       },
       "default": "{}"
     },
@@ -69,6 +69,12 @@
       "description": "The component that renders the transition.\n[Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.",
       "default": "Collapse",
       "class": null
+    },
+    {
+      "name": "region",
+      "description": "The component that renders the region.",
+      "default": "'div'",
+      "class": "MuiAccordion-region"
     }
   ],
   "classes": [
@@ -90,12 +96,6 @@
       "description": "Styles applied to the root element unless `disableGutters={true}`.",
       "isGlobal": false
     },
-    {
-      "key": "region",
-      "className": "MuiAccordion-region",
-      "description": "Styles applied to the region element, the container of the children.",
-      "isGlobal": false
-    },
     {
       "key": "rounded",
       "className": "MuiAccordion-rounded",

docs/translations/api-docs/accordion/accordion.json

@@ -53,11 +53,6 @@
       "nodeName": "the root element",
       "conditions": "<code>disableGutters={true}</code>"
     },
-    "region": {
-      "description": "Styles applied to {{nodeName}}, {{conditions}}.",
-      "nodeName": "the region element",
-      "conditions": "the container of the children"
-    },
     "rounded": {
       "description": "Styles applied to {{nodeName}} unless {{conditions}}.",
       "nodeName": "the root element",
@@ -66,6 +61,7 @@
   },
   "slotDescriptions": {
     "heading": "The component that renders the heading.",
+    "region": "The component that renders the region.",
     "root": "The component that renders the root.",
     "transition": "The component that renders the transition. <a href=\"https://mui.com/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component."
   }

packages/mui-material/src/Accordion/Accordion.d.ts

@@ -24,11 +24,17 @@ export interface AccordionSlots {
    * @default Collapse
    */
   transition: React.ElementType;
+  /**
+   * The component that renders the region.
+   * @default 'div'
+   */
+  region: React.ElementType;
 }
 
 export interface AccordionRootSlotPropsOverrides {}
 export interface AccordionHeadingSlotPropsOverrides {}
 export interface AccordionTransitionSlotPropsOverrides {}
+export interface AccordionRegionSlotPropsOverrides {}
 
 export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<
   AccordionSlots,
@@ -56,6 +62,11 @@ export type AccordionSlotsAndSlotProps = CreateSlotsAndSlotProps<
       TransitionProps & AccordionTransitionSlotPropsOverrides,
       AccordionOwnerState
     >;
+    /**
+     * Props forwarded to the region slot.
+     * By default, the available props are based on the div element.
+     */
+    region: SlotProps<'div', AccordionRegionSlotPropsOverrides, AccordionOwnerState>;
   }
 >;
 

packages/mui-material/src/Accordion/Accordion.js

@@ -133,6 +133,11 @@ const AccordionHeading = styled('h3', {
   all: 'unset',
 });
 
+const AccordionRegion = styled('div', {
+  name: 'MuiAccordion',
+  slot: 'Region',
+})({});
+
 const Accordion = React.forwardRef(function Accordion(inProps, ref) {
   const props = useDefaultProps({ props: inProps, name: 'MuiAccordion' });
   const {
@@ -221,20 +226,25 @@ const Accordion = React.forwardRef(function Accordion(inProps, ref) {
     ownerState,
   });
 
+  const [AccordionRegionSlot, accordionRegionProps] = useSlot('region', {
+    elementType: AccordionRegion,
+    externalForwardedProps,
+    ownerState,
+    className: classes.region,
+    additionalProps: {
+      'aria-labelledby': summary.props.id,
+      id: summary.props['aria-controls'],
+      role: 'region',
+    },
+  });
+
   return (
     <RootSlot {...rootProps}>
       <AccordionHeadingSlot {...accordionProps}>
         <AccordionContext.Provider value={contextValue}>{summary}</AccordionContext.Provider>
       </AccordionHeadingSlot>
       <TransitionSlot in={expanded} timeout="auto" {...transitionProps}>
-        <div
-          aria-labelledby={summary.props.id}
-          id={summary.props['aria-controls']}
-          role="region"
-          className={classes.region}
-        >
-          {children}
-        </div>
+        <AccordionRegionSlot {...accordionRegionProps}>{children}</AccordionRegionSlot>
       </TransitionSlot>
     </RootSlot>
   );
@@ -304,6 +314,7 @@ Accordion.propTypes /* remove-proptypes */ = {
    */
   slotProps: PropTypes.shape({
     heading: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    region: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     transition: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
@@ -313,6 +324,7 @@ Accordion.propTypes /* remove-proptypes */ = {
    */
   slots: PropTypes.shape({
     heading: PropTypes.elementType,
+    region: PropTypes.elementType,
     root: PropTypes.elementType,
     transition: PropTypes.elementType,
   }),

packages/mui-material/src/Accordion/Accordion.test.js

@@ -48,6 +48,10 @@ describe('<Accordion />', () => {
         expectedClassName: classes.root,
         testWithElement: CustomPaper,
       },
+      region: {
+        expectedClassName: classes.region,
+        testWithElement: 'div',
+      },
     },
     skip: ['componentProp', 'componentsProp'],
   }));
@@ -316,4 +320,15 @@ describe('<Accordion />', () => {
       });
     });
   });
+
+  it('should allow custom role for region slot via slotProps', () => {
+    render(
+      <Accordion expanded slotProps={{ region: { role: 'list', 'data-testid': 'region-slot' } }}>
+        <AccordionSummary>Summary</AccordionSummary>
+        Details
+      </Accordion>,
+    );
+
+    expect(screen.getByTestId('region-slot')).to.have.attribute('role', 'list');
+  });
 });