From 8d0db2c97c18c71bf3a6d8b08f7f3e85212e0cdb Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sun, 5 May 2019 22:08:54 -0700 Subject: [PATCH] fix: make autosuggestion accessible (#1183) * fix: make autosuggestion accessible fixes #129 * remove tabindexes, fix aria-hidden --- .../compose/ComposeAutosuggest.html | 22 +++++++++- .../compose/ComposeAutosuggestionList.html | 44 ++++++++++++------- .../_components/compose/ComposeInput.html | 19 ++++++++ .../computations/autosuggestComputations.js | 2 +- .../createAutosuggestAccessibleLabel.js | 20 +++++++++ tests/utils.js | 2 +- 6 files changed, 89 insertions(+), 20 deletions(-) create mode 100644 src/routes/_utils/createAutosuggestAccessibleLabel.js diff --git a/src/routes/_components/compose/ComposeAutosuggest.html b/src/routes/_components/compose/ComposeAutosuggest.html index f2a04e3d..5885fcfa 100644 --- a/src/routes/_components/compose/ComposeAutosuggest.html +++ b/src/routes/_components/compose/ComposeAutosuggest.html @@ -1,11 +1,16 @@ @@ -101,9 +105,17 @@ import Avatar from '../Avatar.html' import { store } from '../../_store/store' import AccountDisplayName from '../profile/AccountDisplayName.html' + import { createAutosuggestAccessibleLabel } from '../../_utils/createAutosuggestAccessibleLabel' export default { store: () => store, + computed: { + ariaLabels: ({ items, type, $omitEmojiInDisplayNames }) => { + return items.map((item, i) => { + return createAutosuggestAccessibleLabel(type, $omitEmojiInDisplayNames, i, items) + }) + } + }, methods: { onClick (event, item) { event.preventDefault() diff --git a/src/routes/_components/compose/ComposeInput.html b/src/routes/_components/compose/ComposeInput.html index ff937798..ac2ae175 100644 --- a/src/routes/_components/compose/ComposeInput.html +++ b/src/routes/_components/compose/ComposeInput.html @@ -2,6 +2,11 @@ id="the-compose-box-input-{realm}" class="compose-box-input compose-box-input-realm-{realm}" placeholder="What's on your mind?" + aria-describedby="compose-box-input-description-{realm}" + aria-owns="compose-autosuggest-list-{realm}" + aria-expanded={autosuggestShownForThisInput} + aria-autocomplete="both" + aria-activedescendant="{autosuggestShownForThisInput ? `compose-autosuggest-active-item-${realm}` : ''}" ref:textarea bind:value=rawText on:blur="onBlur()" @@ -12,6 +17,9 @@ + + When autocomplete results are available, press up or down arrows and enter to select. +