Skip to content

Commit

Permalink
Apply CSS writing mode on input element
Browse files Browse the repository at this point in the history
  • Loading branch information
mj12albert committed Sep 26, 2024
1 parent b253900 commit 5dadbbc
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 0 deletions.
12 changes: 12 additions & 0 deletions docs/data/components/slider/slider.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,18 @@ To create vertical sliders, set the `orientation` prop to `"vertical"`. This wil

<Demo demo="VerticalSlider" />

<Callout type="warning">
Chrome versions below 124 does not implement `aria-orientation` correctly for vertical sliders ([Chromium issue #40736841](https://issues.chromium.org/issues/40736841)), and exposes them in the accessibility tree as `horizontal`.

The `-webkit-appearance: slider-vertical` CSS property can be used to correct this, though it will trigger a console warning in newer Chrome versions:
```css
.MySlider-thumb > input {
-webkit-appearance: slider-vertical;
}
```
The `Slider.Thumb` subcomponent automatically sets 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 for Chrome 124 and newer.
</Callout>

## RTL

Set the `direction` prop to `'rtl'` to change the slider's direction for right-to-left languages:
Expand Down
5 changes: 5 additions & 0 deletions packages/mui-base/src/Slider/Thumb/useSliderThumb.ts
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,10 @@ export function useSliderThumb(parameters: useSliderThumb.Parameters): useSlider

const getThumbInputProps: useSliderThumb.ReturnValue['getThumbInputProps'] = React.useCallback(
(externalProps = {}) => {
let cssWritingMode;
if (orientation === 'vertical') {
cssWritingMode = isRtl ? 'vertical-rl' : 'vertical-lr';
}
return mergeReactProps(getInputValidationProps(externalProps), {
'aria-label': getAriaLabel ? getAriaLabel(index) : ariaLabel,
'aria-labelledby': ariaLabelledby,
Expand Down Expand Up @@ -261,6 +265,7 @@ export function useSliderThumb(parameters: useSliderThumb.Parameters): useSlider
// So that VoiceOver's focus indicator matches the thumb's dimensions
width: '100%',
height: '100%',
writingMode: cssWritingMode,
},
tabIndex: -1,
type: 'range',
Expand Down

0 comments on commit 5dadbbc

Please sign in to comment.