- 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