search

robincornett / genesis-accessible

This plugin fixes some accessibility issues with the Genesis Framework
28 stars 9 forks source link

Focus CSS Causing Problems In Combination with WP Accessibility #29

Open cgrymala opened 9 years ago

cgrymala commented 9 years ago

It appears that the WP Accessibility plugin (https://wordpress.org/plugins/wp-accessibility/) adds a class of focusable and a tabindex of -1 to most widgets.

For example:

<section id="text-10" class="widget widget_text">

becomes:

<section id="text-10" class="widget widget_text focusable" tabindex="-1">

When this happens, the CSS definition at https://github.com/RRWD/genesis-accessible/blob/develop/css/genwpacc-skiplinks.css#L61 can cause some serious contrast issues with themes.

Because the entire widget is now "focusable", clicking anywhere in a widget that has text inside of it will cause that text to turn dark gray (#333). This is a major issue when the background of that widget is dark (in our case, we even have some widget areas where the background of the widget is #333, so the text completely disappears).

Personally, I was able to override this issue by specifically setting a :focus style on my .widget .widget-wrap elements, but it would be nice if there were a cleaner, less redundant way to handle it.

I'm not sure what the solution to this issue is (partially because I'm not sure what the intention is behind setting a :focus CSS definition globally, nor what the intention is for setting the text color on that definition), but I just wanted to bring it to your attention after it took me a good while to actually find & diagnose the issue. Thanks.

GaryJones commented 9 years ago

That :focus is far to generic. It's been bugging me (but I'd not found a definitive breakage like you have).

GaryJones commented 6 years ago

@cgrymala Do you know if this is still an issue?