fixing accesibility issues in the cookie setting

[CrisGuzmanS]

References

• Fixes Color Contrast in cookie settings box is not sufficient #2668 (if this fixes an issue ticket)

Description

Cookie setting menu accesibility bug fixed.

Instructions for Reviewers

i have fixed the issues about contrast in the cookie settings.

According to the klaro documentation i needed to add a :root variable.

List of changes in this PR:

• Added --green1 variable style to change the background color (needed to be more clear)
• Text color as dark in the accept button.

Include guidance for how to test or review your PR. This may include: steps to reproduce a bug, screenshots or description of a new feature, or reasons behind specific changes.

Checklist

This checklist provides a reminder of what we are going to look for when reviewing your PR. You need not complete this checklist prior to creating your PR (draft PRs are always welcome). If you are unsure about an item in the checklist, don't hesitate to ask. We're here to help!

• My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
• My PR passes ESLint validation using yarn lint
• My PR doesn't introduce circular dependencies (verified via yarn check-circ-deps)
• My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
• My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
• If my PR fixes an issue ticket, I've linked them together.

[CrisGuzmanS]

Hello @tdonohue i will fix the bug

[tdonohue]

Because this is specific to Klaro, we should add a comment here to say something like:

// Specify a different green color for for Klaro cookie notice. ONLY used for Klaro.

Either that, or we see if there's a way to move this color into the .klaro classes below... that may mean not using the variable though and just overriding the CSS colors directly.

Basically though, we need to document why this --green1 exists, so that other developers do NOT use it in other areas of DSpace.

[CrisGuzmanS]

Hello @tdonohue I already moved the variable to the classes. I had to set !important for the styles to be applied.

[tdonohue]

Can we remove this commented out code? It doesn't appear to have a purpose any longer.

[michdyk]

Hi @tdonohue, could you assign me here as a reviewer? My team contributed some accessibility issues so we can go through this

[tdonohue]

@michdyk : To add you as an assignee, you have to be a "developer" in the DSpace github. I've just sent you an invite. That said, you do not need to be assigned in order to do a review/test of a PR. You are welcome to review/test any PR you want without being assigned...all reviews are welcome.

[pcg-kk]

In your code, the usage of !important is unnecessary. Instead, you can enhance the specificity of your selectors and leverage SCSS's features to avoid duplicating selectors. Here's an example of how your code can be refactored to eliminate the need for !important:

.klaro,
.cookie-notice,
.cn-buttons {
  .cm-btn.cm-btn-success {
    color: #333333;
    background-color: #4de0b4;
  }

  a {
    color: #4de0b4;
  }
}

Additionally, it seems you've deviated from the approach of using new variables. The variable --green1 is used in the Klaro class and it works perfectly. I believe the original intention was to use this variable for maintainability and consistency. Here's how the code should look with the variable:

:root {
   --green1: #4de0b4;  // This variable represents the success color for the Klaro cookie banner
   --button-text-color: #333; // This variable represents the text color for buttons in the Klaro cookie banner
}

.klaro,
.cookie-notice,
.cn-buttons {
  .cm-btn.cm-btn-success {
    color: var(--button-text-color);
    background-color: var(--green1);
  }

  a {
    color: var(--green1);
  }
}

[reetagithub]

I do not know what is the hexadecimal code of --green1, but please use WebAIMs ContrastChecker to check the accessibility of the colors you intend to use.

[tdonohue]

Closing as this was replaced by #3039