[wp-trac] [WordPress Trac] #40970: Update and audit the screen-reader-text CSS class used in core

[WordPress Trac]

#40970: Update and audit the screen-reader-text CSS class used in core
-------------------------------+-----------------------------
 Reporter:  afercia            |      Owner:
     Type:  enhancement        |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Administration     |    Version:
 Severity:  normal             |   Keywords:
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 WordPress 4.8 has officially [https://make.wordpress.org/core/2017/04/23
 /target-browser-coverage/ ended support for Internet Explorer versions 8,
 9, and 10]. I'd propose to review the `screen-reader-text` CSS class to
 update it with some more modern properties.

 At the very least, `clip` should be updated to a more modern syntax.
 `clip: rect(0 0 0 0)` is there to support old IE versions, I think IE6,
 IE7? Today, it should be `clip: rect(1px, 1px, 1px, 1px)`.

 The `clip` property itself [https://www.w3.org/TR/css-masking-1/#clip-
 property is now deprecated]. Its modern alternative is `clip-path` but at
 the time of writing it's not supported by IE11 (will never support it),
 Edge, and some mobile browsers, see: http://caniuse.com/#search=clip-path

 One option could be introducing `clip-path: inset(50%)` and keeping `clip`
 for old browsers. This should be carefully evaluated for some edge cases
 where `screen-reader-text` gets reset for some very special uses, for
 example:

 {{{
         .post-com-count .screen-reader-text {
                 position: static;
                 width: auto;
                 height: auto;
                 margin: 0;
         }
 }}}


 Worth noting there are also some places in core where the `screen-reader-
 text` CSS class is slightly different, for example the admin bar, the
 embed template, and Press This.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/40970>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform