fix(ffe-searchable-dropdown-react): better screen reader support

[pethel]

Beskrivelse

Denne konkurerer vell egentligen med #1088.

• Det viser seg att det finnes 2 versjoner av combobox. wai-aria 1.0 vs wai-aria 1.1. Kort førtalt så har den 1.0 bedre støtte og nya wai-aria 1.1 er ett problem for safari med voiceover kan det se ut som. Slik jag skjønner det er version 1.0 ikke på noen måte deprecated og det er vad feks google bruker i sin søkeboks. Jag har på bakgrund av att downshift (https://www.downshift-js.com/) som vi bruker lager combobox enligt wai-aria 1.1 laget en egen implementasjon tungt inspererad av downshift men med combobox pattern fra wai-aria 1.0.

wai-aria 1.1

wai-aria 1.0

mer info her: https://www.levelaccess.com/differences-aria-1-0-1-1-changes-rolecombobox/

• Så har jag fjernet expandering på focus med bakgrund av dette. Click fungerer som før.
  https://stackoverflow.com/questions/59207174/is-aria-expanded-only-for-click-interaction-or-can-it-be-used-for-focus-as

• Jag har laget status meldninger når man endrer som ligner veldigt mye på som downshift bruker.
  Får vi denne att bruke gott må vi se på AccountSelector også. Den bruker wai-aria 1.1 og sliter også med Voiceover.

Testing

Testet selv med Talkback på emulator.
Denne branchen finnes på linken under hvis noen har lust att testa.
https://thirsty-euler-224e8b.netlify.app/styleguidist/index.html#!/SearchableDropdown

[coveralls]

Coverage decreased (-2.7%) to 78.594% when pulling 240f4f8 on develop_searchable-dropdown-take-2 into dbeaaeb on develop.

[MariaOverlierBerg]

Sånn fungerer det på ios nå. Det fungerer myyye bedre enn før, men er fortsatt ikke helt optimalt. Dersom man åpner søkefeltet og swiper, så swiper man inne i keyboardet. For å komme ut av det må man trykke "done/ferdig", men da trigges onBlur, som gjør at hele dropdownen lukkes. Sånn var det før også. Men nå kommer man seg til pil-knappen (det gjorde man ikke før) som åpner og lukker dropdownen, og da kan man navigere seg nedover i lista og velge element. Alt det her ser dere i videoen:
https://user-images.githubusercontent.com/58166609/113687298-7970e700-96c8-11eb-8cd7-6260f17b3ef1.MP4

[pethel]

@MariaOverlierBerg har testet litt og vi klarer ikke og finne noe eksempel som virker bedre på voiceover en vår slik jag skjønner det?

[andrea-sb1]

Helt supert at du ser på hvordan vi kan gjøre searchable dropdown bedre for skjermlesere, @pethel!

Testet komponenten med VoiceOver på mac (Safari og Chrome) fra https://thirsty-euler-224e8b.netlify.app/styleguidist/index.html#!/SearchableDropdown

Får samme problemet som ble nevnt i #1088, at komponenten ikke fungerer med VoiceOver på Safari, mens den tilsynelatende fungerer bra i Chrome: downshift-js/downshift#1181

Opplever det samme som beskrives i issuet:
«When navigating to the combobox with VoiceOver, it reads "You are currently on a pop-up combo box, inside web content. Type text or, to display a list of choices, press Control-Option-Space.". The issue is that neither typing or ctrl-opt-space do anything – text never appears in the input field and the list of options never appears. This prevents VoiceOver users from interacting with the combobox at all.»

Når jeg tester Google sin søkeboks med samme setup (VoiceOver + Safari) fungerer det derimot. Det går både an å skrive tekst i feltet og ekspandere listen ved å klikke på Kontroll-Tilvalg-Mellomrom, som beskrevet i skjermleser-instruksjonen som leses opp. Tror det kan være en idé å se nærmere på hvordan Google har løst det

Ser at en person fjernet role="combobox" som en workaround i downshift-js/downshift#1181. Lurer på om Google har gjort det samme, eller om de har de løst det på en annen måte

[pethel]

Helt supert at du ser på hvordan vi kan gjøre searchable dropdown bedre for skjermlesere, @pethel!

Testet komponenten med VoiceOver på mac (Safari og Chrome) fra https://thirsty-euler-224e8b.netlify.app/styleguidist/index.html#!/SearchableDropdown

Får samme problemet som ble nevnt i #1088, at komponenten ikke fungerer med VoiceOver på Safari, mens den tilsynelatende fungerer bra i Chrome: downshift-js/downshift#1181

Opplever det samme som beskrives i issuet:
«When navigating to the combobox with VoiceOver, it reads "You are currently on a pop-up combo box, inside web content. Type text or, to display a list of choices, press Control-Option-Space.". The issue is that neither typing or ctrl-opt-space do anything – text never appears in the input field and the list of options never appears. This prevents VoiceOver users from interacting with the combobox at all.»

Når jeg tester Google sin søkeboks med samme setup (VoiceOver + Safari) fungerer det derimot. Det går både an å skrive tekst i feltet og ekspandere listen ved å klikke på Kontroll-Tilvalg-Mellomrom, som beskrevet i skjermleser-instruksjonen som leses opp. Tror det kan være en idé å se nærmere på hvordan Google har løst det

Ser at en person fjernet role="combobox" som en workaround i downshift-js/downshift#1181. Lurer på om Google har gjort det samme, eller om de har de løst det på en annen måte

Takk før att du testet. Google har ikke fjernet role="combobox" . Dom bruker version 1.0 av aria specen som beskrevet ovan.

[pethel]

@andrea-sb1 senaste version:
https://blissful-neumann-e844e3.netlify.app/styleguidist/index.html#!/SearchableDropdown

Fått tilgang til iPhone så jag kan testa litt selv. Denne føler jag funker sån 80%. Problemet er att den stikker av til andra elementer efter att man valgt. Det er rart før inputfeltet har egentligen focus hele tiden.

[torkjels]

Denne (på linje 235 og 236) skal kanskje heller være onChange istedenfor onClick? 😃

[pethel]

Ja selvsagt :)

