[wp-trac] [WordPress Trac] #23684: wp-admin CSS style conflicts with jQuery-UI breaking form elements in Firefox

[WordPress Trac]

#23684: wp-admin CSS style conflicts with jQuery-UI breaking form elements in
Firefox
--------------------------------+------------------
 Reporter:  Colin84             |       Owner:
     Type:  defect (bug)        |      Status:  new
 Priority:  normal              |   Milestone:  3.6
Component:  Administration      |     Version:  3.5
 Severity:  normal              |  Resolution:
 Keywords:  ui-focus has-patch  |
--------------------------------+------------------
Changes (by codebykat):

 * keywords:  ui-focus => ui-focus has-patch


Comment:

 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
 [http://core.trac.wordpress.org/ticket/22166 #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 [http://jqueryui.com/changelog/1.8.7/ 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. [http://snook.ca/archives/html_and_css/hiding-content-for-
 accessibility 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 style for .screen-reader to match
 jQueryUI, and removes the overrides of .ui-helper-hidden-accessible.

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/23684#comment:7>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software