From daa979565fb144d2f56763b616420b3ad1084c9c Mon Sep 17 00:00:00 2001 From: Weslen Nascimento Date: Wed, 29 Apr 2020 20:52:16 -0300 Subject: [PATCH 1/4] Add test case --- packages/material-ui/src/Slider/Slider.test.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js index cdf1f73ba9f709..79cb90d93cbde6 100644 --- a/packages/material-ui/src/Slider/Slider.test.js +++ b/packages/material-ui/src/Slider/Slider.test.js @@ -391,6 +391,17 @@ describe('', () => { fireEvent.keyDown(document.activeElement, moveLeftEvent); expect(thumb).to.have.attribute('aria-valuenow', '-3e-8'); }); + + it('should handle RTL', () => { + const { getByRole } = render(); + const thumb = getByRole('slider'); + thumb.focus(); + + fireEvent.keyDown(document.activeElement, moveLeftEvent); + expect(thumb).to.have.attribute('aria-valuenow', '31'); + fireEvent.keyDown(document.activeElement, moveRightEvent); + expect(thumb).to.have.attribute('aria-valuenow', '30'); + }); }); describe('prop: valueLabelDisplay', () => { From 8fd2b890b4352261501ee3da7720a1371432eac1 Mon Sep 17 00:00:00 2001 From: Weslen Nascimento Date: Wed, 29 Apr 2020 21:02:43 -0300 Subject: [PATCH 2/4] [Slider] Handle RTL on keyboard --- packages/material-ui/src/Slider/Slider.js | 10 +++++++--- packages/material-ui/src/Slider/Slider.test.js | 10 +++++++++- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 1bef3c19eb4945..638487df5b7ce2 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -425,6 +425,8 @@ const Slider = React.forwardRef(function Slider(props, ref) { setOpen(-1); }); + const isRtl = theme.direction === 'rtl'; + const handleKeyDown = useEventCallback((event) => { const index = Number(event.currentTarget.getAttribute('data-index')); const value = values[index]; @@ -432,6 +434,8 @@ const Slider = React.forwardRef(function Slider(props, ref) { const marksValues = marks.map((mark) => mark.value); const marksIndex = marksValues.indexOf(value); let newValue; + const ArrowRight = isRtl ? 'ArrowLeft' : 'ArrowRight'; + const ArrowLeft = isRtl ? 'ArrowRight' : 'ArrowLeft'; switch (event.key) { case 'Home': @@ -450,7 +454,7 @@ const Slider = React.forwardRef(function Slider(props, ref) { newValue = value - tenPercents; } break; - case 'ArrowRight': + case ArrowRight: case 'ArrowUp': if (step) { newValue = value + step; @@ -458,7 +462,7 @@ const Slider = React.forwardRef(function Slider(props, ref) { newValue = marksValues[marksIndex + 1] || marksValues[marksValues.length - 1]; } break; - case 'ArrowLeft': + case ArrowLeft: case 'ArrowDown': if (step) { newValue = value - step; @@ -503,7 +507,7 @@ const Slider = React.forwardRef(function Slider(props, ref) { const previousIndex = React.useRef(); let axis = orientation; - if (theme.direction === 'rtl' && orientation === 'horizontal') { + if (isRtl && orientation === 'horizontal') { axis += '-reverse'; } diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js index 79cb90d93cbde6..20024a3d45a765 100644 --- a/packages/material-ui/src/Slider/Slider.test.js +++ b/packages/material-ui/src/Slider/Slider.test.js @@ -393,7 +393,15 @@ describe('', () => { }); it('should handle RTL', () => { - const { getByRole } = render(); + const { getByRole } = render( + + + , + ); const thumb = getByRole('slider'); thumb.focus(); From d169f16d6506288c3b2eef0e5aae034ed74e52ce Mon Sep 17 00:00:00 2001 From: Weslen Nascimento Date: Thu, 30 Apr 2020 09:55:39 -0300 Subject: [PATCH 3/4] increaseKey and decreaseKey --- packages/material-ui/src/Slider/Slider.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/material-ui/src/Slider/Slider.js b/packages/material-ui/src/Slider/Slider.js index 638487df5b7ce2..67205d0507bc1c 100644 --- a/packages/material-ui/src/Slider/Slider.js +++ b/packages/material-ui/src/Slider/Slider.js @@ -434,8 +434,8 @@ const Slider = React.forwardRef(function Slider(props, ref) { const marksValues = marks.map((mark) => mark.value); const marksIndex = marksValues.indexOf(value); let newValue; - const ArrowRight = isRtl ? 'ArrowLeft' : 'ArrowRight'; - const ArrowLeft = isRtl ? 'ArrowRight' : 'ArrowLeft'; + const increaseKey = isRtl ? 'ArrowLeft' : 'ArrowRight'; + const decreaseKey = isRtl ? 'ArrowRight' : 'ArrowLeft'; switch (event.key) { case 'Home': @@ -454,7 +454,7 @@ const Slider = React.forwardRef(function Slider(props, ref) { newValue = value - tenPercents; } break; - case ArrowRight: + case increaseKey: case 'ArrowUp': if (step) { newValue = value + step; @@ -462,7 +462,7 @@ const Slider = React.forwardRef(function Slider(props, ref) { newValue = marksValues[marksIndex + 1] || marksValues[marksValues.length - 1]; } break; - case ArrowLeft: + case decreaseKey: case 'ArrowDown': if (step) { newValue = value - step; From 6b5bf53d053a69fe710eb3ca3f5409709eb25184 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 2 May 2020 17:30:09 +0200 Subject: [PATCH 4/4] remove dead logic This is no longer relevant since #19010. --- .../material-ui/src/Slider/Slider.test.js | 33 ------------------- 1 file changed, 33 deletions(-) diff --git a/packages/material-ui/src/Slider/Slider.test.js b/packages/material-ui/src/Slider/Slider.test.js index 20024a3d45a765..a0059454aa8481 100644 --- a/packages/material-ui/src/Slider/Slider.test.js +++ b/packages/material-ui/src/Slider/Slider.test.js @@ -129,39 +129,6 @@ describe('', () => { }); }); - // TODO: use fireEvent for all the events. - // describe.skip('when mouse reenters window', () => { - // it('should update if mouse is still clicked', () => { - // const handleChange = spy(); - // const { container } = render(); - - // fireEvent.mouseDown(container.firstChild); - // document.body.dispatchEvent(new window.MouseEvent('mouseleave')); - // const mouseEnter = new window.Event('mouseenter'); - // mouseEnter.buttons = 1; - // document.body.dispatchEvent(mouseEnter); - // expect(handleChange.callCount).to.equal(1); - - // document.body.dispatchEvent(new window.MouseEvent('mousemove')); - // expect(handleChange.callCount).to.equal(2); - // }); - - // it('should not update if mouse is not clicked', () => { - // const handleChange = spy(); - // const { container } = render(); - - // fireEvent.mouseDown(container.firstChild); - // document.body.dispatchEvent(new window.MouseEvent('mouseleave')); - // const mouseEnter = new window.Event('mouseenter'); - // mouseEnter.buttons = 0; - // document.body.dispatchEvent(mouseEnter); - // expect(handleChange.callCount).to.equal(1); - - // document.body.dispatchEvent(new window.MouseEvent('mousemove')); - // expect(handleChange.callCount).to.equal(1); - // }); - // }); - describe('range', () => { it('should support keyboard', () => { const { getAllByRole } = render();