[docs-infra] Fix missing button aria-label (#40394)

mui · Jan 2, 2024 · 571b15a · 571b15a
1 parent 8c3423c
commit 571b15a
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 99 deletions.
diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
@@ -252,14 +252,12 @@ export default function ApiPage(props) {
             />
           </React.Fragment>
         ) : null}
-
         <PropertiesSection
           properties={componentProps}
           propertiesDescriptions={propDescriptions}
           targetName={pageContent.name}
           spreadHint={spreadHint}
         />
-
         {cssComponent && (
           <React.Fragment>
             <span
@@ -271,7 +269,6 @@ export default function ApiPage(props) {
             <br />
           </React.Fragment>
         )}
-
         <div
           className="MuiCallout-root MuiCallout-info"
           dangerouslySetInnerHTML={{ __html: refHint }}
@@ -281,7 +278,6 @@ export default function ApiPage(props) {
             marginTop: 0,
           }}
         />
-
         {inheritance && (
           <React.Fragment>
             <Heading hash="inheritance" level="h3" />
@@ -297,7 +293,6 @@ export default function ApiPage(props) {
             <Divider />
           </React.Fragment>
         )}
-
         {pageContent.themeDefaultProps && (
           <React.Fragment>
             <Heading hash="theme-default-props" level="h3" />
@@ -311,7 +306,6 @@ export default function ApiPage(props) {
             <Divider sx={{ 'hr&&': { mb: 0 } }} />
           </React.Fragment>
         )}
-
         <SlotsSection
           componentSlots={componentSlots}
           slotDescriptions={slotDescriptions}
@@ -321,7 +315,6 @@ export default function ApiPage(props) {
             t('api-docs.slotDescription').replace(/{{slotGuideLink}}/, slotGuideLink)
           }
         />
-
         <ClassesSection
           componentClasses={componentClasses}
           componentName={pageContent.name}

diff --git a/docs/src/modules/components/ApiPage/list/ClassesList.tsx b/docs/src/modules/components/ApiPage/list/ClassesList.tsx
@@ -42,8 +42,9 @@ type ClassesListProps = {
 };
 type HashParams = { componentName?: string; className: string };
 
-export const getHash = ({ componentName, className }: HashParams) =>
-  `${componentName ? `${componentName}-` : ''}classes-${className}`;
+export function getHash({ componentName, className }: HashParams) {
+  return `${componentName ? `${componentName}-` : ''}classes-${className}`;
+}
 
 export default function ClassesList(props: ClassesListProps) {
   const { classes, displayOption, componentName, displayClassKeys } = props;

diff --git a/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpandableApiItem.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { alpha, styled } from '@mui/material/styles';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
@@ -170,30 +169,30 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
   }),
 );
 
