fix(a11y): accessibility status changes (#629)

* made some changes for the a11ystatus

* reverted the setA11yStatus call params

* refreshed snapshot

.size-snapshot.json

@@ -1,54 +1,54 @@
 {
   "preact/dist/downshift.cjs.js": {
-    "bundled": 51893,
-    "minified": 22279,
-    "gzipped": 6334
+    "bundled": 52167,
+    "minified": 22171,
+    "gzipped": 6316
   },
   "preact/dist/downshift.umd.min.js": {
-    "bundled": 63416,
-    "minified": 21897,
-    "gzipped": 7054
+    "bundled": 62334,
+    "minified": 21623,
+    "gzipped": 6971
   },
   "dist/downshift.umd.min.js": {
-    "bundled": 69878,
-    "minified": 23606,
-    "gzipped": 7821
+    "bundled": 66511,
+    "minified": 22797,
+    "gzipped": 7514
   },
   "dist/downshift.cjs.js": {
-    "bundled": 53324,
-    "minified": 23429,
-    "gzipped": 6530
+    "bundled": 53213,
+    "minified": 23437,
+    "gzipped": 6529
   },
   "dist/downshift.umd.js": {
-    "bundled": 108009,
-    "minified": 36671,
-    "gzipped": 11286
+    "bundled": 103339,
+    "minified": 35277,
+    "gzipped": 10927
   },
   "preact/dist/downshift.esm.js": {
-    "bundled": 51539,
-    "minified": 22003,
-    "gzipped": 6268,
+    "bundled": 51428,
+    "minified": 22011,
+    "gzipped": 6267,
     "treeshaked": {
       "rollup": {
-        "code": 16241,
+        "code": 16249,
         "import_statements": 336
       },
       "webpack": {
-        "code": 17507
+        "code": 17515
       }
     }
   },
   "dist/downshift.esm.js": {
-    "bundled": 52950,
-    "minified": 23138,
+    "bundled": 52839,
+    "minified": 23146,
     "gzipped": 6462,
     "treeshaked": {
       "rollup": {
-        "code": 16251,
+        "code": 16259,
         "import_statements": 354
       },
       "webpack": {
-        "code": 17550
+        "code": 17558
       }
     }
   },
@@ -58,8 +58,8 @@
     "gzipped": 9728
   },
   "preact/dist/downshift.umd.js": {
-    "bundled": 76138,
-    "minified": 27144,
-    "gzipped": 8471
+    "bundled": 74450,
+    "minified": 26688,
+    "gzipped": 8345
   }
 }

src/__tests__/__snapshots__/downshift.aria.js.snap

@@ -37,7 +37,7 @@ exports[`basic snapshot 1`] = `
     role="listbox"
   >
     <li
-      aria-selected="true"
+      aria-selected="false"
       data-testid="item-0"
       id="downshift-0-item-0"
       role="option"

src/__tests__/__snapshots__/set-a11y-status.js.snap

@@ -2,7 +2,7 @@
 
 exports[`clears statuses when a change appears 1`] = `
 <div
-  aria-live="assertive"
+  aria-live="polite"
   aria-relevant="additions text"
   id="a11y-status-message"
   role="status"
@@ -18,7 +18,7 @@ exports[`clears statuses when a change appears 1`] = `
 
 exports[`does add anything for an empty string 1`] = `
 <div
-  aria-live="assertive"
+  aria-live="polite"
   aria-relevant="additions text"
   id="a11y-status-message"
   role="status"
@@ -28,7 +28,7 @@ exports[`does add anything for an empty string 1`] = `
 
 exports[`escapes HTML 1`] = `
 <div
-  aria-live="assertive"
+  aria-live="polite"
   aria-relevant="additions text"
   id="a11y-status-message"
   role="status"
@@ -44,7 +44,7 @@ exports[`escapes HTML 1`] = `
 
 exports[`repeat statuses get appended as children 1`] = `
 <div
-  aria-live="assertive"
+  aria-live="polite"
   aria-relevant="additions text"
   id="a11y-status-message"
   role="status"
