[slider] Vertical slider incorrectly exposed as horizontal in the accessibility tree in Chrome<124

[oliviertassinari]

Steps to reproduce

Steps:

1. Open https://master--base-ui.netlify.app/components/react-slider/#vertical
   or open https://mui.com/material-ui/react-slider/#vertical-sliders

Current behavior

Expected behavior

Context

https://issues.chromium.org/issues/40739626 was fixed 3 years ago after Sebastian reported it, so we should now be able to remove the content in https://mui.com/material-ui/react-slider/#vertical-sliders and apply the style. This style is needed because aria-orientation is no correctly interpreted per https://issues.chromium.org/issues/40736841.

I noticed this in #636, it was weird.

Closing this issue also means getting https://mui.com/material-ui/react-slider/#vertical-sliders fixed. I opened this issue in Base UI to be at the root, for the Slider component owner.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: -

[mj12albert]

As of 2023 Chromium plans to deprecate webkit-appearance: slider-vertical 😅 https://issues.chromium.org/issues/40261389

The recommendation is to use writing-mode instead, though for <input type="range"> it doesn't match Base UI's browser support yet

For older browsers that we need to support, there are still (non-standard) properties to fall back to: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_writing_modes/Vertical_controls#creating_vertical_range_sliders_in_older_browsers

[oliviertassinari]

@mj12albert oh, I didn't know interesting. I guess it's mdn/content#32142.

[mj12albert]

We discussed this and decided to:

• Set writing-mode in the built-in styles
• In the docs, recommend webkit-appearance: slider-vertical if older Chrome support is needed. We don't want to ship this with a console warning, and hopefully the usage share of Chrome<124 will decline fast.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[oliviertassinari]

Great first step.

I'm reopening per:

Closing this issue also means getting https://mui.com/material-ui/react-slider/#vertical-sliders fixed. I opened this issue in Base UI to be at the root, for the Slider component owner.

There is nothing about Material Design in fixing this in Material UI, so I believe we want the two things to be done in coordination, by the same component owner.