-export type ApiItemProps = {
-  id: string;
-  title: string;
+type ExpandableApiItemProps = {
+  children?: React.ReactNode;
+  className?: string;
   description?: string;
-  note?: string;
-  type?: DescriptionType;
+  displayOption?: 'collapsed' | 'expanded';
+  id: string;
   isExtendable?: boolean;
-  className?: string;
-  children?: React.ReactNode;
+  note?: string;
   sx?: SxProps;
-  displayOption?: 'collapsed' | 'expanded';
+  title: string;
+  type?: DescriptionType;
 };
 
-function ApiItem(props: ApiItemProps) {
+export default function ExpandableApiItem(props: ExpandableApiItemProps) {
   const {
-    title,
-    description,
-    note,
     children,
-    type,
-    id,
-    isExtendable = true,
     className,
+    description,
     displayOption,
+    id,
+    isExtendable = true,
+    note,
+    title,
+    type,
     ...other
   } = props;
 
@@ -228,6 +227,7 @@ function ApiItem(props: ApiItemProps) {
           <IconButton
             onClick={() => setIsExtended((prev) => !prev)}
             className="MuiApi-expend-button"
+            aria-label={isExtended ? 'Collapse' : 'Expand'}
             size="small"
             sx={{ p: 0, ml: 'auto', borderRadius: '6px' }}
           >
@@ -245,16 +245,8 @@ function ApiItem(props: ApiItemProps) {
   );
 }
 
-ApiItem.propTypes = {
-  description: PropTypes.string,
-  note: PropTypes.string,
-  title: PropTypes.string.isRequired,
-};
-
 export const ApiItemContaier = styled('div')({
   width: '100%',
   display: 'flex',
   flexDirection: 'column',
 });
-
-export default ApiItem;
diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import Alert from '@mui/material/Alert';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
@@ -22,7 +21,7 @@ const StyledApiItem = styled(ExpandableApiItem)(
       display: 'flex',
       flexDirection: 'column',
       gap: 8,
-      '&>p': {
+      '& > p': {
         margin: 0,
       },
       '& .prop-list-title': {
@@ -38,7 +37,7 @@ const StyledApiItem = styled(ExpandableApiItem)(
       },
     },
     '& .prop-list-deprecated': {
-      '& code ': { all: 'unset' },
+      '& code': { all: 'unset' },
     },
     '& .prop-list-default-props': {
       ...theme.typography.body2,
@@ -55,7 +54,7 @@ const StyledApiItem = styled(ExpandableApiItem)(
         marginTop: 2,
         marginBottom: 0,
       },
-      '&>code': {
+      '& > code': {
         borderRadius: 8,
         padding: 12,
         width: '100%',
@@ -76,15 +75,15 @@ const StyledApiItem = styled(ExpandableApiItem)(
           },
         },
       },
-
       '& .prop-list-default-props': {
         color: `var(--muidocs-palette-grey-300, ${darkTheme.palette.grey[300]})`,
       },
     },
   }),
 );
 
-function PropDescription({ description }: { description: string }) {
+function PropDescription(props: { description: string }) {
+  const { description } = props;
   const isUlPresent = description.includes('<ul>');
 
   const ComponentToRender = isUlPresent ? 'div' : 'p';
@@ -99,11 +98,7 @@ function PropDescription({ description }: { description: string }) {
   );
 }
 
-PropDescription.propTypes = {
-  description: PropTypes.string.isRequired,
-};
-
-export const getHash = ({
+export function getHash({
   targetName,
   propName,
   hooksParameters,
@@ -113,15 +108,15 @@ export const getHash = ({
   propName: string;
   hooksParameters?: boolean;
   hooksReturnValue?: boolean;
-}) => {
+}) {
   let sectionName = 'prop';
   if (hooksParameters) {
     sectionName = 'parameters';
   } else if (hooksReturnValue) {
     sectionName = 'return-value';
   }
   return `${targetName ? `${targetName}-` : ''}${sectionName}-${propName}`;
-};
+}
 
 export interface PropDescriptionParams {
   targetName: string;
@@ -181,7 +176,6 @@ export default function PropertiesList(props: PropertiesListProps) {
             displayOption={displayOption}
           >
             {description && <PropDescription description={description} />}
-
             {requiresRef && (
               <Alert
                 severity="warning"
@@ -200,7 +194,6 @@ export default function PropertiesList(props: PropertiesListProps) {
                 />
               </Alert>
             )}
-
             {additionalInfo.map((key) => (
               <p
                 className="prop-list-additional-description  MuiApi-collapsible"
@@ -256,14 +249,12 @@ export default function PropertiesList(props: PropertiesListProps) {
               {signature && (
                 <div className="prop-list-signature MuiApi-collapsible">
                   <span className="prop-list-title">{t('api-docs.signature')}:</span>
-
                   <div className="prop-list-content">
                     <code
                       dangerouslySetInnerHTML={{
                         __html: signature,
                       }}
                     />
-
                     {signatureArgs && (
                       <div>
                         <ul>

diff --git a/docs/src/modules/components/ApiPage/list/SlotsList.tsx b/docs/src/modules/components/ApiPage/list/SlotsList.tsx
@@ -53,8 +53,9 @@ export type SlotsFormatedParams = {
 
 type HashParams = { componentName?: string; className: string };
 
-export const getHash = ({ componentName, className }: HashParams) =>
-  `${componentName ? `${componentName}-` : ''}css-${className}`;
+export function getHash({ componentName, className }: HashParams) {
+  return `${componentName ? `${componentName}-` : ''}css-${className}`;
+}
 
 interface SlotsListProps {
   slots: SlotsFormatedParams[];

diff --git a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
@@ -10,32 +10,34 @@ import ToggleDisplayOption, {
 import PropertiesList, { getHash } from 'docs/src/modules/components/ApiPage/list/PropertiesList';
 import PropertiesTable from 'docs/src/modules/components/ApiPage/table/PropertiesTable';
 
-export const getPropsToC = ({
+export function getPropsToC({
   componentName,
   componentProps,
   inheritance,
   themeDefaultProps,
   t,
   hash,
-}) => ({
-  text: t('api-docs.props'),
-  hash: hash ?? 'props',
-  children: [
-    ...Object.entries(componentProps)
-      .filter(([, propData]) => propData.description !== '@ignore')
-      .map(([propName]) => ({
-        text: propName,
-        hash: getHash({ propName, targetName: componentName }),
-        children: [],
-      })),
-    ...(inheritance
-      ? [{ text: t('api-docs.inheritance'), hash: 'inheritance', children: [] }]
-      : []),
-    ...(themeDefaultProps
-      ? [{ text: t('api-docs.themeDefaultProps'), hash: 'theme-default-props', children: [] }]
-      : []),
-  ],
-});
+}) {
+  return {
+    text: t('api-docs.props'),
+    hash: hash ?? 'props',
+    children: [
+      ...Object.entries(componentProps)
+        .filter(([, propData]) => propData.description !== '@ignore')
+        .map(([propName]) => ({
+          text: propName,
+          hash: getHash({ propName, targetName: componentName }),
+          children: [],
+        })),
+      ...(inheritance
+        ? [{ text: t('api-docs.inheritance'), hash: 'inheritance', children: [] }]
+        : []),
+      ...(themeDefaultProps
+        ? [{ text: t('api-docs.themeDefaultProps'), hash: 'theme-default-props', children: [] }]
+        : []),
+    ],
+  };
+}
 
 export default function PropertiesSection(props) {
   const {
@@ -122,9 +124,7 @@ export default function PropertiesSection(props) {
         </Level>
         <ToggleDisplayOption displayOption={displayOption} setDisplayOption={setDisplayOption} />
       </Box>
-
       {spreadHint && <p dangerouslySetInnerHTML={{ __html: spreadHint }} />}
-
       {displayOption === 'table' ? (
         <PropertiesTable properties={formatedProperties} />
       ) : (

diff --git a/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx b/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import Tooltip, { TooltipProps } from '@mui/material/Tooltip';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import ToggleButton, { ToggleButtonProps } from '@mui/material/ToggleButton';
@@ -139,15 +138,6 @@ const TooltipToggleButton = React.forwardRef<HTMLButtonElement, TooltipToggleBut
   },
 );
 
-TooltipToggleButton.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
-  title: PropTypes.string.isRequired,
-  TooltipProps: PropTypes.object,
-};
-
 interface ToggleDisplayOptionProps {
   displayOption: ApiDisplayOptions;
   setDisplayOption: (newValue: ApiDisplayOptions) => void;

diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable react/no-danger */
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import { styled, alpha } from '@mui/material/styles';
 import Alert from '@mui/material/Alert';
 import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
@@ -155,10 +154,6 @@ function PropDescription({ description }: { description: string }) {
   );
 }
 
-PropDescription.propTypes = {
-  description: PropTypes.string.isRequired,
-};
-
 interface PropertiesTableProps {
   properties: PropDescriptionParams[];
 }
@@ -277,13 +272,11 @@ export default function PropertiesTable(props: PropertiesTableProps) {
                   {signature && (
                     <div className="prop-table-signature">
                       <span className="prop-table-title">{t('api-docs.signature')}:</span>
-
                       <code
                         dangerouslySetInnerHTML={{
                           __html: signature,
                         }}
                       />
-
                       {signatureArgs && (
                         <div>
                           <ul>