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

docs/src/app/(docs)/react/components/autocomplete/demos/grid/css-modules/index.tsx

@@ -80,7 +80,7 @@ export default function ExampleEmojiPicker() {
                       <Autocomplete.GroupLabel className={styles.GroupLabel}>
                         {group.label}
                       </Autocomplete.GroupLabel>
-                      <div className={styles.Grid} role="presentation">
+                      <div className={styles.Grid} role="none">
                         {chunkArray(group.items, COLUMNS).map((row, rowIdx) => (
                           <Autocomplete.Row key={rowIdx} className={styles.Row}>
                             {row.map((rowItem) => (

docs/src/app/(docs)/react/components/autocomplete/demos/grid/tailwind/index.tsx

@@ -80,7 +80,7 @@ export default function ExampleEmojiPicker() {
                       <Autocomplete.GroupLabel className="sticky top-0 z-[1] m-0 w-full border-b border-gray-100 bg-[canvas] px-4 pb-1 pt-2 text-[0.75rem] font-bold uppercase tracking-wide text-gray-600">
                         {group.label}
                       </Autocomplete.GroupLabel>
-                      <div className="p-1" role="presentation">
+                      <div className="p-1" role="none">
                         {chunkArray(group.items, COLUMNS).map((row, rowIdx) => (
                           <Autocomplete.Row key={rowIdx} className="grid grid-cols-5">
                             {row.map((rowItem) => (

docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/css-modules/index.tsx

@@ -92,16 +92,12 @@ function VirtualizedList({
 
   return (
     <div
-      role="presentation"
+      role="none"
       ref={handleScrollElementRef}
       className={styles.Scroller}
       style={{ '--total-size': `${totalSize}px` } as React.CSSProperties}
     >
-      <div
-        role="presentation"
-        className={styles.VirtualizedPlaceholder}
-        style={{ height: totalSize }}
-      >
+      <div role="none" className={styles.VirtualizedPlaceholder} style={{ height: totalSize }}>
         {virtualizer.getVirtualItems().map((virtualItem) => {
           const item = filteredItems[virtualItem.index];
           if (!item) {

docs/src/app/(docs)/react/components/autocomplete/demos/virtualized/tailwind/index.tsx

@@ -93,12 +93,12 @@ function VirtualizedList({
 
   return (
     <div
-      role="presentation"
+      role="none"
       ref={handleScrollElementRef}
       className="h-[min(22rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-p-2"
       style={{ '--total-size': `${totalSize}px` } as React.CSSProperties}
     >
-      <div role="presentation" className="relative w-full" style={{ height: totalSize }}>
+      <div role="none" className="relative w-full" style={{ height: totalSize }}>
         {virtualizer.getVirtualItems().map((virtualItem) => {
           const item = filteredItems[virtualItem.index];
           if (!item) {

docs/src/app/(docs)/react/components/combobox/demos/virtualized/css-modules/index.tsx

@@ -91,16 +91,12 @@ function VirtualizedList({
 
   return (
     <div
-      role="presentation"
+      role="none"
       ref={handleScrollElementRef}
       className={styles.Scroller}
       style={{ '--total-size': `${totalSize}px` } as React.CSSProperties}
     >
-      <div
-        role="presentation"
-        className={styles.VirtualizedPlaceholder}
-        style={{ height: totalSize }}
-      >
+      <div role="none" className={styles.VirtualizedPlaceholder} style={{ height: totalSize }}>
         {virtualizer.getVirtualItems().map((virtualItem) => {
           const item = filteredItems[virtualItem.index];
           if (!item) {

docs/src/app/(docs)/react/components/combobox/demos/virtualized/tailwind/index.tsx

@@ -98,12 +98,12 @@ function VirtualizedList({
 
   return (
     <div
-      role="presentation"
+      role="none"
       ref={handleScrollElementRef}
       className="h-[min(22rem,var(--total-size))] max-h-[var(--available-height)] overflow-auto overscroll-contain scroll-p-2"
       style={{ '--total-size': `${totalSize}px` } as React.CSSProperties}
     >
-      <div role="presentation" className="relative w-full" style={{ height: totalSize }}>
+      <div role="none" className="relative w-full" style={{ height: totalSize }}>
         {virtualizer.getVirtualItems().map((virtualItem) => {
           const item = filteredItems[virtualItem.index];
           if (!item) {

docs/src/app/(private)/experiments/navigation-menu.tsx

@@ -218,7 +218,7 @@ export default function ExampleNavigationMenu() {
               </NavigationMenu.Icon>
             </NavigationMenu.Trigger>
             <NavigationMenu.Content className={styles.Content}>
-              <table role="presentation">
+              <table role="none">
                 <tbody>
                   <tr>
                     <td>

eslint.config.mjs

@@ -97,6 +97,7 @@ export default defineConfig(
       // This prevents us from creating components like `<h1 {...props} />`
       'jsx-a11y/heading-has-content': 'off',
       'jsx-a11y/anchor-has-content': 'off',
+      'mui/no-presentation-role': 'error',
 
       // This rule doesn't recognise <label> wrapped around custom controls
       'jsx-a11y/label-has-associated-control': 'off',
@@ -153,6 +154,10 @@ export default defineConfig(
           patterns: NO_RESTRICTED_IMPORTS_PATTERNS_DEEPLY_NESTED,
         },
       ],
+      // `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',
     },
   },
   {

packages/react/src/alert-dialog/root/AlertDialogRoot.test.tsx

@@ -165,7 +165,7 @@ describe('<AlertDialog.Root />', () => {
         </AlertDialog.Root>,
       );
 
-      await user.click(screen.getByRole('presentation', { hidden: true }));
+      await user.click(screen.getByRole('none', { hidden: true }));
 
       expect(handleOpenChange.mock.calls.length).toBe(0);
       expect(screen.queryByRole('alertdialog')).not.toBe(null);
@@ -702,7 +702,7 @@ describe('<AlertDialog.Root />', () => {
 
       expect(await screen.findByRole('alertdialog')).not.toBe(null);
 
-      const backdrop = await screen.findByRole('presentation', { hidden: true });
+      const backdrop = await screen.findByRole('none', { hidden: true });
       await user.click(backdrop);
 
       await waitFor(() => {
@@ -838,7 +838,7 @@ describe('<AlertDialog.Root />', () => {
         </AlertDialog.Root>,
       );
 
-      expect(screen.getByRole('presentation', { hidden: true })).not.toBe(null);
+      expect(screen.getByRole('none', { hidden: true })).not.toBe(null);
     });
   });
 

packages/react/src/dialog/root/DialogRoot.test.tsx

@@ -189,7 +189,7 @@ describe('<Dialog.Root />', () => {
           <TestDialog rootProps={{ defaultOpen: true, onOpenChange: handleOpenChange }} />,
         );
 
-        await user.click(screen.getByRole('presentation', { hidden: true }));
+        await user.click(screen.getByRole('none', { hidden: true }));
 
         expect(handleOpenChange.mock.calls.length).toBe(1);
         expect(handleOpenChange.mock.calls[0][1].reason).toBe(REASONS.outsidePress);
@@ -328,13 +328,13 @@ describe('<Dialog.Root />', () => {
       it('makes other interactive elements on the page inert when a modal dialog is open', async () => {
         await render(<TestDialog rootProps={{ defaultOpen: true, modal: true }} />);
 
-        expect(screen.getByRole('presentation', { hidden: true })).not.toBe(null);
+        expect(screen.getByRole('none', { hidden: true })).not.toBe(null);
       });
 
       it('does not make other interactive elements on the page inert when a non-modal dialog is open', async () => {
         await render(<TestDialog rootProps={{ defaultOpen: true, modal: false }} />);
 
-        expect(screen.queryByRole('presentation')).toBe(null);
+        expect(screen.queryByRole('none')).toBe(null);
       });
     });
 
@@ -410,7 +410,7 @@ describe('<Dialog.Root />', () => {
           />,
         );
 
-        const internalBackdrop = screen.getByRole('presentation', { hidden: true });
+        const internalBackdrop = screen.getByRole('none', { hidden: true });
 
         fireEvent.mouseDown(internalBackdrop);
         expect(screen.queryByRole('dialog')).not.toBe(null);
@@ -615,7 +615,7 @@ describe('<Dialog.Root />', () => {
         // focus guard -> internal backdrop
         expect(popup.previousElementSibling?.previousElementSibling).toHaveAttribute(
           'role',
-          'presentation',
+          'none',
         );
       });
 
@@ -731,7 +731,7 @@ describe('<Dialog.Root />', () => {
       const nestedButton2 = screen.getByRole('button', { name: 'Open nested 2' });
       fireEvent.click(nestedButton2);
 
-      const backdrops = Array.from(document.querySelectorAll('[role="presentation"]'));
+      const backdrops = Array.from(document.querySelectorAll('[role="none"]'));
       fireEvent.click(backdrops[backdrops.length - 1]);
 
       await waitFor(() => {

packages/react/src/menu/root/MenuRoot.test.tsx

@@ -1203,7 +1203,7 @@ describe('<Menu.Root />', () => {
 
         const positioner = screen.getByTestId('menu-positioner');
 
-        expect(positioner.previousElementSibling).toHaveAttribute('role', 'presentation');
+        expect(positioner.previousElementSibling).toHaveAttribute('role', 'none');
       });
 
       it('should not render an internal backdrop when `false`', async () => {
@@ -1860,7 +1860,7 @@ describe('<Menu.Root />', () => {
           fireEvent.click(trigger);
 
           await flushMicrotasks();
-          expect(positioner.previousElementSibling).toHaveAttribute('role', 'presentation');
+          expect(positioner.previousElementSibling).toHaveAttribute('role', 'none');
         });
       });
     });

packages/react/src/meter/root/MeterRoot.tsx

@@ -50,7 +50,7 @@ export const MeterRoot = React.forwardRef(function MeterRoot(
     children: (
       <React.Fragment>
         {children}
-        <span role="presentation" style={visuallyHidden}>
+        <span role="none" style={visuallyHidden}>
           {/* force NVDA to read the label https://github.com/mui/base-ui/issues/4184 */}x
         </span>
       </React.Fragment>

packages/react/src/popover/root/PopoverRoot.test.tsx

@@ -882,7 +882,7 @@ describe('<Popover.Root />', () => {
           />,
         );
 
-        const internalBackdrop = document.querySelector('[role="presentation"]') as HTMLElement;
+        const internalBackdrop = document.querySelector('[role="none"]') as HTMLElement;
 
         fireEvent.mouseDown(internalBackdrop);
         expect(screen.queryByRole('dialog')).not.toBe(null);
@@ -1163,7 +1163,7 @@ describe('<Popover.Root />', () => {
 
         const positioner = screen.getByTestId('positioner');
 
-        expect(positioner.previousElementSibling).toHaveAttribute('role', 'presentation');
+        expect(positioner.previousElementSibling).toHaveAttribute('role', 'none');
       });
 
       it('should only render focus guards inside the popup when `true`', async () => {
@@ -1271,7 +1271,7 @@ describe('<Popover.Root />', () => {
 
           await flushMicrotasks();
 
-          expect(positioner.previousElementSibling).toHaveAttribute('role', 'presentation');
+          expect(positioner.previousElementSibling).toHaveAttribute('role', 'none');
         });
 
         it('reopens on hover after an impatient click is followed by a close button press', async () => {

packages/react/src/progress/root/ProgressRoot.tsx

@@ -62,7 +62,7 @@ export const ProgressRoot = React.forwardRef(function ProgressRoot(
     children: (
       <React.Fragment>
         {children}
-        <span role="presentation" style={visuallyHidden}>
+        <span role="none" style={visuallyHidden}>
           {/* force NVDA to read the label https://github.com/mui/base-ui/issues/4184 */}x
         </span>
       </React.Fragment>

packages/react/src/select/root/SelectRoot.test.tsx

@@ -761,7 +761,7 @@ describe('<Select.Root />', () => {
 
       const positioner = screen.getByTestId('positioner');
 
-      expect(positioner.previousElementSibling).toHaveAttribute('role', 'presentation');
+      expect(positioner.previousElementSibling).toHaveAttribute('role', 'none');
     });
 
     it('should not render an internal backdrop when `false`', async () => {

packages/react/src/utils/InternalBackdrop.tsx

@@ -18,7 +18,7 @@ export const InternalBackdrop = React.forwardRef(function InternalBackdrop(
   return (
     <div
       ref={ref}
-      role="presentation"
+      role="none"
       // Ensures Floating UI's outside press detection runs, as it considers
       // it an element that existed when the popup rendered.
       data-base-ui-inert=""