@@ -70,7 +70,7 @@ exports[`repeat statuses get appended as children 1`] = `
 
 exports[`sets the status 1`] = `
 <div
-  aria-live="assertive"
+  aria-live="polite"
   aria-relevant="additions text"
   id="a11y-status-message"
   role="status"

src/__tests__/utils.get-a11y-status-message.js

@@ -23,22 +23,24 @@ const tests = [
       isOpen: true,
       resultCount: 0,
     },
-    output: 'No results.',
+    output: 'No results are available.',
   },
   {
     input: {
       isOpen: true,
       resultCount: 10,
     },
-    output: '10 results are available, use up and down arrow keys to navigate.',
+    output:
+      '10 results are available, use up and down arrow keys to navigate. Press Enter key to select.',
   },
   {
     input: {
       isOpen: true,
       resultCount: 9,
       previousResultCount: 12,
     },
-    output: '9 results are available, use up and down arrow keys to navigate.',
+    output:
+      '9 results are available, use up and down arrow keys to navigate. Press Enter key to select.',
   },
   {
     input: {
@@ -47,14 +49,16 @@ const tests = [
       previousResultCount: 20,
       highlightedItem: 'Oranges',
     },
-    output: '8 results are available, use up and down arrow keys to navigate.',
+    output:
+      '8 results are available, use up and down arrow keys to navigate. Press Enter key to select.',
   },
   {
     input: {
       isOpen: true,
       resultCount: 1,
     },
-    output: '1 result is available, use up and down arrow keys to navigate.',
+    output:
+      '1 result is available, use up and down arrow keys to navigate. Press Enter key to select.',
   },
   {
     input: {
@@ -65,7 +69,7 @@ const tests = [
       selectedItem: 'Raspberries',
       highlightedItem: 'Raspberries',
     },
-    output: 'Raspberries',
+    output: '',
   },
 ]
 

src/downshift.js

@@ -901,7 +901,7 @@ class Downshift extends Component {
     return {
       id: this.getItemId(index),
       role: 'option',
-      'aria-selected': this.getState().selectedItem === item,
+      'aria-selected': this.getState().highlightedIndex === index,
       ...eventHandlers,
       ...rest,
     }

src/set-a11y-status.js

@@ -54,7 +54,7 @@ function getStatusDiv() {
   statusDiv = document.createElement('div')
   statusDiv.setAttribute('id', 'a11y-status-message')
   statusDiv.setAttribute('role', 'status')
-  statusDiv.setAttribute('aria-live', 'assertive')
+  statusDiv.setAttribute('aria-live', 'polite')
   statusDiv.setAttribute('aria-relevant', 'additions text')
   Object.assign(statusDiv.style, {
     border: '0',

src/utils.js

@@ -144,28 +144,23 @@ function resetIdCounter() {
  */
 function getA11yStatusMessage({
   isOpen,
-  highlightedItem,
   selectedItem,
   resultCount,
   previousResultCount,
   itemToString,
 }) {
   if (!isOpen) {
-    if (selectedItem) {
-      return itemToString(selectedItem)
-    } else {
-      return ''
-    }
+    return selectedItem ? itemToString(selectedItem) : ''
   }
-  const resultCountChanged = resultCount !== previousResultCount
   if (!resultCount) {
-    return 'No results.'
-  } else if (!highlightedItem || resultCountChanged) {
-    return `${resultCount} ${
-      resultCount === 1 ? 'result is' : 'results are'
-    } available, use up and down arrow keys to navigate.`
+    return 'No results are available.'
+  }
+  if (resultCount !== previousResultCount) {
+    return `${resultCount} result${
+      resultCount === 1 ? ' is' : 's are'
+    } available, use up and down arrow keys to navigate. Press Enter key to select.`
   }
-  return itemToString(highlightedItem)
+  return ''
 }
 
 /**

typings/index.d.ts

@@ -90,6 +90,7 @@ export interface A11yStatusMessageOptions<Item> {
   itemToString: (item: Item) => string
   previousResultCount: number
   resultCount: number
+  highlightedItem: Item
   selectedItem: Item
 }