fix: remove aria-live region for autosuggest (#1520)
This commit is contained in:
parent
3338159eaa
commit
8f3b0ac80a
|
@ -8,9 +8,6 @@
|
||||||
selected={autosuggestSelected}
|
selected={autosuggestSelected}
|
||||||
{realm}
|
{realm}
|
||||||
/>
|
/>
|
||||||
<div class="sr-only" aria-live="assertive">
|
|
||||||
{assertiveAriaText}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
.compose-autosuggest {
|
.compose-autosuggest {
|
||||||
|
@ -57,7 +54,6 @@
|
||||||
import { selectAutosuggestItem } from '../../_actions/autosuggest'
|
import { selectAutosuggestItem } from '../../_actions/autosuggest'
|
||||||
import { observe } from 'svelte-extras'
|
import { observe } from 'svelte-extras'
|
||||||
import { once } from '../../_utils/once'
|
import { once } from '../../_utils/once'
|
||||||
import { createAutosuggestAccessibleLabel } from '../../_utils/createAutosuggestAccessibleLabel'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
oncreate () {
|
oncreate () {
|
||||||
|
@ -111,21 +107,7 @@
|
||||||
/* eslint-enable camelcase */
|
/* eslint-enable camelcase */
|
||||||
shouldBeShown: ({ realm, $autosuggestShown, composeFocused }) => (
|
shouldBeShown: ({ realm, $autosuggestShown, composeFocused }) => (
|
||||||
!!($autosuggestShown && composeFocused)
|
!!($autosuggestShown && composeFocused)
|
||||||
),
|
)
|
||||||
// text that is read to screen readers. based on https://haltersweb.github.io/Accessibility/autocomplete.html
|
|
||||||
assertiveAriaText: ({
|
|
||||||
shouldBeShown,
|
|
||||||
autosuggestSearchResults,
|
|
||||||
autosuggestSelected,
|
|
||||||
autosuggestType,
|
|
||||||
$omitEmojiInDisplayNames
|
|
||||||
}) => {
|
|
||||||
if (!shouldBeShown || !autosuggestSearchResults || !autosuggestSearchResults.length) {
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
return createAutosuggestAccessibleLabel(autosuggestType, $omitEmojiInDisplayNames,
|
|
||||||
autosuggestSelected, autosuggestSearchResults)
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
data: () => ({
|
data: () => ({
|
||||||
shown: false
|
shown: false
|
||||||
|
|
Loading…
Reference in New Issue