wp-admin CSS style conflicts with jQuery-UI breaking form elements in Firefox

[Colin84]

A default CSS style in the wordpress admin interface, which is loaded through load-styles.php either under the name wp-admin or buttons (both of which are inaccessible for removal as they are not listed in the WP_Styles object) interferes with jQuery-ui in such a way that any radio buttons (and possibly other form elements) that are styled with jQuery-ui in the admin interface (such as with a plugin) cause the browser window to jump to the top of the page when clicked. This behavious occurs with the current Wordpress version 3.5.1 using the latest Firefox 19.0 on linux (haven't tested in windows yet). After spending a few hours tracking down the offending code I narrowed it down to this statement in the admin CSS:

.screen-reader-text,.screen-reader-text span,.ui-helper-hidden-accessible {
position:absolute;
left:-1000em;
top:-1000em;
height:1px;
width:1px;
overflow:hidden;
}

The .ui-helper-hidden-accessible class is what is causing the conflict, specifically the "top:-1000em;" statement; due to the negative positioning values when a button is clicked the browser tries to focus on something styled with the ui-helper-hidden-accessible class, which is of course way outside the limits of the browser window. In order to correct the error I had to override it with the following in another stylesheet declared after load-styles.php:

.screen-reader-text,.screen-reader-text span,.ui-helper-hidden-accessible {
position:fixed;
left:1em;
top:1em;
height:1px;
width:1px;
overflow:hidden;
display:none;
}

We should not have to override default styles like this when making plugins, especially when we are using a js library (jQuery-ui) that is included with wordpress. Either the ui-helper-hidden-accessible class needs to be renamed or the negative values removed and replaced with a display:none; statement to fix this bug.

Introduced in [22285] (for #22166).

Could you provide a piece of code to reproduce the issue?

Replying to SergeyBiryukov:

Introduced in [22285] (for #22166).

Could you provide a piece of code to reproduce the issue?

I have uploaded a test page which showcases the issue here -> ​http://colinhunt.com/wp-bug/

Scroll to the bottom and click on the radio buttons to reproduce the bug. The bug is reproducible in the latest Firefox version 19.0 for Linux. Probably in Windows too but haven't tested it there yet. When you view the source code, wp-admin-styles.css is the file with the offending wordpress styles as loaded with wp-admin/load-styles.php?c=0&dir=ltr&load=wp-admin,buttons&ver=3.5.1 in the wordpress admin sections.

I have just confirmed that this bug is present and reproducible in Firefox versions 13.0.1 to 19.0 as well as in Internet Explorer 9 under Windows 7.

display: none defeats the purpose of having accessibility text; please don't do that in your theme or plugin. I'd look into what jQuery UI does in their CSS themes and adjust to that, which we should also do for core.

Replying to helen:

display: none defeats the purpose of having accessibility text; please don't do that in your theme or plugin. I'd look into what jQuery UI does in their CSS themes and adjust to that, which we should also do for core.

OK, I've figured out that just changing the line top:-1000em; to top: auto; in the wordpress CSS file will also fix the problem, at least in Firefox. This shouldn't affect anything for accessibility and there is really no need to set the elements to left: -1000em AND top: -1000em; moving them that far left already pushes it off the screen.

patch to fix css conflicts #23684

This seems to have been introduced in October: http://core.trac.wordpress.org/browser/trunk/wp-admin/css/wp-admin.css?rev=22285 as a fix for #22166

It looks like "display: none;" is not a valid solution here, as it would prevent the text from being read by screen-readers.

As of ​version 1.8.7, jQuery UI has used a clipping rectangle, not off-screen positioning, to hide content:

/trunk/wp-includes/css/jquery-ui-dialog.css:
   17: .ui-helper-hidden-accessible {
   18  	border: 0;
   19  	clip: rect(0 0 0 0);

Since I don't see anything in the commit logs to indicate we're intentionally overriding jQueryUI's behavior here, I'm leaning toward using the clipping rectangle, both for the .ui-helper-hidden-accessible class and for the .screen-reader-text classes. Have found a few articles saying the clipping rectangle does prevent just the sort of issue reported here (e.g. ​this one on snook.ca ).

The more cautious solution, of course, would be to simply remove our overrides of the jQueryUI class and leave .screen-reader-text as is... but I think it's worth keeping the styles consistent, unless we have a good reason not to.

Side note: There are no uses of the class "ui-helper-hidden-accessible" in the current codebase (it seems everything is using screen-reader-text), so that override will *only* affect inserted content, e.g. plugins.

Attaching a patch that updates the styles for .screen-reader-text to match jQueryUI, and removes the overrides of .ui-helper-hidden-accessible.

I've been able to reproduce this in Firefox 20.0, here's a ​snippet that helps. css-conflicts.23684.diff​ looks fine and fixes the issue for me, though probably needs some testing in IE to make sure we don't accidentally reveal any screen reader text.