WordPress.org

Make WordPress Core

Changes between Initial Version and Version 5 of Ticket #23684


Ignore:
Timestamp:
03/04/13 15:29:04 (14 months ago)
Author:
SergeyBiryukov
Comment:

Legend:

Unmodified
Added
Removed
Modified
  • Ticket #23684

    • Property Keywords ui-focus added
    • Property Version changed from 3.5.1 to 3.5
    • Property Milestone changed from Awaiting Review to 3.6
  • Ticket #23684 – Description

    initial v5  
    11A 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: 
    2  
    3  
     2{{{ 
    43.screen-reader-text,.screen-reader-text span,.ui-helper-hidden-accessible { 
    5  
    64position:absolute; 
    7  
    85left:-1000em; 
    9  
    106top:-1000em; 
    11  
    127height:1px; 
    13  
    148width:1px; 
    15  
    169overflow:hidden; 
    17  
    1810} 
    19  
     11}}} 
    2012 
    2113The .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: 
    22  
    23  
     14{{{ 
    2415.screen-reader-text,.screen-reader-text span,.ui-helper-hidden-accessible { 
    25  
    2616position:fixed; 
    27  
    2817left:1em; 
    29  
    3018top:1em; 
    31  
    3219height:1px; 
    33  
    3420width:1px; 
    35  
    3621overflow:hidden; 
    37  
    3822display:none; 
    39  
    4023} 
    41  
     24}}} 
    4225 
    4326We 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.