fix(Handle): add aria-orientation on handles (#859)

* fix(Handle): add aria-orientation on handles https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-orientation * test(Range): update test name
react-component · Apr 15, 2023 · 3a65082 · 3a65082
1 parent ecdcaaa
commit 3a65082
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 0 deletions.
diff --git a/src/Handles/Handle.tsx b/src/Handles/Handle.tsx
@@ -134,6 +134,7 @@ const Handle = React.forwardRef((props: HandleProps, ref: React.Ref<HTMLDivEleme
       aria-label={getIndex(ariaLabelForHandle, valueIndex)}
       aria-labelledby={getIndex(ariaLabelledByForHandle, valueIndex)}
       aria-valuetext={getIndex(ariaValueTextFormatterForHandle, valueIndex)?.(value)}
+      aria-orientation={direction === 'ltr' || direction === 'rtl' ? 'horizontal' : 'vertical'}
       {...restProps}
     />
   );

diff --git a/tests/Range.test.js b/tests/Range.test.js
@@ -388,6 +388,26 @@ describe('Range', () => {
     test('touch', (container) => doTouchMove(container, 0, 20, 'rc-slider-track'));
   });
 
+  it('sets aria-orientation to default on the handle', () => {
+    const { container } = render(<Slider range />);
+    expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute(
+      'aria-orientation',
+      'horizontal',
+    );
+  });
+
+  it('sets aria-orientation to vertical on the handles of vertical Slider', () => {
+    const { container } = render(<Slider range vertical defaultValue={[0, 20]} />);
+    expect(container.getElementsByClassName('rc-slider-handle')[0]).toHaveAttribute(
+      'aria-orientation',
+      'vertical',
+    );
+    expect(container.getElementsByClassName('rc-slider-handle')[1]).toHaveAttribute(
+      'aria-orientation',
+      'vertical',
+    );
+  });
+
   it('sets aria-label on the handles', () => {
     const { container } = render(
       <Slider range ariaLabelForHandle={['Some Label', 'Some other Label']} />,

diff --git a/tests/__snapshots__/Range.test.js.snap b/tests/__snapshots__/Range.test.js.snap
@@ -24,6 +24,7 @@ exports[`Range should render Multi-Range with correct DOM structure 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -34,6 +35,7 @@ exports[`Range should render Multi-Range with correct DOM structure 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -44,6 +46,7 @@ exports[`Range should render Multi-Range with correct DOM structure 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -54,6 +57,7 @@ exports[`Range should render Multi-Range with correct DOM structure 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -81,6 +85,7 @@ exports[`Range should render Range with correct DOM structure 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"
@@ -91,6 +96,7 @@ exports[`Range should render Range with correct DOM structure 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"

diff --git a/tests/__snapshots__/Slider.test.js.snap b/tests/__snapshots__/Slider.test.js.snap
@@ -16,6 +16,7 @@ exports[`Slider should render Slider with correct DOM structure 1`] = `
   />
   <div
     aria-disabled="false"
+    aria-orientation="horizontal"
     aria-valuemax="100"
     aria-valuemin="0"
     aria-valuenow="0"