WordPress.org

Make WordPress Core

Changeset 41622


Ignore:
Timestamp:
09/27/2017 05:26:58 PM (2 years ago)
Author:
afercia
Message:

Accessibility: Update and standardize the admin screen-reader-text CSS class.

Given the new WordPress browsers support policy, the screen-reader-text css
class used in the admin can be updated to use modern CSS and correct syntax. See
https://github.com/wpaccessibility/a11ythemepatterns/blob/master/read-more-links/style.css

Worth noting the clip property is deprecated and kept for IE11 and Edge.

  • uses clip-path for modern browsers
  • keeps clip for old browsers and update its value to a correct syntax
  • resets clip-path to none where the class is used to dynamically reveal elements
  • removes an old rule that made screen-reader-text completely invisible in the help tabs #screen-meta
  • standardizes the rule across CSS files

Fixes #40970.

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r41621 r41622  
    122122.screen-reader-text span,
    123123.ui-helper-hidden-accessible {
     124    border: 0;
     125    clip: rect(1px, 1px, 1px, 1px);
     126    clip-path: inset(50%);
     127    height: 1px;
     128    margin: -1px;
     129    overflow: hidden;
     130    padding: 0;
    124131    position: absolute;
    125     margin: -1px;
    126     padding: 0;
    127     height: 1px;
    128132    width: 1px;
    129     overflow: hidden;
    130     clip: rect(0 0 0 0);
    131     border: 0;
    132133    word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
    133134}
     
    16181619}
    16191620
    1620 #screen-meta .screen-reader-text {
    1621     visibility: hidden;
    1622 }
    1623 
    16241621#screen-meta-links {
    16251622    margin: 0 20px 0 0;
  • trunk/src/wp-admin/css/install.css

    r41062 r41622  
    403403.screen-reader-input,
    404404.screen-reader-text {
     405    border: 0;
     406    clip: rect(1px, 1px, 1px, 1px);
     407    clip-path: inset(50%);
     408    height: 1px;
     409    margin: -1px;
     410    overflow: hidden;
     411    padding: 0;
    405412    position: absolute;
    406     margin: -1px;
    407     padding: 0;
    408     height: 1px;
    409413    width: 1px;
    410     overflow: hidden;
    411     clip: rect(0 0 0 0);
    412     border: 0;
     414    word-wrap: normal !important;
    413415}
    414416
  • trunk/src/wp-admin/css/list-tables.css

    r41362 r41622  
    18221822    .post-com-count .screen-reader-text {
    18231823        position: static;
     1824        clip-path: none;
    18241825        width: auto;
    18251826        height: auto;
  • trunk/src/wp-admin/css/nav-menus.css

    r41227 r41622  
    600600.no-js.nav-menus-php .item-edit .screen-reader-text {
    601601    position: static;
     602    clip-path: none;
    602603    width: auto;
    603604    height: auto;
  • trunk/src/wp-includes/css/admin-bar.css

    r41062 r41622  
    692692#wpadminbar .screen-reader-text,
    693693#wpadminbar .screen-reader-text span {
     694    border: 0;
     695    clip: rect(1px, 1px, 1px, 1px);
     696    clip-path: inset(50%);
     697    height: 1px;
     698    margin: -1px;
     699    overflow: hidden;
     700    padding: 0;
    694701    position: absolute;
    695     left: -1000em;
    696     top: -1000em;
    697     height: 1px;
    698702    width: 1px;
    699     overflow: hidden;
     703    word-wrap: normal !important;
    700704}
    701705
  • trunk/src/wp-includes/css/wp-embed-template.css

    r41062 r41622  
    1010/* Text meant only for screen readers */
    1111.screen-reader-text {
     12    border: 0;
    1213    clip: rect(1px, 1px, 1px, 1px);
     14    clip-path: inset(50%);
    1315    height: 1px;
     16    margin: -1px;
    1417    overflow: hidden;
    15     position: absolute !important;
     18    padding: 0;
     19    position: absolute;
    1620    width: 1px;
     21    word-wrap: normal !important;
    1722}
    1823
Note: See TracChangeset for help on using the changeset viewer.