data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: fix autocomplete in voiceover+safari (#1632)

Browse source 
* fix: fix autocomplete in voiceover+safari

fixes #1629

* fix test

* fix test
This commit is contained in:
Nolan Lawson 2019-11-09 23:01:32 -05:00 committed by GitHub
parent 07facea505
commit 63c9f8dc32
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/routes/_components/compose/ComposeAutosuggestionList.html
View file

@ -8,9 +8,11 @@
class="compose-autosuggest-list-item {i === selected ? 'selected' : ''}" class="compose-autosuggest-list-item {i === selected ? 'selected' : ''}"
role="option" role="option"
aria-selected="{i === selected}" aria-selected="{i === selected}"
aria-label="{ariaLabels[i]}"
on:click="onClick(event, item)" 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"> <div class="compose-autosuggest-list-grid" aria-hidden="true">
{#if type === 'account'} {#if type === 'account'}
<div class="compose-autosuggest-list-item-avatar"> <div class="compose-autosuggest-list-item-avatar">

4
tests/spec/018-compose-autosuggest.js
View file

@ -22,7 +22,7 @@ test('autosuggests user handles', async t => {
await sleep(1000) await sleep(1000)
await t await t
.typeText(composeInput, 'hey @qu') .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 }) .click(getNthAutosuggestionResult(1), { timeout })
.expect(composeInput.value).eql('hey @quux ') .expect(composeInput.value).eql('hey @quux ')
.typeText(composeInput, 'and also @adm') .typeText(composeInput, 'and also @adm')
@ -46,7 +46,7 @@ test('autosuggests custom emoji', async t => {
.click(getNthAutosuggestionResult(1)) .click(getNthAutosuggestionResult(1))
.expect(composeInput.value).eql(':blobnom: ') .expect(composeInput.value).eql(':blobnom: ')
.typeText(composeInput, 'and :blob') .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(1).innerText).contains(':blobnom:', { timeout })
.expect(getNthAutosuggestionResult(2).innerText).contains(':blobpats:') .expect(getNthAutosuggestionResult(2).innerText).contains(':blobpats:')
.expect(getNthAutosuggestionResult(3).innerText).contains(':blobpeek:') .expect(getNthAutosuggestionResult(3).innerText).contains(':blobpeek:')

4
tests/spec/131-compose-autosuggest.js
View file

@ -20,8 +20,8 @@ test('autosuggests hashtags', async t => {
.typeText(composeInput, 'hey #bl') .typeText(composeInput, 'hey #bl')
.expect(getNthAutosuggestionResult(1).innerText).contains('blank', { timeout }) .expect(getNthAutosuggestionResult(1).innerText).contains('blank', { timeout })
.expect(getNthAutosuggestionResult(2).innerText).contains('blanka', { timeout }) .expect(getNthAutosuggestionResult(2).innerText).contains('blanka', { timeout })
.expect(getNthAutosuggestionResult(1).getAttribute('aria-label')).contains('#blank', { timeout }) .expect(getNthAutosuggestionResult(1).find('.sr-only').innerText).contains('#blank', { timeout })
.expect(getNthAutosuggestionResult(2).getAttribute('aria-label')).contains('#blanka', { timeout }) .expect(getNthAutosuggestionResult(2).find('.sr-only').innerText).contains('#blanka', { timeout })
.click(getNthAutosuggestionResult(1), { timeout }) .click(getNthAutosuggestionResult(1), { timeout })
.expect(composeInput.value).eql('hey #blank ') .expect(composeInput.value).eql('hey #blank ')
.typeText(composeInput, 'and also #BL') .typeText(composeInput, 'and also #BL')