From 5dadbbccb4e81c828b218283f35a522a23fe1014 Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Thu, 26 Sep 2024 09:53:21 +0200 Subject: [PATCH] Apply CSS writing mode on input element --- docs/data/components/slider/slider.mdx | 12 ++++++++++++ packages/mui-base/src/Slider/Thumb/useSliderThumb.ts | 5 +++++ 2 files changed, 17 insertions(+) diff --git a/docs/data/components/slider/slider.mdx b/docs/data/components/slider/slider.mdx index f9c106aff6..3d60a072f5 100644 --- a/docs/data/components/slider/slider.mdx +++ b/docs/data/components/slider/slider.mdx @@ -171,6 +171,18 @@ To create vertical sliders, set the `orientation` prop to `"vertical"`. This wil + + Chrome versions below 124 does not implement `aria-orientation` correctly for vertical sliders ([Chromium issue #40736841](https://issues.chromium.org/issues/40736841)), and exposes them in the accessibility tree as `horizontal`. + + The `-webkit-appearance: slider-vertical` CSS property can be used to correct this, though it will trigger a console warning in newer Chrome versions: + ```css + .MySlider-thumb > input { + -webkit-appearance: slider-vertical; + } + ``` + The `Slider.Thumb` subcomponent automatically sets the CSS [`writing-mode`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls#range_sliders_meters_and_progress_bars) property that fixes this bug for Chrome 124 and newer. + + ## RTL Set the `direction` prop to `'rtl'` to change the slider's direction for right-to-left languages: diff --git a/packages/mui-base/src/Slider/Thumb/useSliderThumb.ts b/packages/mui-base/src/Slider/Thumb/useSliderThumb.ts index 9cb1f4c160..1caaf8d11e 100644 --- a/packages/mui-base/src/Slider/Thumb/useSliderThumb.ts +++ b/packages/mui-base/src/Slider/Thumb/useSliderThumb.ts @@ -233,6 +233,10 @@ export function useSliderThumb(parameters: useSliderThumb.Parameters): useSlider const getThumbInputProps: useSliderThumb.ReturnValue['getThumbInputProps'] = React.useCallback( (externalProps = {}) => { + let cssWritingMode; + if (orientation === 'vertical') { + cssWritingMode = isRtl ? 'vertical-rl' : 'vertical-lr'; + } return mergeReactProps(getInputValidationProps(externalProps), { 'aria-label': getAriaLabel ? getAriaLabel(index) : ariaLabel, 'aria-labelledby': ariaLabelledby, @@ -261,6 +265,7 @@ export function useSliderThumb(parameters: useSliderThumb.Parameters): useSlider // So that VoiceOver's focus indicator matches the thumb's dimensions width: '100%', height: '100%', + writingMode: cssWritingMode, }, tabIndex: -1, type: 'range',