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 index 97fb8108c1cb09..19c93224b7a523 100644 --- 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() { -
-

Vertical Accessible Slider

-
- -
-

Vertical Slider

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 index 963612339e2faf..a3bfac23c4c197 100644 --- 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() {
-
-

Vertical Accessible Slider

-
- -
-

Vertical Slider

diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md index 42824d7f6e7391..c12620cc4b1e19 100644 --- a/docs/data/material/components/slider/slider.md +++ b/docs/data/material/components/slider/slider.md @@ -106,6 +106,7 @@ Set the `orientation` prop to `"vertical"` to create vertical sliders. The thumb 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)) 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; diff --git a/test/regressions/index.js b/test/regressions/index.js index 8d377681dfb032..11618772af4aba 100644 --- a/test/regressions/index.js +++ b/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