[base] Fix screen-reader css to avoid scrollbar

Closes #40565
mui · Jan 15, 2024 · 1aeeea0 · 1aeeea0
1 parent 9d7a370
commit 1aeeea0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 20 deletions.
diff --git a/packages/mui-base/src/useSelect/useSelect.test.tsx b/packages/mui-base/src/useSelect/useSelect.test.tsx
@@ -41,16 +41,15 @@ describe('useSelect', () => {
         required: true,
         value: 'b',
         style: {
-          clip: 'rect(1px, 1px, 1px, 1px)',
-          clipPath: 'inset(50%)',
+          border: 0,
+          clip: 'rect(0 0 0 0)',
           height: '1px',
-          width: '1px',
-          margin: '-1px',
+          margin: -1,
           overflow: 'hidden',
           padding: 0,
           position: 'absolute',
-          left: '50%',
-          bottom: 0,
+          whiteSpace: 'nowrap',
+          width: '1px',
         },
       });
     });

diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts
@@ -4,6 +4,7 @@ import {
   unstable_useForkRef as useForkRef,
   unstable_useId as useId,
   unstable_useEnhancedEffect as useEnhancedEffect,
+  visuallyHidden as visuallyHiddenStyle,
 } from '@mui/utils';
 import { useButton } from '../useButton';
 import {
@@ -29,20 +30,6 @@ import { selectReducer } from './selectReducer';
 import { combineHooksSlotProps } from '../utils/combineHooksSlotProps';
 import { MuiCancellableEvent } from '../utils/MuiCancellableEvent';
 
-// visually hidden style based on https://webaim.org/techniques/css/invisiblecontent/
-const visuallyHiddenStyle: React.CSSProperties = {
-  clip: 'rect(1px, 1px, 1px, 1px)',
-  clipPath: 'inset(50%)',
-  height: '1px',
-  width: '1px',
-  margin: '-1px',
-  overflow: 'hidden',
-  padding: 0,
-  position: 'absolute',
-  left: '50%',
-  bottom: 0, // to display the native browser validation error at the bottom of the Select.
-};
-
 function defaultFormValueProvider<OptionValue>(
   selectedOption: SelectOption<OptionValue> | SelectOption<OptionValue>[] | null,
 ) {