From 63c9f8dc3237172383eb69b4e3abbac7fe0a6043 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 9 Nov 2019 23:01:32 -0500
Subject: [PATCH] fix: fix autocomplete in voiceover+safari (#1632)

* fix: fix autocomplete in voiceover+safari

fixes #1629

* fix test

* fix test
---
 src/routes/_components/compose/ComposeAutosuggestionList.html | 4 +++-
 tests/spec/018-compose-autosuggest.js                         | 4 ++--
 tests/spec/131-compose-autosuggest.js                         | 4 ++--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/routes/_components/compose/ComposeAutosuggestionList.html b/src/routes/_components/compose/ComposeAutosuggestionList.html
index 6244560d..f02a4bb6 100644
--- a/src/routes/_components/compose/ComposeAutosuggestionList.html
+++ b/src/routes/_components/compose/ComposeAutosuggestionList.html
@@ -8,9 +8,11 @@
       class="compose-autosuggest-list-item {i === selected ? 'selected' : ''}"
       role="option"
       aria-selected="{i === selected}"
-      aria-label="{ariaLabels[i]}"
       on:click="onClick(event, item)"
   >
+    <!-- aria-label would be simpler than an sr-only element, but that breaks VoiceOver+Safari
+         https://github.com/nolanlawson/pinafore/issues/1629 -->
+      <span class="sr-only">{ariaLabels[i]}</span>
       <div class="compose-autosuggest-list-grid" aria-hidden="true">
         {#if type === 'account'}
           <div class="compose-autosuggest-list-item-avatar">
diff --git a/tests/spec/018-compose-autosuggest.js b/tests/spec/018-compose-autosuggest.js
index b705bba3..4a337a08 100644
--- a/tests/spec/018-compose-autosuggest.js
+++ b/tests/spec/018-compose-autosuggest.js
@@ -22,7 +22,7 @@ test('autosuggests user handles', async t => {
   await sleep(1000)
   await t
     .typeText(composeInput, 'hey @qu')
-    .expect(getNthAutosuggestionResult(1).getAttribute('aria-label')).contains('@quux')
+    .expect(getNthAutosuggestionResult(1).find('.sr-only').innerText).contains('@quux')
     .click(getNthAutosuggestionResult(1), { timeout })
     .expect(composeInput.value).eql('hey @quux ')
     .typeText(composeInput, 'and also @adm')
@@ -46,7 +46,7 @@ test('autosuggests custom emoji', async t => {
     .click(getNthAutosuggestionResult(1))
     .expect(composeInput.value).eql(':blobnom: ')
     .typeText(composeInput, 'and :blob')
-    .expect(getNthAutosuggestionResult(1).getAttribute('aria-label')).contains('blobnom')
+    .expect(getNthAutosuggestionResult(1).find('.sr-only').innerText).contains('blobnom')
     .expect(getNthAutosuggestionResult(1).innerText).contains(':blobnom:', { timeout })
     .expect(getNthAutosuggestionResult(2).innerText).contains(':blobpats:')
     .expect(getNthAutosuggestionResult(3).innerText).contains(':blobpeek:')
diff --git a/tests/spec/131-compose-autosuggest.js b/tests/spec/131-compose-autosuggest.js
index 7cdc3a6f..a0646359 100644
--- a/tests/spec/131-compose-autosuggest.js
+++ b/tests/spec/131-compose-autosuggest.js
@@ -20,8 +20,8 @@ test('autosuggests hashtags', async t => {
     .typeText(composeInput, 'hey #bl')
     .expect(getNthAutosuggestionResult(1).innerText).contains('blank', { timeout })
     .expect(getNthAutosuggestionResult(2).innerText).contains('blanka', { timeout })
-    .expect(getNthAutosuggestionResult(1).getAttribute('aria-label')).contains('#blank', { timeout })
-    .expect(getNthAutosuggestionResult(2).getAttribute('aria-label')).contains('#blanka', { timeout })
+    .expect(getNthAutosuggestionResult(1).find('.sr-only').innerText).contains('#blank', { timeout })
+    .expect(getNthAutosuggestionResult(2).find('.sr-only').innerText).contains('#blanka', { timeout })
     .click(getNthAutosuggestionResult(1), { timeout })
     .expect(composeInput.value).eql('hey #blank ')
     .typeText(composeInput, 'and also #BL')