search

equalizedigital / accessibility-checker

GNU General Public License v2.0
14 stars 8 forks source link

Customer reported contrast fail on CTA button hover state in the ACP upsell on our settings page #694

Closed christophermhinds closed 2 months ago

christophermhinds commented 3 months ago

I did not follow the standard bug report format because I believe this screenshot should be sufficient.

Screenshot 2024-06-28 at 8 43 37 AM

Happy to re-submit if necessary.

pattonwebz commented 3 months ago

@christophermhinds can you ask this customer what browser and version of it they are using? I see something different when I spin up a fresh site for this button. It looks like what they are seeing is backwards compared to what I see.

https://github.com/equalizedigital/accessibility-checker/assets/3902039/e4bfd6f9-4a09-46a3-b38a-0ef7cad37e7d

tdrayson commented 3 months ago

Hey @pattonwebz, I'm using FireFox (developer edition), version 128.

I found removing z-index: 1; from the .edac-pro-callout-button https://github.com/equalizedigital/accessibility-checker/blob/8b602e744374add199c79bb7c00c3c2ba6e70d7b/src/admin/sass/accessibility-checker-admin.scss#L1025

and adding z-index: 0 to .edac-pro-callout https://github.com/equalizedigital/accessibility-checker/blob/8b602e744374add199c79bb7c00c3c2ba6e70d7b/src/admin/sass/accessibility-checker-admin.scss#L973

This seems to fix the issue.

pattonwebz commented 3 months ago

@tdrayson thanks for sharing the browser version you are using. When I tested with FF I found a similar fix worked as well but to figure out why I dug a little deeper and discovered that the difference between what is seen in FF and what I seen in my Chrome when I first looked comes down to differences in how they handle stacking contexts.

Firefox appears to be the only browser that I tested that implements stacking contexts exactly to specification and other browsers have a more loose implementation.

I'll have a solution pushed up tomorrow, will be released in the next plugin release.

Appreciate you reporting this and bringing it to our attention, this was interesting for me to dig into.

tdrayson commented 3 months ago

Perfect, thanks for the investigation. Always fun when different browsers implement specifications differently.... 🤣