[wp-trac] [WordPress Trac] #38764: Twenty Seventeen: update screen-reader-text to reset word-wrap

[WordPress Trac]

#38764: Twenty Seventeen: update screen-reader-text to reset word-wrap
---------------------------+-----------------------------------------
 Reporter:  afercia        |      Owner:
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  4.7
Component:  Bundled Theme  |    Version:  trunk
 Severity:  normal         |   Keywords:  has-screenshots needs-patch
  Focuses:                 |
---------------------------+-----------------------------------------
 Twenty Seventeen makes use of the CSS property `word-wrap` set to `break-
 word` on a few elements, most notably `#page`. When inherited by elements
 visually hidden with the `screen-reader-text` class, screen readers may
 read out words ignoring spaces between words. This issue was already
 addressed in core, see #31962

 [[Image(https://cldup.com/4Lo3PxikRm.png)]]

 I'd recommend to use the same solution adopted by core, resetting the
 property to normal where needed and, to be safe, consider to use
 `!important`:

 {{{
 word-wrap: normal !important;
 }}}

 After resetting to normal:

 [[Image(https://cldup.com/1RanZ7kdaT.png)]]

 Additionally, I'm not sure there's the need for the prefixed `-ms-`
 version, apparently it was used as alias by IE 8:
 https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
  IE8 introduced -ms-word-wrap as a synonym for word-wrap. Don't use the
 -ms- prefix.

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