fix(ffe-account-selector-react): Remove role="listbox" to make dropdo…

[MariaOverlierBerg]

…wn accessible for VoiceOver

Beskrivelse

AccountSelector fungerer ikke med skjermleser på iPhone og mac, men fungerer på android. I pm-betaling har vi tidligere hatt problem med at skjermleser kun leser "listeboks" og går videre forbi elementene i listeboksen. Det hjalp for oss å fjerne role="listbox" som jeg har gjort her, men får ikke testa på mac eller iPhone lokalt i designsystemet, får bare testet på android-emulatoren. Har noen av dere mulighet til å sjekke det? Har sjekket at det fungerer som før på android. Eneste forskjellen er at skjermleser ikke leser opp "listeboks" før en navigeres til første element i dropdownen. 😊 Dersom ingen har mulighet til å teste på en ios device, så lurer jeg på om vi kan gå ut med dette uten å teste siden det er en så liten endring?

Motivasjon og kontekst

Testing

[pethel]

Leser mange som klager voice over og combobox/listbox. https://www.google.com/ bruker combobox sammen med listbox og det må vell funke med voiceover? Jag tror heller vi burde finne ut vad vi har gjort annledes. Det er ju rart att ikke disse exemplena virker
https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html

[MariaOverlierBerg]

Leser mange som klager voice over og combobox/listbox. https://www.google.com/ bruker combobox sammen med listbox og det må vell funke med voiceover? Jag tror heller vi burde finne ut vad vi har gjort annledes. Det er ju rart att ikke disse exemplena virker
https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html

Mulig vi har implementert det feil eller bruker det feil med VoiceOver. Har ikke fått eksemplene til å funke, men google funker fint med skjermleser på macen og iPhonen min 😄 Kanskje noen av dere andre her med mac eller iPhone vet noe om dette? 😊

[antidecaf]

Forventet oppførsel er, sånn jeg forstår det, at skjermleseren kun skal lese opp listbox-elementet og ikke alle elementene i lista. option skal først annonseres når det har fokus.

Fra MDN:

When the listbox role is added to an element, or such an element becomes visible, screen readers announce the label and role of the listbox when it gets focus. If an option or item is focused within the list, it gets announced next, followed by an indication of the item's position with the list if the screen reader supports this. As focus moves within the list, the screen reader announces the relevant items.

Uten role="listbox" vil denne lista kun være en unordered list rent semantisk, og oppføre seg deretter, men det er nok ikke helt heldig med tanke på funksjonaliteten.

[MariaOverlierBerg]

Forventet oppførsel er, sånn jeg forstår det, at skjermleseren kun skal lese opp listbox-elementet og ikke alle elementene i lista. option skal først annonseres når det har fokus.

Fra MDN:

When the listbox role is added to an element, or such an element becomes visible, screen readers announce the label and role of the listbox when it gets focus. If an option or item is focused within the list, it gets announced next, followed by an indication of the item's position with the list if the screen reader supports this. As focus moves within the list, the screen reader announces the relevant items.

Uten role="listbox" vil denne lista kun være en unordered list rent semantisk, og oppføre seg deretter, men det er nok ikke helt heldig med tanke på funksjonaliteten.

Aha, skjønner. Men vet du hvordan man kan få fokus på option-elementene innenfor listboxen? 😊 Det fungerer ikke med vanlig swipe på ios.

[pethel]

Forventet oppførsel er, sånn jeg forstår det, at skjermleseren kun skal lese opp listbox-elementet og ikke alle elementene i lista. option skal først annonseres når det har fokus.
Fra MDN:

When the listbox role is added to an element, or such an element becomes visible, screen readers announce the label and role of the listbox when it gets focus. If an option or item is focused within the list, it gets announced next, followed by an indication of the item's position with the list if the screen reader supports this. As focus moves within the list, the screen reader announces the relevant items.

Uten role="listbox" vil denne lista kun være en unordered list rent semantisk, og oppføre seg deretter, men det er nok ikke helt heldig med tanke på funksjonaliteten.

Aha, skjønner. Men vet du hvordan man kan få fokus på option-elementene innenfor listboxen? Det fungerer ikke med vanlig swipe på ios.

