Problem/Motivation
In Drupal 8 some content is being visually hidden (and exposed to screen reader users) using the "visually-hidden" class, which is styled as follows in system.module.css:
.visually-hidden {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
overflow: hidden;
height: 1px;
width: 1px;
}This works as intended, with one exception: width: 1px causes major problems in Firefox if the hidden content inherits word-wrap:break-word. With this combination of properties, Firefox seems to eliminate all spaces from text before exposing the content to assistive technologies. Screen readers attempt to read the content without spaces which sounds like gobbledy-gook.
This problem has been observed in Firefox 22 using JAWS 14, Window-Eyes 7.5, NVDA 2013.1.1.
Here's a test page:
http://terrillthompson.com/tests/clip.html
This is not a problem in Internet Explorer 10 or Chrome 28.
Proposed resolution
Remove width: 1px from the style definition for .visually-hidden.
In Drupal 7, there was a similar class "element-invisible" defined in system.base.css which did not include a width property. Otherwise Drupal 7's "element-invisible" class was identical to Drupal 8's "visually-hidden" class. The symptoms of this problem have not been observed in Drupal 7.
