[Slider] Set CSS writing-mode and update vertical slider docs

apps/pigment-css-next-app/src/app/material-ui/react-slider/page.tsx

@@ -17,7 +17,6 @@ import RangeSlider from '../../../../../../docs/data/material/components/slider/
 import SliderSizes from '../../../../../../docs/data/material/components/slider/SliderSizes';
 import TrackFalseSlider from '../../../../../../docs/data/material/components/slider/TrackFalseSlider';
 import TrackInvertedSlider from '../../../../../../docs/data/material/components/slider/TrackInvertedSlider';
-import VerticalAccessibleSlider from '../../../../../../docs/data/material/components/slider/VerticalAccessibleSlider';
 import VerticalSlider from '../../../../../../docs/data/material/components/slider/VerticalSlider';
 
 export default function Slider() {
@@ -125,12 +124,6 @@ export default function Slider() {
           <TrackInvertedSlider />
         </div>
       </section>
-      <section>
-        <h2> Vertical Accessible Slider</h2>
-        <div className="demo-container">
-          <VerticalAccessibleSlider />
-        </div>
-      </section>
       <section>
         <h2> Vertical Slider</h2>
         <div className="demo-container">

apps/pigment-css-vite-app/src/pages/material-ui/react-slider.tsx

@@ -17,7 +17,6 @@ import RangeSlider from '../../../../../docs/data/material/components/slider/Ran
 import SliderSizes from '../../../../../docs/data/material/components/slider/SliderSizes.tsx';
 import TrackFalseSlider from '../../../../../docs/data/material/components/slider/TrackFalseSlider.tsx';
 import TrackInvertedSlider from '../../../../../docs/data/material/components/slider/TrackInvertedSlider.tsx';
-import VerticalAccessibleSlider from '../../../../../docs/data/material/components/slider/VerticalAccessibleSlider.tsx';
 import VerticalSlider from '../../../../../docs/data/material/components/slider/VerticalSlider.tsx';
 
 export default function Slider() {
@@ -126,12 +125,6 @@ export default function Slider() {
           <TrackInvertedSlider />
         </div>
       </section>
-      <section>
-        <h2> Vertical Accessible Slider</h2>
-        <div className="demo-container">
-          <VerticalAccessibleSlider />
-        </div>
-      </section>
       <section>
         <h2> Vertical Slider</h2>
         <div className="demo-container">

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 (
     <Stack sx={{ height: 300 }} spacing={1} direction="row">
       <Slider
         aria-label="Temperature"
         orientation="vertical"
-        getAriaValueText={valuetext}
+        getAriaValueText={getAriaValueText}
         valueLabelDisplay="auto"
         defaultValue={30}
       />
@@ -45,11 +22,34 @@ export default function VerticalSlider() {
       <Slider
         getAriaLabel={() => 'Temperature'}
         orientation="vertical"
-        getAriaValueText={valuetext}
+        getAriaValueText={getAriaValueText}
         defaultValue={[20, 37]}
         valueLabelDisplay="auto"
         marks={marks}
       />
     </Stack>
   );
 }
+
+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',
+  },
+];

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 (
     <Stack sx={{ height: 300 }} spacing={1} direction="row">
       <Slider
         aria-label="Temperature"
         orientation="vertical"
-        getAriaValueText={valuetext}
+        getAriaValueText={getAriaValueText}
         valueLabelDisplay="auto"
         defaultValue={30}
       />
@@ -45,11 +22,34 @@ export default function VerticalSlider() {
       <Slider
         getAriaLabel={() => 'Temperature'}
         orientation="vertical"
-        getAriaValueText={valuetext}
+        getAriaValueText={getAriaValueText}
         defaultValue={[20, 37]}
         valueLabelDisplay="auto"
         marks={marks}
       />
     </Stack>
   );
 }
+
+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',
+  },
+];

docs/data/material/components/slider/slider.md

@@ -98,17 +98,23 @@
 
 ## 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 `<Slider orientation="vertical" />` 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` incorrectly for vertical sliders and exposes them as `'horizontal'` in the accessibility tree. ([Chromium issue #40736841](https://issues.chromium.org/issues/40736841))
+
+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:
 
-However, by applying `-webkit-appearance: slider-vertical;` keyboard navigation for horizontal keys (<kbd class="key">Arrow Left</kbd>, <kbd class="key">Arrow Right</kbd>) 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.
+```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
 

packages/mui-material/src/Slider/useSlider.ts

@@ -687,6 +687,11 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
     };
   };
 
+  let cssWritingMode: 'vertical-rl' | 'vertical-lr' | undefined;
+  if (orientation === 'vertical') {
+    cssWritingMode = isRtl ? 'vertical-rl' : 'vertical-lr';
+  }
+
   const getHiddenInputProps = <ExternalProps extends Record<string, unknown> = {}>(
     externalProps: ExternalProps = {} as ExternalProps,
   ): UseSliderHiddenInputProps<ExternalProps> => {
@@ -724,6 +729,7 @@ export function useSlider(parameters: UseSliderParameters): UseSliderReturnValue
         // So that VoiceOver's focus indicator matches the thumb's dimensions
         width: '100%',
         height: '100%',
+        writingMode: cssWritingMode,
       },
     };
   };

test/regressions/index.js

@@ -178,7 +178,6 @@ const blacklist = [
   'docs-components-skeleton/Facebook.png', // Flaky image loading
   'docs-components-skeleton/SkeletonChildren.png', // flaky image loading
   'docs-components-skeleton/YouTube.png', // Flaky image loading
-  'docs-components-slider/VerticalAccessibleSlider.png', // Redundant
   'docs-components-snackbars/ConsecutiveSnackbars.png', // Needs interaction
   'docs-components-snackbars/CustomizedSnackbars.png', // Redundant
   'docs-components-snackbars/DirectionSnackbar.png', // Needs interaction