From 07facea505e6dfd5073aff138464a6e26b8df8ec Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 9 Nov 2019 20:38:29 -0500
Subject: [PATCH] fix: improve autosuggest a11y (#1630)

* fix: improve autosuggest a11y

some progress on #1629

- works in Chrome on NVDA now
- works in Chrome on VoiceOver now
- shorter aria-labels, don't repeat information like "1 of 3", because
it causes the screen reader to speak too frequently, e.g. when the
selected result hasn't changed but the number of results has. Also both
NVDA and VoiceOver already speak this information
- stop doing a fancy fade animation, just show and hide the input
instantly. I worry it confuses screen readers to have the aria-hidden
attribute in there at all
- stop using a single id to identify the active descendant - give
immutable IDs and then update the aria-activedescendant instead. I think
this is what fixed Chrome.

* fix test
---
 .../_components/compose/ComposeAutosuggest.html   | 12 +++---------
 .../compose/ComposeAutosuggestionList.html        |  2 +-
 src/routes/_components/compose/ComposeInput.html  | 15 +++++++++++----
 .../_utils/createAutosuggestAccessibleLabel.js    |  3 +--
 tests/spec/018-compose-autosuggest.js             | 10 +++++-----
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/routes/_components/compose/ComposeAutosuggest.html b/src/routes/_components/compose/ComposeAutosuggest.html
index 84836d61..c1c2d964 100644
--- a/src/routes/_components/compose/ComposeAutosuggest.html
+++ b/src/routes/_components/compose/ComposeAutosuggest.html
@@ -1,6 +1,4 @@
-<div class="compose-autosuggest {shown ? 'shown' : ''} {realm === 'dialog' ? 'is-dialog' : ''}"
-     aria-hidden={!shown}
->
+<div class="compose-autosuggest {shown ? '' : 'not-shown'} {realm === 'dialog' ? 'is-dialog' : ''}">
   <ComposeAutosuggestionList
     items={autosuggestSearchResults}
     on:click="onClick(event)"
@@ -15,17 +13,13 @@
     position: absolute;
     left: 5px;
     top: 0;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.1s linear;
     z-index: 7000;
   }
   .compose-autosuggest.is-dialog {
     z-index: 11000;
   }
