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

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?

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

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.

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'

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).

I have created patch need review.

fisherman90 → changed the visibility of the branch 6.0.x to hidden.

Added a little issue fork including some CSS refactoring and adding the "button" class to the view_password element.

This should result in it inheriting the default button outline / focus of the theme, since we can assume, that most themes implement a style for the class "button".

https://git.drupalcode.org/issue/view_password-3473338/-/tree/3473338-th...