feat: improve Input accessibility (#1186)

Author: Pareder

src/SelectInput/Input.tsx

@@ -179,9 +179,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     role: role || 'combobox',
     'aria-expanded': open || false,
     'aria-haspopup': 'listbox' as const,
-    'aria-owns': `${id}_list`,
+    'aria-owns': open ? `${id}_list` : undefined,
     'aria-autocomplete': 'list' as const,
-    'aria-controls': `${id}_list`,
+    'aria-controls': open ? `${id}_list` : undefined,
     'aria-activedescendant': open ? activeDescendantId : undefined,
   };
 

tests/Accessibility.test.tsx

@@ -214,4 +214,62 @@ describe('Select.Accessibility', () => {
       });
     });
   });
+
+  describe('Select Input attributes', () => {
+    it('should have correct aria and role attributes by default', () => {
+      const { container } = render(
+        <Select
+          options={[
+            {
+              value: '123',
+            },
+            {
+              value: '1234',
+            },
+            {
+              value: '12345',
+            },
+          ]}
+        />,
+      );
+
+      const input = container.querySelector('input');
+      expect(input).toHaveAttribute('role', 'combobox');
+      expect(input).toHaveAttribute('aria-expanded', 'false');
+      expect(input).toHaveAttribute('aria-haspopup', 'listbox');
+      expect(input).not.toHaveAttribute('aria-owns');
+      expect(input).toHaveAttribute('aria-autocomplete', 'list');
+      expect(input).not.toHaveAttribute('aria-controls');
+      expect(input).not.toHaveAttribute('aria-activedescendant');
+    });
+
+    it('should have correct aria and role attributes when open', () => {
+      const { container } = render(
+        <Select
+          id="select"
+          open
+          options={[
+            {
+              value: '123',
+            },
+            {
+              value: '1234',
+            },
+            {
+              value: '12345',
+            },
+          ]}
+        />,
+      );
+
+      const input = container.querySelector('input');
+      expect(input).toHaveAttribute('role', 'combobox');
+      expect(input).toHaveAttribute('aria-expanded', 'true');
+      expect(input).toHaveAttribute('aria-haspopup', 'listbox');
+      expect(input).toHaveAttribute('aria-owns', 'select_list');
+      expect(input).toHaveAttribute('aria-autocomplete', 'list');
+      expect(input).toHaveAttribute('aria-controls', 'select_list');
+      expect(input).toHaveAttribute('aria-activedescendant', 'select_list_0');
+    });
+  });
 });

tests/__snapshots__/Combobox.test.tsx.snap

@@ -15,10 +15,8 @@ exports[`Select.Combobox renders controlled correctly 1`] = `
     </div>
     <input
       aria-autocomplete="list"
-      aria-controls="test-id_list"
       aria-expanded="false"
       aria-haspopup="listbox"
-      aria-owns="test-id_list"
       autocomplete="off"
       class="rc-select-input"
       id="test-id"
@@ -45,10 +43,8 @@ exports[`Select.Combobox renders correctly 1`] = `
     </div>
     <input
       aria-autocomplete="list"
-      aria-controls="test-id_list"
       aria-expanded="false"
       aria-haspopup="listbox"
-      aria-owns="test-id_list"
       autocomplete="off"
       class="rc-select-input"
       id="test-id"

tests/__snapshots__/Select.test.tsx.snap

@@ -124,12 +124,10 @@ exports[`Select.Basic render renders aria-attributes correctly 1`] = `
     </div>
     <input
       aria-autocomplete="list"
-      aria-controls="test-id_list"
       aria-expanded="false"
       aria-haspopup="listbox"
       aria-label="some-label"
       aria-labelledby="test-id"
-      aria-owns="test-id_list"
       autocomplete="off"
       class="antd-input"
       id="test-id"
@@ -162,10 +160,8 @@ exports[`Select.Basic render renders correctly 1`] = `
     </div>
     <input
       aria-autocomplete="list"
-      aria-controls="test-id_list"
       aria-expanded="false"
       aria-haspopup="listbox"
-      aria-owns="test-id_list"
       autocomplete="off"
       class="antd-input"
       id="test-id"
@@ -200,10 +196,8 @@ exports[`Select.Basic render renders data-attributes correctly 1`] = `
     </div>
     <input
       aria-autocomplete="list"
-      aria-controls="test-id_list"
       aria-expanded="false"
       aria-haspopup="listbox"
-      aria-owns="test-id_list"
       autocomplete="off"
       class="antd-input"
       id="test-id"
@@ -236,10 +230,8 @@ exports[`Select.Basic render renders disabled select correctly 1`] = `
     </div>
     <input
       aria-autocomplete="list"
-      aria-controls="test-id_list"
       aria-expanded="false"
       aria-haspopup="listbox"
-      aria-owns="test-id_list"
       autocomplete="off"
       class="antd-input"
       disabled=""
@@ -271,10 +263,8 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
     </div>
     <input
       aria-autocomplete="list"
-      aria-controls="test-id_list"
       aria-expanded="false"
       aria-haspopup="listbox"
-      aria-owns="test-id_list"
       autocomplete="off"
       class="antd-input"
       id="test-id"

tests/__snapshots__/ssr.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Select.SSR should work 1`] = `"<div class="rc-select rc-select-single"><div class="rc-select-content"><div class="rc-select-placeholder" style="visibility:visible"></div><input id="test-id" type="search" readonly="" autoComplete="off" class="rc-select-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="test-id_list" aria-autocomplete="list" aria-controls="test-id_list" value=""/></div></div>"`;
+exports[`Select.SSR should work 1`] = `"<div class="rc-select rc-select-single"><div class="rc-select-content"><div class="rc-select-placeholder" style="visibility:visible"></div><input id="test-id" type="search" readonly="" autoComplete="off" class="rc-select-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-autocomplete="list" value=""/></div></div>"`;