From 5c830c31758a26fe08ba4a07ed453f6043f3e3dc Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Mon, 25 Nov 2024 15:14:10 +0800 Subject: [PATCH] Slider sets CSS writing-mode --- .../slider/VerticalAccessibleSlider.js | 28 ----------- .../slider/VerticalAccessibleSlider.tsx | 28 ----------- .../VerticalAccessibleSlider.tsx.preview | 12 ----- .../components/slider/VerticalSlider.js | 50 +++++++++---------- .../components/slider/VerticalSlider.tsx | 50 +++++++++---------- .../data/material/components/slider/slider.md | 19 ++++--- packages/mui-material/src/Slider/useSlider.ts | 8 +++ 7 files changed, 70 insertions(+), 125 deletions(-) delete mode 100644 docs/data/material/components/slider/VerticalAccessibleSlider.js delete mode 100644 docs/data/material/components/slider/VerticalAccessibleSlider.tsx delete mode 100644 docs/data/material/components/slider/VerticalAccessibleSlider.tsx.preview diff --git a/docs/data/material/components/slider/VerticalAccessibleSlider.js b/docs/data/material/components/slider/VerticalAccessibleSlider.js deleted file mode 100644 index e9892bcc838cdd..00000000000000 --- a/docs/data/material/components/slider/VerticalAccessibleSlider.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Slider from '@mui/material/Slider'; - -export default function VerticalAccessibleSlider() { - function preventHorizontalKeyboardNavigation(event) { - if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { - event.preventDefault(); - } - } - - return ( - - - - ); -} diff --git a/docs/data/material/components/slider/VerticalAccessibleSlider.tsx b/docs/data/material/components/slider/VerticalAccessibleSlider.tsx deleted file mode 100644 index bc66892e7f20b3..00000000000000 --- a/docs/data/material/components/slider/VerticalAccessibleSlider.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Slider from '@mui/material/Slider'; - -export default function VerticalAccessibleSlider() { - function preventHorizontalKeyboardNavigation(event: React.KeyboardEvent) { - if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { - event.preventDefault(); - } - } - - return ( - - - - ); -} diff --git a/docs/data/material/components/slider/VerticalAccessibleSlider.tsx.preview b/docs/data/material/components/slider/VerticalAccessibleSlider.tsx.preview deleted file mode 100644 index 2f23a0596d7eee..00000000000000 --- a/docs/data/material/components/slider/VerticalAccessibleSlider.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/slider/VerticalSlider.js b/docs/data/material/components/slider/VerticalSlider.js index 502b71bdb8bb65..5ae94100d85d93 100644 --- a/docs/data/material/components/slider/VerticalSlider.js +++ b/docs/data/material/components/slider/VerticalSlider.js @@ -2,36 +2,13 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; import Slider from '@mui/material/Slider'; -function valuetext(value) { - return `${value}°C`; -} - -const marks = [ - { - value: 0, - label: '0°C', - }, - { - value: 20, - label: '20°C', - }, - { - value: 37, - label: '37°C', - }, - { - value: 100, - label: '100°C', - }, -]; - export default function VerticalSlider() { return ( @@ -45,7 +22,7 @@ export default function VerticalSlider() { 'Temperature'} orientation="vertical" - getAriaValueText={valuetext} + getAriaValueText={getAriaValueText} defaultValue={[20, 37]} valueLabelDisplay="auto" marks={marks} @@ -53,3 +30,26 @@ export default function VerticalSlider() { ); } + +function getAriaValueText(value) { + return `${value}°C`; +} + +const marks = [ + { + value: 0, + label: '0°C', + }, + { + value: 20, + label: '20°C', + }, + { + value: 37, + label: '37°C', + }, + { + value: 100, + label: '100°C', + }, +]; diff --git a/docs/data/material/components/slider/VerticalSlider.tsx b/docs/data/material/components/slider/VerticalSlider.tsx index 2f4e4ffa167ca8..743b7103b07703 100644 --- a/docs/data/material/components/slider/VerticalSlider.tsx +++ b/docs/data/material/components/slider/VerticalSlider.tsx @@ -2,36 +2,13 @@ import * as React from 'react'; import Stack from '@mui/material/Stack'; import Slider from '@mui/material/Slider'; -function valuetext(value: number) { - return `${value}°C`; -} - -const marks = [ - { - value: 0, - label: '0°C', - }, - { - value: 20, - label: '20°C', - }, - { - value: 37, - label: '37°C', - }, - { - value: 100, - label: '100°C', - }, -]; - export default function VerticalSlider() { return ( @@ -45,7 +22,7 @@ export default function VerticalSlider() { 'Temperature'} orientation="vertical" - getAriaValueText={valuetext} + getAriaValueText={getAriaValueText} defaultValue={[20, 37]} valueLabelDisplay="auto" marks={marks} @@ -53,3 +30,26 @@ export default function VerticalSlider() { ); } + +function getAriaValueText(value: number) { + return `${value}°C`; +} + +const marks = [ + { + value: 0, + label: '0°C', + }, + { + value: 20, + label: '20°C', + }, + { + value: 37, + label: '37°C', + }, + { + value: 100, + label: '100°C', + }, +]; diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md index aa6afc620b1e17..42824d7f6e7391 100644 --- a/docs/data/material/components/slider/slider.md +++ b/docs/data/material/components/slider/slider.md @@ -98,17 +98,22 @@ You can learn more about this in the [overrides documentation page](/material-ui ## Vertical sliders +Set the `orientation` prop to `"vertical"` to create vertical sliders. The thumb will track vertical movement instead of horizontal movement. + {{"demo": "VerticalSlider.js"}} -**WARNING**: Chrome, Safari and newer Edge versions that is any browser based on WebKit exposes `` as horizontal ([chromium issue #40736841](https://issues.chromium.org/issues/40736841)). -By applying `-webkit-appearance: slider-vertical;` the slider is exposed as vertical. +:::warning +Chrome versions below 124 implements `aria-orientation` incorrrectly for vertical sliders and exposes them as `'horizontal'` in the accessibility tree. ([Chromium issue #40736841](https://issues.chromium.org/issues/40736841)) -However, by applying `-webkit-appearance: slider-vertical;` keyboard navigation for horizontal keys (Arrow Left, Arrow Right) is reversed ([chromium issue #40739626](https://issues.chromium.org/issues/40739626)). -Usually, up and right should increase and left and down should decrease the value. -If you apply `-webkit-appearance` you could prevent keyboard navigation for horizontal arrow keys for a truly vertical slider. -This might be less confusing to users compared to a change in direction. +The `-webkit-appearance: slider-vertical` CSS property can be used to correct this for these older versions, with the trade-off of causing a console warning in newer Chrome versions: +```css +.MuiSlider-thumb > input { + -webkit-appearance: slider-vertical; +} +``` -{{"demo": "VerticalAccessibleSlider.js"}} +For Chrome 124 and newer, the slider includes 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. +::: ## Marks placement diff --git a/packages/mui-material/src/Slider/useSlider.ts b/packages/mui-material/src/Slider/useSlider.ts index 0cd7ba016c3387..3c3bcf4f4bb7c2 100644 --- a/packages/mui-material/src/Slider/useSlider.ts +++ b/packages/mui-material/src/Slider/useSlider.ts @@ -687,6 +687,13 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue }; }; + const cssWritingMode = React.useMemo(() => { + if (orientation === 'vertical') { + return isRtl ? 'vertical-rl' : 'vertical-lr'; + } + return undefined; + }, [isRtl, orientation]); + const getHiddenInputProps = = {}>( externalProps: ExternalProps = {} as ExternalProps, ): UseSliderHiddenInputProps => { @@ -724,6 +731,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue // So that VoiceOver's focus indicator matches the thumb's dimensions width: '100%', height: '100%', + writingMode: cssWritingMode, }, }; };