Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs][Slider] Outdated guidance for vertical sliders #44237

Open
mj12albert opened this issue Oct 28, 2024 · 3 comments · May be fixed by #44537
Open

[docs][Slider] Outdated guidance for vertical sliders #44237

mj12albert opened this issue Oct 28, 2024 · 3 comments · May be fixed by #44537
Assignees
@mj12albert
Labels
component: slider This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation

Comments

@mj12albert
Copy link
Member

mj12albert commented Oct 28, 2024 •
edited
Loading

Follow up to mui/base-ui#635

Related page

https://mui.com/material-ui/react-slider/#vertical-sliders

  1. Current docs recommend -webkit-appearance: slider-vertical, which will cause a console warning in Chrome 124+.
  2. The browser bug where -webkit-appearance: slider-vertical reverses arrow key behavior has been fixed in Jan 2021: https://issues.chromium.org/issues/40739626#comment9 Our lowest supported chrome version is 109 which was released in 2023
@mj12albert mj12albert added component: slider This is the name of the generic UI component, not the React module! status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: docs-feedback Feedback from documentation page and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 28, 2024
@mj12albert
Copy link
Member Author

mj12albert commented Oct 28, 2024 •
edited
Loading

I suggest we do:

  1. Update the content about the reversed arrow keys, it's outdated and the underlying issue in Chromium has been fixed
  2. Update the content about -webkit-appearance: slider-vertical, it's only relevant to Chrome <124 now
  3. Add CSS writing-mode to the built-in styles, this is a simple fix to expose the component correctly in the accessibility tree we can do right now, no need to wait for Base UI

Sandbox comparing -webkit-appearance: slider-vertical vs writing-mode: https://codesandbox.io/p/sandbox/xhmkxy

@mj12albert mj12albert mentioned this issue Oct 28, 2024
Closed
@mj12albert mj12albert added docs Improvements or additions to the documentation and removed support: docs-feedback Feedback from documentation page labels Oct 28, 2024
@mj12albert
Copy link
Member Author

@oliviertassinari @aarongarciah I think we can make a worthwhile improvement here right now, regardless of the status/timing of integrating Base UI, what do you think?

@aarongarciah
Copy link
Member

@mj12albert +1

@mj12albert mj12albert self-assigned this Oct 29, 2024
@mj12albert mj12albert linked a pull request Nov 25, 2024 that will close this issue
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mj12albert mj12albert

Labels
component: slider This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[material-ui][Slider] Set CSS writing-mode and update vertical slider docs mj12albert/material-ui
2 participants
@mj12albert @aarongarciah