diff --git a/packages/mui-base/src/useSelect/useSelect.ts b/packages/mui-base/src/useSelect/useSelect.ts index d283da8b9055b5..2997e91244a704 100644 --- 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( selectedOption: SelectOption | SelectOption[] | null, ) {