[torkjels]

Til info for dere andre reviewers:

@MariaOverlierBerg, @pethel og jeg testet i går gjennom en hel haug med combobox-komponenter fra internettet, og vi ser at samtlige ikke funker med VoiceOver (og en del er dårlige med Talkback):

• Material-ui sin combobox (se også Github-issue)
• react-select
• Downshift (som er rammeverket vi baserte oss på før dette PRet)
• W3C sitt eksempel
• Microsoft sin Sonder UI "Editable combobox" (I artikkelen nevner de også "Known issues" og sier at VoiceOver generelt er skikkelig flaky/inkonsekvent når det kommer til comboboxes. Se også Github-implementasjon og -dokumentasjon. Hele poenget med Sonder UI er at Microsoft har brukt mye tid på å teste ut implementasjoner mot skjermlesere, og selv de finner ikke en bug-fri løsning etter mye aktivt arbeid).

Vår "konklusjon" er at vi ikke kommer til å finne en perfekt/bug-fri løsning ettersom skjermlesere rett og slett ikke støtter det godt nok. Dette er en type komponent som kan være veldig nyttig for brukere når man skal finne fram til en ting i en liste over mange alternativer. For eksempel hvis man skal finne fram til et fond eller en av mange mottakere i mottakerlista. Da er det nyttig å kunne søke/filtrere, så en vanlig native <select> er ikke like nyttig som en combobox. Det @pethel har implementert her er en forbedring i forhold til hvordan det oppførte seg tidligere, så kanskje vi skal gå ut med dette og forbedre det ytterligere (hvis det i det hele tatt er mulig 😅) når/hvis vi får tilbakemelding fra brukerne?

PS:
Man kunne også tenke seg at vi bare kunne kopiert Google sin løsning, men de har dessverre en annen use case enn oss. Hos dem blir hele nettsiden refreshet når de velger noe fra dropdownen, som gjør at det hele oppfører seg svært annerledes fra hvordan det skal være hos oss. Vi må på en eller annen måte få både fokus og skjermleser til å havne på riktig sted (altså i input-feltet) etter man har valgt noe fra dropdownen, men det Google har sånn sett et enklere use case enn oss siden de refresher hele siden.