Color Contrast in cookie settings box is not sufficient

DSpace / dspace-angular

DSpace User Interface built on Angular.io

https://wiki.lyrasis.org/display/DSDOC8x/

BSD 3-Clause "New" or "Revised" License

128 stars 422 forks source link

Color Contrast in cookie settings box is not sufficient #2668

Open reetagithub opened 10 months ago

reetagithub commented 10 months ago

Describe the bug In the "We collect and process your personal information..." box, there is green text on the black background. The contrast between these two is not sufficient: accessibility requirements say it should be 4.5:1, but it is only 3.27:1.

To Reproduce Use WAVE on the page, or fill https://webaim.org/resources/contrastchecker/

tdonohue commented 3 months ago

PR #3039 has partially fixed this issue (for 7.6.2 and 8.0). That PR updates the styles of the initial Klaro popup window to have proper color contrast. Here's the new look: initialpopup

However, if you click on "Customize" in that popup, you'll see a larger list of all possible settings. This larger popup still has color contrast issues (a lot of dark gray text on a black background) as shown in this screenshot: FullSettings

Andrea-Guevara commented 3 months ago

@tdonohue Hi, I'd like to take this activity. I understood that the problem was only the gray color of some texts. Is that right?

tdonohue commented 3 months ago

@Andrea-Guevara : I'm not exactly sure if the gray color is the only issue. I was mentioning it as an example. The primary problem is that this page in the popup fails when analyzed by an accessibility scanner (e.g. WAVE or the "axe DevTools" plugin in Chrome).

FullSettings

So, to fix this ticket would require that all pages within the Klaro popup to succeed accessibility scanning.

To reproduce:

Visit https://sandbox.dspace.org in an Incognito browser
Klaro cookie popup should appear. Click on "Customize" to bring up the screen above
Expand all sections on that screen.
Run an accessibility scanner (either WAVE or "axe DevTools). Both will report 5-10 color contrast issues. Those are what need to be fixed.

I'll assign this to you @Andrea-Guevara . But, if you change your mind, let me know and we can find a different volunteer.

Andrea-Guevara commented 3 months ago

Hello @tdonohue, good afternoon.

I did some tests and managed to reduce the accessibility problems of the cookis configuration box.

However, I had to use "!important" in some parts of the code for the css changes to take effect. Is this a problem?

I look forward to your feedback. issue-2668

Andrea-Guevara commented 3 months ago

Good afternoon @tdonohue! I've made a PR so you can see the code. https://github.com/DSpace/dspace-angular/pull/3140

I look forward to your feedback

Andrea-Guevara commented 3 weeks ago

Good afternoon @tdonohue! I made a new PR updated to DSpace version 8 and the pull request has now gone to the dspace-8_x branch.

Is that right? If not, let me know! I'll be waiting.

PR updated: https://github.com/DSpace/dspace-angular/pull/3328