[code-infra] Enable mui/no-presentation-role lint rule

Janpot · Janpot · commit f71441580f55 · 2026-05-06T16:56:41.000+02:00
diff --git a/docs/data/material/components/app-bar/BackToTop.js b/docs/data/material/components/app-bar/BackToTop.js
@@ -38,7 +38,7 @@ function ScrollTop(props) {
     <Fade in={trigger}>
       <Box
         onClick={handleClick}
-        role="presentation"
+        role="none"
         sx={{ position: 'fixed', bottom: 16, right: 16 }}
       >
         {children}
diff --git a/docs/data/material/components/app-bar/BackToTop.tsx b/docs/data/material/components/app-bar/BackToTop.tsx
@@ -46,7 +46,7 @@ function ScrollTop(props: Props) {
     <Fade in={trigger}>
       <Box
         onClick={handleClick}
-        role="presentation"
+        role="none"
         sx={{ position: 'fixed', bottom: 16, right: 16 }}
       >
         {children}
diff --git a/docs/data/material/components/autocomplete/InfiniteLoading.js b/docs/data/material/components/autocomplete/InfiniteLoading.js
@@ -103,7 +103,7 @@ const VirtualListbox = React.forwardRef(
         {/* This spacer gives the <ul> its scroll height without nesting a div inside the listbox. */}
         <li
           aria-hidden
-          role="presentation"
+          role="none"
           style={{
             height: virtualizer.getTotalSize(),
             pointerEvents: 'none',
diff --git a/docs/data/material/components/autocomplete/InfiniteLoading.tsx b/docs/data/material/components/autocomplete/InfiniteLoading.tsx
@@ -117,7 +117,7 @@ const VirtualListbox = React.forwardRef<HTMLUListElement, VirtualListboxProps>(
         {/* This spacer gives the <ul> its scroll height without nesting a div inside the listbox. */}
         <li
           aria-hidden
-          role="presentation"
+          role="none"
           style={{
             height: virtualizer.getTotalSize(),
             pointerEvents: 'none',
diff --git a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.js b/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.js
@@ -9,7 +9,7 @@ function handleClick(event) {
 
 export default function ActiveLastBreadcrumb() {
   return (
-    <div role="presentation" onClick={handleClick}>
+    <div role="none" onClick={handleClick}>
       <Breadcrumbs aria-label="breadcrumb">
         <Link underline="hover" color="inherit" href="/">
           MUI
diff --git a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx b/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx
@@ -9,7 +9,7 @@ function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
 
 export default function ActiveLastBreadcrumb() {
   return (
-    <div role="presentation" onClick={handleClick}>
+    <div role="none" onClick={handleClick}>
       <Breadcrumbs aria-label="breadcrumb">
         <Link underline="hover" color="inherit" href="/">
           MUI
diff --git a/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.js b/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.js
@@ -10,7 +10,7 @@ function handleClick(event) {
 
 export default function BasicBreadcrumbs() {
   return (
-    <div role="presentation" onClick={handleClick}>
+    <div role="none" onClick={handleClick}>
       <Breadcrumbs aria-label="breadcrumb">
         <Link underline="hover" color="inherit" href="/">
           MUI
diff --git a/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx b/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx
@@ -10,7 +10,7 @@ function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
 
 export default function BasicBreadcrumbs() {
   return (
-    <div role="presentation" onClick={handleClick}>
+    <div role="none" onClick={handleClick}>
       <Breadcrumbs aria-label="breadcrumb">
         <Link underline="hover" color="inherit" href="/">
           MUI
diff --git a/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.js b/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.js
@@ -10,7 +10,7 @@ function handleClick(event) {
 
 export default function CollapsedBreadcrumbs() {
   return (
-    <div role="presentation" onClick={handleClick}>
+    <div role="none" onClick={handleClick}>
       <Breadcrumbs maxItems={2} aria-label="breadcrumb">
         <Link underline="hover" color="inherit" href="#">
           Home
diff --git a/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx b/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx
@@ -10,7 +10,7 @@ function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
 
 export default function CollapsedBreadcrumbs() {
   return (
-    <div role="presentation" onClick={handleClick}>
+    <div role="none" onClick={handleClick}>
       <Breadcrumbs maxItems={2} aria-label="breadcrumb">
         <Link underline="hover" color="inherit" href="#">
           Home
diff --git a/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.js b/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.js
@@ -37,7 +37,7 @@ function handleClick(event) {
 
 export default function CustomizedBreadcrumbs() {
   return (
-    <div role="presentation" onClick={handleClick}>
+    <div role="none" onClick={handleClick}>
       <Breadcrumbs aria-label="breadcrumb">
         <StyledBreadcrumb
           component="a"
diff --git a/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx b/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx
@@ -37,7 +37,7 @@ function handleClick(event: React.MouseEvent<Element, MouseEvent>) {
 
 export default function CustomizedBreadcrumbs() {
   return (
-    <div role="presentation" onClick={handleClick}>
+    <div role="none" onClick={handleClick}>
       <Breadcrumbs aria-label="breadcrumb">
         <StyledBreadcrumb
           component="a"
diff --git a/docs/data/material/components/breadcrumbs/IconBreadcrumbs.js b/docs/data/material/components/breadcrumbs/IconBreadcrumbs.js
@@ -13,7 +13,7 @@ function handleClick(event) {
 
 export default function IconBreadcrumbs() {
   return (
-    <div role="presentation" onClick={handleClick}>
+    <div role="none" onClick={handleClick}>
       <Breadcrumbs aria-label="breadcrumb">
         <Link
           underline="hover"
diff --git a/docs/data/material/components/breadcrumbs/IconBreadcrumbs.tsx b/docs/data/material/components/breadcrumbs/IconBreadcrumbs.tsx
@@ -13,7 +13,7 @@ function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
 
 export default function IconBreadcrumbs() {
   return (
-    <div role="presentation" onClick={handleClick}>
+    <div role="none" onClick={handleClick}>
       <Breadcrumbs aria-label="breadcrumb">
         <Link
           underline="hover"
diff --git a/docs/data/material/components/drawers/AnchorTemporaryDrawer.js b/docs/data/material/components/drawers/AnchorTemporaryDrawer.js
@@ -30,7 +30,7 @@ export default function AnchorTemporaryDrawer() {
   const list = (anchor) => (
     <Box
       sx={{ width: anchor === 'top' || anchor === 'bottom' ? 'auto' : 250 }}
-      role="presentation"
+      role="none"
       onClick={toggleDrawer(anchor, false)}
       onKeyDown={toggleDrawer(anchor, false)}
     >
diff --git a/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx b/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx
@@ -38,7 +38,7 @@ export default function AnchorTemporaryDrawer() {
   const list = (anchor: Anchor) => (
     <Box
       sx={{ width: anchor === 'top' || anchor === 'bottom' ? 'auto' : 250 }}
-      role="presentation"
+      role="none"
       onClick={toggleDrawer(anchor, false)}
       onKeyDown={toggleDrawer(anchor, false)}
     >
diff --git a/docs/data/material/components/drawers/SwipeableTemporaryDrawer.js b/docs/data/material/components/drawers/SwipeableTemporaryDrawer.js
@@ -34,7 +34,7 @@ export default function SwipeableTemporaryDrawer() {
   const list = (anchor) => (
     <Box
       sx={{ width: anchor === 'top' || anchor === 'bottom' ? 'auto' : 250 }}
-      role="presentation"
+      role="none"
       onClick={toggleDrawer(anchor, false)}
       onKeyDown={toggleDrawer(anchor, false)}
     >
diff --git a/docs/data/material/components/drawers/SwipeableTemporaryDrawer.tsx b/docs/data/material/components/drawers/SwipeableTemporaryDrawer.tsx
@@ -39,7 +39,7 @@ export default function SwipeableTemporaryDrawer() {
   const list = (anchor: Anchor) => (
     <Box
       sx={{ width: anchor === 'top' || anchor === 'bottom' ? 'auto' : 250 }}
-      role="presentation"
+      role="none"
       onClick={toggleDrawer(anchor, false)}
       onKeyDown={toggleDrawer(anchor, false)}
     >
diff --git a/docs/data/material/components/drawers/TemporaryDrawer.js b/docs/data/material/components/drawers/TemporaryDrawer.js
@@ -19,7 +19,7 @@ export default function TemporaryDrawer() {
   };
 
   const DrawerList = (
-    <Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
+    <Box sx={{ width: 250 }} role="none" onClick={toggleDrawer(false)}>
       <List>
         {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
           <ListItem key={text} disablePadding>
diff --git a/docs/data/material/components/drawers/TemporaryDrawer.tsx b/docs/data/material/components/drawers/TemporaryDrawer.tsx
@@ -19,7 +19,7 @@ export default function TemporaryDrawer() {
   };
 
   const DrawerList = (
-    <Box sx={{ width: 250 }} role="presentation" onClick={toggleDrawer(false)}>
+    <Box sx={{ width: 250 }} role="none" onClick={toggleDrawer(false)}>
       <List>
         {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
           <ListItem key={text} disablePadding>
diff --git a/docs/data/material/getting-started/templates/checkout/components/InfoMobile.js b/docs/data/material/getting-started/templates/checkout/components/InfoMobile.js
@@ -16,7 +16,7 @@ function InfoMobile({ totalPrice }) {
   };
 
   const DrawerList = (
-    <Box sx={{ width: 'auto', px: 3, pb: 3, pt: 8 }} role="presentation">
+    <Box sx={{ width: 'auto', px: 3, pb: 3, pt: 8 }} role="none">
       <IconButton
         onClick={toggleDrawer(false)}
         sx={{ position: 'absolute', right: 8, top: 8 }}
diff --git a/docs/data/material/getting-started/templates/checkout/components/InfoMobile.tsx b/docs/data/material/getting-started/templates/checkout/components/InfoMobile.tsx
@@ -19,7 +19,7 @@ export default function InfoMobile({ totalPrice }: InfoProps) {
   };
 
   const DrawerList = (
-    <Box sx={{ width: 'auto', px: 3, pb: 3, pt: 8 }} role="presentation">
+    <Box sx={{ width: 'auto', px: 3, pb: 3, pt: 8 }} role="none">
       <IconButton
         onClick={toggleDrawer(false)}
         sx={{ position: 'absolute', right: 8, top: 8 }}
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -98,6 +98,7 @@ export default defineConfig(
       'react-hooks/purity': 'off',
 
       'mui/no-guarded-throw': 'error',
+      'mui/no-presentation-role': 'error',
     },
   },
   ...['mui-material', 'mui-system', 'mui-utils', 'mui-lab', 'mui-utils', 'mui-styled-engine'].map(
@@ -215,6 +216,10 @@ export default defineConfig(
     },
     rules: {
       'consistent-default-export-name/default-export-match-filename': ['error'],
+      // `role="none"` is an alias for `role="presentation"`, but aria-query treats
+      // them differently and reports `aria-hidden` as unsupported on `none`.
+      // See https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/1090
+      'jsx-a11y/role-supports-aria-props': 'off',
     },
   },
   // Docs end
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -801,7 +801,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
               <AutocompleteNoOptions
                 className={classes.noOptions}
                 ownerState={ownerState}
-                role="presentation"
+                role="none"
                 onMouseDown={(event) => {
                   // Prevent input blur when interacting with the "no options" content
                   event.preventDefault();
diff --git a/packages/mui-material/src/Divider/Divider.test.js b/packages/mui-material/src/Divider/Divider.test.js
@@ -172,7 +172,7 @@ describe('<Divider />', () => {
 
     it('overrides the computed role with the provided one', () => {
       // presentation is the only valid aria role
-      render(<Divider role="presentation" data-testid="divider" />);
+      render(<Divider role="none" data-testid="divider" />);
       expect(screen.queryByRole('separator')).to.equal(null);
       expect(screen.getByTestId('divider')).to.have.attribute('role', 'presentation');
       expect(screen.getByTestId('divider')).not.to.have.attribute('aria-orientation');

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@ function ScrollTop(props) {`
`38`	`38`	`<Fade in={trigger}>`
`39`	`39`	`<Box`
`40`	`40`	`onClick={handleClick}`
`41`		`- role="presentation"`
	`41`	`+ role="none"`
`42`	`42`	`sx={{ position: 'fixed', bottom: 16, right: 16 }}`
`43`	`43`	`>`
`44`	`44`	`{children}`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ function ScrollTop(props: Props) {`
`46`	`46`	`<Fade in={trigger}>`
`47`	`47`	`<Box`
`48`	`48`	`onClick={handleClick}`
`49`		`- role="presentation"`
	`49`	`+ role="none"`
`50`	`50`	`sx={{ position: 'fixed', bottom: 16, right: 16 }}`
`51`	`51`	`>`
`52`	`52`	`{children}`