-  .compose-autosuggest.shown {
-    pointer-events: auto;
-    opacity: 1;
+  .compose-autosuggest.not-shown {
+    display: none;
   }
 
   @media (min-width: 480px) {
diff --git a/src/routes/_components/compose/ComposeAutosuggestionList.html b/src/routes/_components/compose/ComposeAutosuggestionList.html
index 653511cc..6244560d 100644
--- a/src/routes/_components/compose/ComposeAutosuggestionList.html
+++ b/src/routes/_components/compose/ComposeAutosuggestionList.html
@@ -4,7 +4,7 @@
     role="listbox"
 >
   {#each items as item, i (item.shortcode || item.id || item.name)}
-  <li id="{i === selected ? `compose-autosuggest-active-item-${realm}` : ''}"
+  <li id="compose-autosuggest-active-item-{realm}-{i}"
       class="compose-autosuggest-list-item {i === selected ? 'selected' : ''}"
       role="option"
       aria-selected="{i === selected}"
diff --git a/src/routes/_components/compose/ComposeInput.html b/src/routes/_components/compose/ComposeInput.html
index be0f01c2..251d1cf7 100644
--- a/src/routes/_components/compose/ComposeInput.html
+++ b/src/routes/_components/compose/ComposeInput.html
@@ -3,10 +3,10 @@
   class="compose-box-input compose-box-input-realm-{realm}"
   placeholder="What's on your mind?"
   aria-describedby="compose-box-input-description-{realm}"
-  aria-owns="{autosuggestShownForThisInput ? `compose-autosuggest-list-${realm}` : undefined}"
+  aria-owns="compose-autosuggest-list-{realm}"
   aria-expanded={autosuggestShownForThisInput}
   aria-autocomplete="both"
-  aria-activedescendant="{autosuggestShownForThisInput ? `compose-autosuggest-active-item-${realm}` : undefined}"
+  aria-activedescendant={activeDescendant}
   ref:textarea
   bind:value=rawText
   on:blur="onBlur()"
@@ -268,10 +268,17 @@
       composeFocused: ({ $autosuggestData_composeFocused, $currentInstance, realm }) => (
         get($autosuggestData_composeFocused, [$currentInstance, realm], false)
       ),
-      /* eslint-enable camelcase */
-      autosuggestShownForThisInput: ({ realm, $autosuggestShown, composeFocused }) => (
+
+      autosuggestShownForThisInput: ({ $autosuggestShown, composeFocused }) => (
         !!($autosuggestShown && composeFocused)
+      ),
+      autosuggestSelected: ({ $autosuggestData_autosuggestSelected, $currentInstance, realm }) => (
+        get($autosuggestData_autosuggestSelected, [$currentInstance, realm], 0)
+      ),
+      activeDescendant: ({ autosuggestSelected, autosuggestShownForThisInput, realm }) => (
+        autosuggestShownForThisInput ? `compose-autosuggest-active-item-${realm}-${autosuggestSelected}` : undefined
       )
+      /* eslint-enable camelcase */
     },
     events: {
       selectionChange
diff --git a/src/routes/_utils/createAutosuggestAccessibleLabel.js b/src/routes/_utils/createAutosuggestAccessibleLabel.js
index 76686c86..06ae133d 100644
--- a/src/routes/_utils/createAutosuggestAccessibleLabel.js
+++ b/src/routes/_utils/createAutosuggestAccessibleLabel.js
@@ -17,6 +17,5 @@ export function createAutosuggestAccessibleLabel (
       : displayName
     label = `${displayName} @${selected.acct}`
   }
-  return `${label} (${selectedIndex + 1} of ${searchResults.length}). ` +
-    'Press up and down arrows to review and enter to select.'
+  return label
 }
diff --git a/tests/spec/018-compose-autosuggest.js b/tests/spec/018-compose-autosuggest.js
index a5abfc55..b705bba3 100644
--- a/tests/spec/018-compose-autosuggest.js
+++ b/tests/spec/018-compose-autosuggest.js
@@ -110,7 +110,7 @@ test('autosuggest only shows for one input', async t => {
     .selectText(getNthComposeReplyInput(1))
     .pressKey('delete')
     .typeText(getNthComposeReplyInput(1), 'uu')
-    .expect($('.compose-autosuggest.shown').exists).notOk()
+    .expect($('.compose-autosuggest').visible).notOk()
 })
 
 test('autosuggest only shows for one input part 2', async t => {
@@ -118,7 +118,7 @@ test('autosuggest only shows for one input part 2', async t => {
   await t
     .hover(composeInput)
     .typeText(composeInput, '@adm')
-    .expect($('.compose-autosuggest.shown').exists).ok({ timeout })
+    .expect($('.compose-autosuggest').visible).ok({ timeout })
     .expect(getNthAutosuggestionResult(1).innerText).contains('@admin')
     .hover(getNthStatus(1))
     .click(getNthReplyButton(1))
@@ -127,7 +127,7 @@ test('autosuggest only shows for one input part 2', async t => {
     .typeText(getNthComposeReplyInput(1), '@dd')
   await sleep(1000)
   await t.pressKey('backspace')
-    .expect($('.compose-autosuggest.shown').exists).notOk()
+    .expect($('.compose-autosuggest').visible).notOk()
 })
 
 test('autocomplete disappears on blur', async t => {
@@ -135,7 +135,7 @@ test('autocomplete disappears on blur', async t => {
   await t
     .hover(composeInput)
     .typeText(composeInput, '@adm')
-    .expect($('.compose-autosuggest.shown').exists).ok({ timeout })
+    .expect($('.compose-autosuggest').visible).ok({ timeout })
     .click(composeLengthIndicator)
-    .expect($('.compose-autosuggest.shown').exists).notOk()
+    .expect($('.compose-autosuggest').visible).notOk()
 })