digitalfabrik / integreat-app

React JS and React Native App for Integreat
https://integreat.app
MIT License
45 stars 15 forks source link

Make 1st level icons seem interactive in normal mode #2779

Open steffenkleinle opened 2 months ago

steffenkleinle commented 2 months ago

Is your feature request related to a problem? Please describe. As a user I want to instantly see that our 1st level icons aka categories are interactive and can be clicked.

Describe the solution you'd like A clear and concise description of what you want to happen.

Describe alternatives you've considered Keep the current icons.

Additional context This was a request in one of our accessibility reports: Add @dkehne could you add more information here please/the exact report. Thanks :pray:

Part of #1021.

nikolahoff commented 2 months ago

@steffenkleinle the report is here But it only says that the contrast is not high enough. Nothing about that it is not visible as a clickable element. I think we can delete this issue? @dkehne

dkehne commented 2 months ago

There is anonther report (i just uploaded it to the same folder from Kreis Höxter) and we had follow-up-meetings after both reports were created.

I can only repeat from my own memories that people with handicaps might have problems with icons that are used for navigation when they do not have enough contrast. so they might not see that they are intended as a button because it does not look like one.

having enough contrast (not yellow/white) would fix the problem there.

nikolahoff commented 2 months ago

Ok then we can close this issue as it has the same solution than #2781 @steffenkleinle

steffenkleinle commented 2 months ago

My memory from the call was that we want to increase the contrast a little in the normal mode (e.g. with some border/outline or similar) and then have a dedicated high contrast mode which increases the contrast to the maximum (e.g. using black and white or some other colored icons). Am I missing something here?

nikolahoff commented 2 months ago

We tried to increase the contrast with another yellow tone. But the contrast doesn't change much but the tone seems very different to the integreat yellow. So this is not a good option. Also with the outline: I don't think it really solves the problem. In my opinion we should keep the yellow icons as they are and just add the contrast mode. Please check @hauf-toni @steffenkleinle Design here.

steffenkleinle commented 2 months ago

We tried to increase the contrast with another yellow tone. But the contrast doesn't change much but the tone seems very different to the integreat yellow. So this is not a good option. Also with the outline: I don't think it really solves the problem. In my opinion we should keep the yellow icons as they are and just add the contrast mode. Please check @hauf-toni @steffenkleinle Design [here](Was gibt es Neues in deiner Nähe? Finde es heraus in Integreat.)

Works for me if @dkehne says that increasing the contrast in only the high contrast mode is enough. @nikolahoff the design was sadly not correctly linked.

nikolahoff commented 2 months ago

I updated the link:)