Jag misstenker att Voiceover ikke støtter den wai-aria 1.1 versionen av combobox? Er ikke sikker men de exemplana som du provat her https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html som ikke funker bruker version 1.1. Google som du testade og sån funkade bruker version 1.0

https://www.levelaccess.com/differences-aria-1-0-1-1-changes-rolecombobox/
#1093

[MariaOverlierBerg]

Forventet oppførsel er, sånn jeg forstår det, at skjermleseren kun skal lese opp listbox-elementet og ikke alle elementene i lista. option skal først annonseres når det har fokus.
Fra MDN:

When the listbox role is added to an element, or such an element becomes visible, screen readers announce the label and role of the listbox when it gets focus. If an option or item is focused within the list, it gets announced next, followed by an indication of the item's position with the list if the screen reader supports this. As focus moves within the list, the screen reader announces the relevant items.

Uten role="listbox" vil denne lista kun være en unordered list rent semantisk, og oppføre seg deretter, men det er nok ikke helt heldig med tanke på funksjonaliteten.

Aha, skjønner. Men vet du hvordan man kan få fokus på option-elementene innenfor listboxen? Det fungerer ikke med vanlig swipe på ios.

Jag misstenker att Voiceover ikke støtter den wai-aria 1.1 versionen av combobox? Er ikke sikker men de exemplana som du provat her https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html som ikke funker bruker version 1.1. Google som du testade og sån funkade bruker version 1.0

https://www.levelaccess.com/differences-aria-1-0-1-1-changes-rolecombobox/
#1093

Ahaaaa. Det kan gi mening! Hadde det vært mulig å gå tilbake til versjon 1.0 og sjekka? Eller blir det litt dumt?

[pethel]

Forventet oppførsel er, sånn jeg forstår det, at skjermleseren kun skal lese opp listbox-elementet og ikke alle elementene i lista. option skal først annonseres når det har fokus.
Fra MDN:

When the listbox role is added to an element, or such an element becomes visible, screen readers announce the label and role of the listbox when it gets focus. If an option or item is focused within the list, it gets announced next, followed by an indication of the item's position with the list if the screen reader supports this. As focus moves within the list, the screen reader announces the relevant items.

Uten role="listbox" vil denne lista kun være en unordered list rent semantisk, og oppføre seg deretter, men det er nok ikke helt heldig med tanke på funksjonaliteten.

Aha, skjønner. Men vet du hvordan man kan få fokus på option-elementene innenfor listboxen? Det fungerer ikke med vanlig swipe på ios.

Jag misstenker att Voiceover ikke støtter den wai-aria 1.1 versionen av combobox? Er ikke sikker men de exemplana som du provat her https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html som ikke funker bruker version 1.1. Google som du testade og sån funkade bruker version 1.0
https://www.levelaccess.com/differences-aria-1-0-1-1-changes-rolecombobox/
#1093

Ahaaaa. Det kan gi mening! Hadde det vært mulig å gå tilbake til versjon 1.0 og sjekka? Eller blir det litt dumt?

Alltså det er ikke version 1.0 av en npm pakke eller noe sånt uten version av en spesifikasjon som vi i sånna fall må implementera.

Det ser ut som dagens Accountselector bruker noe som ligner på føljande markup og dette er version 1.1:

Dette viser hvordan version 1.0 ville sett ut.

Den stora forksjellen er vilket element som har role="combobox"
Dette er føreløpig bare en teori jag har og ikke noe mer :)

Hvis det noen sanning i teorin så ær version 1.1 ikke deprecated, eller var ikke når denne som jag lenka til skrevs iaf.

Google bruker som sagt version 1.0 på sitt søkefelt. Det må ju vare verldens mest brukta combobox vill jag tro

[MariaOverlierBerg]

Forventet oppførsel er, sånn jeg forstår det, at skjermleseren kun skal lese opp listbox-elementet og ikke alle elementene i lista. option skal først annonseres når det har fokus.
Fra MDN:

When the listbox role is added to an element, or such an element becomes visible, screen readers announce the label and role of the listbox when it gets focus. If an option or item is focused within the list, it gets announced next, followed by an indication of the item's position with the list if the screen reader supports this. As focus moves within the list, the screen reader announces the relevant items.

