diff --git a/packages/mui-material/src/Slider/Slider.test.js b/packages/mui-material/src/Slider/Slider.test.js
index 8b8d868434dbbd..8498815e1ff923 100644
--- a/packages/mui-material/src/Slider/Slider.test.js
+++ b/packages/mui-material/src/Slider/Slider.test.js
@@ -254,6 +254,50 @@ describe('', () => {
expect(handleChange.args[0][1]).to.equal(80);
expect(handleChange.args[1][1]).to.equal(78);
});
+
+ describe('vertical orientation', () => {
+ describe('keyboard interactions', () => {
+ it('ArrowLeft and ArrowDown decrements the value', () => {
+ const { getByRole } = render();
+
+ const slider = getByRole('slider');
+
+ expect(slider).to.have.attribute('aria-valuenow', '50');
+
+ act(() => {
+ slider.focus();
+ });
+
+ fireEvent.keyDown(slider, { key: 'ArrowLeft' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '49');
+
+ fireEvent.keyDown(slider, { key: 'ArrowDown' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '48');
+ });
+
+ it('ArrowRight and ArrowUp increments the value', () => {
+ const { getByRole } = render();
+
+ const slider = getByRole('slider');
+
+ expect(slider).to.have.attribute('aria-valuenow', '50');
+
+ act(() => {
+ slider.focus();
+ });
+
+ fireEvent.keyDown(slider, { key: 'ArrowRight' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '51');
+
+ fireEvent.keyDown(slider, { key: 'ArrowUp' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '52');
+ });
+ });
+ });
});
describe('range', () => {
@@ -421,41 +465,157 @@ describe('', () => {
});
describe('prop: step', () => {
- it('should handle a null step', () => {
- const { getByRole, container } = render(
- ,
- );
- stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
- width: 100,
- height: 10,
- bottom: 10,
- left: 0,
- }));
- const slider = getByRole('slider');
+ describe('when step is `null`', () => {
+ it('values are defined by mark values', () => {
+ const { getByRole, container } = render(
+ ,
+ );
+ stub(container.firstChild, 'getBoundingClientRect').callsFake(() => ({
+ width: 100,
+ height: 10,
+ bottom: 10,
+ left: 0,
+ }));
+ const slider = getByRole('slider');
+
+ fireEvent.touchStart(
+ container.firstChild,
+ createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]),
+ );
+ expect(slider).to.have.attribute('aria-valuenow', '20');
- fireEvent.touchStart(
- container.firstChild,
- createTouches([{ identifier: 1, clientX: 21, clientY: 0 }]),
- );
- expect(slider).to.have.attribute('aria-valuenow', '20');
+ fireEvent.change(slider, {
+ target: {
+ value: 21,
+ },
+ });
+ expect(slider).to.have.attribute('aria-valuenow', '30');
- fireEvent.change(slider, {
- target: {
- value: 21,
- },
+ fireEvent.change(slider, {
+ target: {
+ value: 29,
+ },
+ });
+ expect(slider).to.have.attribute('aria-valuenow', '20');
});
- expect(slider).to.have.attribute('aria-valuenow', '30');
- fireEvent.change(slider, {
- target: {
- value: 29,
- },
+ describe('keyboard interactions', () => {
+ describe('horizontal orientation', () => {
+ it('ArrowLeft and ArrowDown decrements the value', () => {
+ const { getByRole } = render(
+ ,
+ );
+
+ const slider = getByRole('slider');
+
+ expect(slider).to.have.attribute('aria-valuenow', '79');
+
+ act(() => {
+ slider.focus();
+ });
+
+ fireEvent.keyDown(slider, { key: 'ArrowLeft' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '29');
+
+ fireEvent.keyDown(slider, { key: 'ArrowDown' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '19');
+ });
+
+ it('ArrowRight and ArrowUp increments the value', () => {
+ const { getByRole } = render(
+ ,
+ );
+
+ const slider = getByRole('slider');
+
+ expect(slider).to.have.attribute('aria-valuenow', '9');
+
+ act(() => {
+ slider.focus();
+ });
+
+ fireEvent.keyDown(slider, { key: 'ArrowRight' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '19');
+
+ fireEvent.keyDown(slider, { key: 'ArrowUp' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '29');
+ });
+ });
+
+ describe('vertical orientation', () => {
+ it('ArrowLeft and ArrowDown decrements the value', () => {
+ const { getByRole } = render(
+ ,
+ );
+
+ const slider = getByRole('slider');
+
+ expect(slider).to.have.attribute('aria-valuenow', '79');
+
+ act(() => {
+ slider.focus();
+ });
+
+ fireEvent.keyDown(slider, { key: 'ArrowLeft' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '29');
+
+ fireEvent.keyDown(slider, { key: 'ArrowDown' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '19');
+ });
+
+ it('ArrowRight and ArrowUp increments the value', () => {
+ const { getByRole } = render(
+ ,
+ );
+
+ const slider = getByRole('slider');
+
+ expect(slider).to.have.attribute('aria-valuenow', '9');
+
+ act(() => {
+ slider.focus();
+ });
+
+ fireEvent.keyDown(slider, { key: 'ArrowRight' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '19');
+
+ fireEvent.keyDown(slider, { key: 'ArrowUp' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '29');
+ });
+ });
});
- expect(slider).to.have.attribute('aria-valuenow', '20');
});
it('change events with non integer numbers should work', () => {
@@ -986,6 +1146,112 @@ describe('', () => {
expect(handleChange.args[0][1]).to.equal(80);
expect(handleChange.args[1][1]).to.equal(78);
});
+
+ describe('keyboard interactions', () => {
+ it('ArrowRight and ArrowDown decrements the value', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ const slider = getByRole('slider');
+
+ expect(slider).to.have.attribute('aria-valuenow', '50');
+
+ act(() => {
+ slider.focus();
+ });
+
+ fireEvent.keyDown(slider, { key: 'ArrowRight' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '49');
+
+ fireEvent.keyDown(slider, { key: 'ArrowDown' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '48');
+ });
+
+ it('ArrowLeft and ArrowUp increments the value', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ const slider = getByRole('slider');
+
+ expect(slider).to.have.attribute('aria-valuenow', '50');
+
+ act(() => {
+ slider.focus();
+ });
+
+ fireEvent.keyDown(slider, { key: 'ArrowLeft' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '51');
+
+ fireEvent.keyDown(slider, { key: 'ArrowUp' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '52');
+ });
+
+ it('End key sets the value to max', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ const slider = getByRole('slider');
+
+ expect(slider).to.have.attribute('aria-valuenow', '50');
+
+ act(() => {
+ slider.focus();
+ });
+
+ fireEvent.keyDown(slider, { key: 'End' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '99');
+ });
+
+ it('Home key sets the value to min', () => {
+ const { getByRole } = render(
+
+
+ ,
+ );
+
+ const slider = getByRole('slider');
+
+ expect(slider).to.have.attribute('aria-valuenow', '50');
+
+ act(() => {
+ slider.focus();
+ });
+
+ fireEvent.keyDown(slider, { key: 'Home' });
+
+ expect(slider).to.have.attribute('aria-valuenow', '1');
+ });
+ });
});
describe('warnings', () => {