feat(hooks): add aria-selected="false" to each non-highlighted item (#…

…929) * fix issue and update unit tests * update snapshot * fix test names
downshift-js · Feb 9, 2020 · 860da10 · 860da10
1 parent 2068878
commit 860da10
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 33 deletions.
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,38 +1,38 @@
 {
   "dist/downshift.cjs.js": {
-    "bundled": 115805,
-    "minified": 53148,
-    "gzipped": 11696
+    "bundled": 115777,
+    "minified": 53152,
+    "gzipped": 11697
   },
   "preact/dist/downshift.cjs.js": {
-    "bundled": 114526,
-    "minified": 52113,
-    "gzipped": 11592
+    "bundled": 114498,
+    "minified": 52117,
+    "gzipped": 11593
   },
   "preact/dist/downshift.umd.min.js": {
-    "bundled": 126922,
-    "minified": 41382,
-    "gzipped": 11520
+    "bundled": 127271,
+    "minified": 41162,
+    "gzipped": 11292
   },
   "preact/dist/downshift.umd.js": {
-    "bundled": 143284,
-    "minified": 48982,
-    "gzipped": 13311
+    "bundled": 143633,
+    "minified": 51052,
+    "gzipped": 13241
   },
   "dist/downshift.umd.min.js": {
-    "bundled": 131154,
-    "minified": 42698,
-    "gzipped": 12052
+    "bundled": 131503,
+    "minified": 42483,
+    "gzipped": 11793
   },
   "dist/downshift.umd.js": {
-    "bundled": 172906,
-    "minified": 57899,
-    "gzipped": 15879
+    "bundled": 173255,
+    "minified": 59995,
+    "gzipped": 15758
   },
   "dist/downshift.esm.js": {
-    "bundled": 115318,
-    "minified": 52735,
-    "gzipped": 11628,
+    "bundled": 115290,
+    "minified": 52739,
+    "gzipped": 11629,
     "treeshaked": {
       "rollup": {
         "code": 1751,
@@ -44,8 +44,8 @@
     }
   },
   "preact/dist/downshift.esm.js": {
-    "bundled": 114006,
-    "minified": 51667,
+    "bundled": 113978,
+    "minified": 51671,
     "gzipped": 11523,
     "treeshaked": {
       "rollup": {

diff --git a/src/hooks/useCombobox/__tests__/getItemProps.test.js b/src/hooks/useCombobox/__tests__/getItemProps.test.js
@@ -41,14 +41,14 @@ describe('getItemProps', () => {
       const {result} = setupHook({highlightedIndex: 2})
       const itemProps = result.current.getItemProps({index: 2})
 
-      expect(itemProps['aria-selected']).toEqual(true)
+      expect(itemProps['aria-selected']).toEqual('true')
     })
 
-    test('do not assign aria-selected if item is not highlighted', () => {
+    test("assign 'false' to aria-selected if item is not highlighted", () => {
       const {result} = setupHook({highlightedIndex: 1})
       const itemProps = result.current.getItemProps({index: 2})
 
-      expect(itemProps['aria-selected']).toBeUndefined()
+      expect(itemProps['aria-selected']).toEqual('false')
     })
 
     test("handlers are not called if it's disabled", () => {
@@ -198,7 +198,7 @@ describe('getItemProps', () => {
         expect(input.getAttribute('aria-activedescendant')).not.toBe(
           defaultIds.getItemId(previousIndex),
         )
-        expect(previousItem.getAttribute('aria-selected')).toBeNull()
+        expect(previousItem.getAttribute('aria-selected')).toEqual('false')
       })
 
       it('keeps highlight on multiple events', () => {

diff --git a/src/hooks/useCombobox/index.js b/src/hooks/useCombobox/index.js
@@ -357,7 +357,7 @@ function useCombobox(userProps = {}) {
         }
       }),
       role: 'option',
-      ...(itemIndex === highlightedIndex && {'aria-selected': true}),
+      'aria-selected': `${itemIndex === highlightedIndex}`,
       id: getItemId(itemIndex),
       ...(!rest.disabled && {
         onMouseMove: callAllEventHandlers(onMouseMove, () => {

diff --git a/src/hooks/useSelect/__tests__/getItemProps.test.js b/src/hooks/useSelect/__tests__/getItemProps.test.js
@@ -41,14 +41,14 @@ describe('getItemProps', () => {
       const {result} = setupHook({highlightedIndex: 2})
       const itemProps = result.current.getItemProps({index: 2})
 
-      expect(itemProps['aria-selected']).toEqual(true)
+      expect(itemProps['aria-selected']).toEqual('true')
     })
 
-    test('do not assign aria-selected if item is not highlighted', () => {
+    test("assign 'false' to aria-selected if item is not highlighted", () => {
       const {result} = setupHook({highlightedIndex: 1})
       const itemProps = result.current.getItemProps({index: 2})
 
-      expect(itemProps['aria-selected']).toBeUndefined()
+      expect(itemProps['aria-selected']).toEqual('false')
     })
 
     test('omit event handlers when disabled', () => {
@@ -198,7 +198,7 @@ describe('getItemProps', () => {
         expect(menu.getAttribute('aria-activedescendant')).not.toBe(
           defaultIds.getItemId(previousIndex),
         )
-        expect(previousItem.getAttribute('aria-selected')).toBeNull()
+        expect(previousItem.getAttribute('aria-selected')).toEqual('false')
       })
 
       it('keeps highlight on multiple events', () => {

diff --git a/src/hooks/useSelect/index.js b/src/hooks/useSelect/index.js
@@ -410,7 +410,7 @@ function useSelect(userProps = {}) {
         }
       }),
       role: 'option',
-      ...(itemIndex === highlightedIndex && {'aria-selected': true}),
+      'aria-selected': `${itemIndex === highlightedIndex}`,
       id: getItemId(itemIndex),
       ...rest,
     }