Uten role="listbox" vil denne lista kun være en unordered list rent semantisk, og oppføre seg deretter, men det er nok ikke helt heldig med tanke på funksjonaliteten.

Aha, skjønner. Men vet du hvordan man kan få fokus på option-elementene innenfor listboxen? Det fungerer ikke med vanlig swipe på ios.

Jag misstenker att Voiceover ikke støtter den wai-aria 1.1 versionen av combobox? Er ikke sikker men de exemplana som du provat her https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html som ikke funker bruker version 1.1. Google som du testade og sån funkade bruker version 1.0
https://www.levelaccess.com/differences-aria-1-0-1-1-changes-rolecombobox/
#1093

Ahaaaa. Det kan gi mening! Hadde det vært mulig å gå tilbake til versjon 1.0 og sjekka? Eller blir det litt dumt?

Alltså det er ikke version 1.0 av en npm pakke eller noe sånt uten version av en spesifikasjon som vi i sånna fall må implementera.

Det ser ut som dagens Accountselector bruker noe som ligner på føljande markup og dette er version 1.1:

Dette viser hvordan version 1.0 ville sett ut.

Den stora forksjellen er vilket element som har role="combobox"
Dette er føreløpig bare en teori jag har og ikke noe mer :)

Skjønner! Men da kan jeg jo prøve det i stedet i denne branchen. Virker ikke som det er noen som vet hvordan vi kan få testa det lokalt, men siden det uansett ikke funker på ios, hadde det vært innafor å gå ut med det uten å vite om det fikser det? Så endrer vi tilbake dersom det ikke fikser det?

[pethel]

Forventet oppførsel er, sånn jeg forstår det, at skjermleseren kun skal lese opp listbox-elementet og ikke alle elementene i lista. option skal først annonseres når det har fokus.
Fra MDN:

When the listbox role is added to an element, or such an element becomes visible, screen readers announce the label and role of the listbox when it gets focus. If an option or item is focused within the list, it gets announced next, followed by an indication of the item's position with the list if the screen reader supports this. As focus moves within the list, the screen reader announces the relevant items.

Uten role="listbox" vil denne lista kun være en unordered list rent semantisk, og oppføre seg deretter, men det er nok ikke helt heldig med tanke på funksjonaliteten.

Aha, skjønner. Men vet du hvordan man kan få fokus på option-elementene innenfor listboxen? Det fungerer ikke med vanlig swipe på ios.

Jag misstenker att Voiceover ikke støtter den wai-aria 1.1 versionen av combobox? Er ikke sikker men de exemplana som du provat her https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html som ikke funker bruker version 1.1. Google som du testade og sån funkade bruker version 1.0
https://www.levelaccess.com/differences-aria-1-0-1-1-changes-rolecombobox/
#1093

Ahaaaa. Det kan gi mening! Hadde det vært mulig å gå tilbake til versjon 1.0 og sjekka? Eller blir det litt dumt?

Alltså det er ikke version 1.0 av en npm pakke eller noe sånt uten version av en spesifikasjon som vi i sånna fall må implementera.
Det ser ut som dagens Accountselector bruker noe som ligner på føljande markup og dette er version 1.1:

Dette viser hvordan version 1.0 ville sett ut.

Den stora forksjellen er vilket element som har role="combobox"
Dette er føreløpig bare en teori jag har og ikke noe mer :)

Skjønner! Men da kan jeg jo prøve det i stedet i denne branchen. Virker ikke som det er noen som vet hvordan vi kan få testa det lokalt, men siden det uansett ikke funker på ios, hadde det vært innafor å gå ut med det uten å vite om det fikser det? Så endrer vi tilbake dersom det ikke fikser det?

Ikke lokalt men jag har implemntert det på searchable dropdown: https://thirsty-euler-224e8b.netlify.app/styleguidist/index.html#!/SearchableDropdown

Vet ikke om det funker på Voiceover men vi kan sjekke det muligens før vi gjør krafttag her?

[pethel]

Bar sånn lit på siden vill det ikke gitt mening og fjerne role="listbox" hvis vi forsatt har children med role="option" inne i.

[MariaOverlierBerg]

Det virker som listbox ikke er problemet, men heller versjon 1.1 av wai-aria som @pethel nevner. :) Så lukker denne