♿ #1084 Check borders after accessibility changes

[jiromaykin]

Some borders need to be reverted to original design, because: The 'Toegankelijkheidsaudit' does not explicitly ask for borders around these areas + This Level AA requirement reads: "...Incidental: Text[...]that are part of an inactive user interface component, that are pure decoration,[...], have no contrast requirement..."
"pure decoration" in the definition of WCAG = "serving only an aesthetic purpose, providing no information, and having no functionality"

https://taiga.maykinmedia.nl/project/open-inwoner/task/1084

Answer to my question on Stack Overflow: https://stackoverflow.com/questions/75379770/do-borders-that-visually-group-related-content-have-a-contrast-requirement

“... WCAG does not require you to have a border around the grouped elements. […] there aren't any WCAG requirements for the contrast. 1.4.11 Non-text Contrast comes close but that requirement is for "Interface Components" and "Graphical Objects". Your tile might contain "Interface Components" (such as a link) but the tile itself is not an "Interface Component" so 1.4.11 does not apply. That doesn't mean you shouldn't try to have better contrast, but it's not required by WCAG.”

[codecov-commenter]

Codecov Report

Merging #463 (a868248) into develop (9e8c1bd) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           develop     #463   +/-   ##
========================================
  Coverage    96.46%   96.46%           
========================================
  Files          505      505           
  Lines        18255    18255           
========================================
  Hits         17609    17609           
  Misses         646      646           

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[jiromaykin]

Some elements still do need a bigger accessibility contrast with a different color --color-mute (like "input" interface components and other form inputs) but others need to be reverted to the original design.

[vaszig]

I assume that dropdowns have to remain the same for accessibility reasons, right? Maybe I am losing something in the task..

• dropdowns

[vaszig]

--border-width is 2px, maybe we should adhere to the card and dropdown buttons size -> 1px?
If so, let's create a variable for border size and set it to 1px, just to be reusable.

[jiromaykin]

Yes, you are right, I think this should become 1px as well; i will add to it.

[vaszig]

Feedback in search page? It doesn't seem to have a border-radius set.

[jiromaykin]

@vaszig Do you mean you think that there should be an extra border there?
I don't think so. When I look at the design in Invision I do not see a set border, so this should stay as is (also because that feedback text-area border would only be 'decorative' and not 'functional' for accessibility)

[jiromaykin]

I assume that dropdowns have to remain the same for accessibility reasons, right? Maybe I am losing something in the task..

Yes, anything that is -actually- needed for accessibility ("Interface Components" and "Graphical Objects" such as form elements etc.) still needs that darker border, so i did not change it for the elements that still need it. I you feel like looking deeper into this, look at my Stackoverlflow question-with-answer linked in the description of this PR.

[vaszig]

@vaszig Do you mean you think that there should be an extra border there? I don't think so. When I look at the design in Invision I do not see a set border, so this should stay as is (also because that feedback text-area border would only be 'decorative' and not 'functional' for accessibility)

No, I mean the border-radius here. Not adding extra borders. I see that the design has but we don't.

[jiromaykin]

No, I mean the border-radius here. Not adding extra borders. I see that the design has but we don't.

Ah, I see, you mean the voting-labels; well spotted!
Yes, I will add a radius around those.

[alextreme]

Thanks @vaszig for the detailed check! 👍

[vaszig]

Only two small remarks ant I think it's ready to be merged. @alextreme can tell us his opinion as well.

[vaszig]

We have nice buttons now!If you think the border on focus is a problem feel free to to fix it. I am not sure about it.

[jiromaykin]

Yes that is not the way it should be, eventually, but I want to collect that in a new ticket for all accessibility issues that are not quite on par yet.

[alextreme]

Only two small remarks ant I think it's ready to be merged. @alextreme can tell us his opinion as well.

@vaszig My opinion is that we'll likely have to iterate on this, we won't be able to get this exactly according to the design in one go but I'm happy with these and other steps being taken.