The show/hide password button icon has a too low color contrast

Created on 10 September 2024, 3 months ago

Problem/Motivation

If the show/hide password button gets into focus, it uses user agent style sheet (in my case for macos safari -webkit-focus-ring-color) which has a too low color contrast with rgb(144, 179, 251) against the white background (2.1:1, required would be at least 3:1)

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

6.0

Component

User interface

Created by

🇩🇪Germany rkoller Nürnberg, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

  • Issue created by @rkoller
  • 🇩🇪Germany anacolautti

    Hi again!
    Thank you for your input on this issue. I agree that the low contrast in Safari poses accessibility challenges. However, I believe this may be more of a browser-specific issue, and altering it universally might not be the best approach. Some sites might have their own styles to address this, and we could inadvertently disrupt those.
    Instead, I propose offering a “high contrast” setting or a similar feature. This would allow us to enforce focus colors in either light or dark mode within the View Password settings form. We could provide an explanation of its importance, perhaps linking back to this issue, and give site developers the option to enable it deliberately.
    What are your thoughts on this approach? Could you assist me in planning this feature?

  • 🇪🇸Spain teresa_rodriguez Spain

    Hi!
    Changing the visible focus of the browser can be problematic.
    When the background is light, we need a dark visible focus, for contrast, but when the background is dark the visible focus must be light or it will not contrast enough.
    You can always customize the focus for each element, but this is not very maintainable in the long run, because every time the design changes you have to remember to change the focus color on each element, and it is not very aesthetic or consistent to have a focus of different colors on the same website.

    One solution is the two-color focus technique. Visually it is perceived as a solid double black and white border, which allows it to contrast at the same time on light and dark backgrounds.
    By example:

    *:focus {
      padding: 2px;
    	outline: 2px #fff solid;
    	outline-offset: 0;
    	box-shadow: 0 0 0 4px #000;
      border-radius: 2px;
    }
    

    This is a W3C technique.
    At this link you can see code examples and more information:
    https://www.w3.org/WAI/WCAG21/Techniques/css/C40

  • 🇩🇪Germany anacolautti

    Hi Teresa, yes, thank you. I agree with you, a combination of two colors is best.
    This change should be done per site though, and not per Drupal module in my opinion.

    I think this is not something that should be fixed from this module.

    Again, all I can propose, is that we add a setting of some sort to force this for the icon specifically, only if the administrator so decides.

  • 🇮🇳India zartab farooquee

    Please update the View Password module to apply the latest fixes for the low-contrast focus outline issue.

    composer require 'drupal/view_password:^6.0'
    
  • 🇩🇪Germany anacolautti

    I'm sorry, please explain what you meant by updating the module.
    There is no code in the module so far for this feature.

    In my opinion this is not an issue related to the module itself (the focus color comes from the browser), allthough I am willing to implement the solution I mentioned earlier (I haven't yet, I was waiting to see if it was useful for other users as well).

  • Assigned to deepali sardana
  • I have created patch need review.

Production build 0.71.5 2024