[material-ui][Slider] Set CSS writing-mode and update vertical slid…

…er docs (#44537)
mui · Dec 10, 2024 · 23dc9a2 · 23dc9a2
1 parent 76f5438
commit 23dc9a2
Show file tree

Hide file tree

Showing 11 changed files with 394 additions and 190 deletions.
diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-slider/page.tsx b/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">

diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-slider.tsx b/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">

diff --git a/docs/data/material/components/slider/VerticalAccessibleSlider.js b/docs/data/material/components/slider/VerticalAccessibleSlider.js
diff --git a/docs/data/material/components/slider/VerticalAccessibleSlider.tsx b/docs/data/material/components/slider/VerticalAccessibleSlider.tsx
diff --git a/docs/data/material/components/slider/VerticalAccessibleSlider.tsx.preview b/docs/data/material/components/slider/VerticalAccessibleSlider.tsx.preview
diff --git 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 (
     <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',
+  },
+];
diff --git 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 (
     <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',
+  },
+];
diff --git 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 `<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 implement `aria-orientation` incorrectly for vertical sliders and expose 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"}}
+:::
 
 ## Marks placement