test 5024: improve accessibility

[CarolingerSeilchenspringer]

URL: https://github.com/liqd/a4-meinberlin/issues
user: user without mouse
expected behaviour:
behaviour:
important screensize:
device & browser:
Comment/Question:
I found several issues related to accessibility, different depending on browsers and not all of them strictly related to this story:

• Firefox: focus for map/list switch very hard to see (also focus above not well visible but this was not part of the story)
• all browser: filter with tabbing in wrong order
• Safari: focus missing for all proposals, map/list switch (and more above list, eg. call to action)

do we need to split this issue?

[fuzzylogic2000]

Is this only for the react list or does it need to be improved for all lists?

[CarolingerSeilchenspringer]

@fuzzylogic2000 I didn't check the other lists for now. But we should make the new react list accessible. And if that goes together with what is on top of the page and is easy to include, please do so. If completely different issue, just concentrate on the list.

[philli-m]

Note: half fixed, will do safari and focus ring in seperate pull request

[philli-m]

@CarolingerSeilchenspringer cannot reproduce safari issue on my current set up: mac Big Sur v11.6 Safari v 15.0 @khamui can you have a quick check of th focus rings on safari?

the firefox issue is something that needs a bit of concept, we currently have 1 focus ring that denotes buttons and one that denotes links (the not very visible one) which is decided by the browser. If we want to change the link focus ring I would like to have some input from @mcastro-lqd as it will be everywhere and I don't want to add focus behaviour without a design.
button types can be seen here https://meinberlin-dev.liqd.net/components/#cl-buttons

[philli-m]

Technical Note: should research sematic standard for buttons that are essentially links

[khamui]

I was checking on Safari v15.0.0 on MacOS BigSur (11.6). It turns out that Apple disables tab navigation by default. Can you check if it is working if you check the option in Safari Einstellungen -> Erweiter -> Über Tabulator jedes Objekt...@CarolingerSeilchenspringer?

[CarolingerSeilchenspringer]

@khamui thanks, that was the solution for safari!