By mparker17 on
Change record status: 
Published (View all published change records)
Project: 
Drupal core
Introduced in branch: 
8.x
Introduced in version: 
8.0-alpha2
Issue links: 
https://www.drupal.org/node/1363112
Description: 

Summary

  • The element-hidden, element-invisible and element-focusable classes were changed to better describe what they do.
  • The new names were derived from the names used for these styles in the HTML5 Boilerplate, a popular and well-known starting point for HTML 5 themes.
  • An invisible class was added to hide elements visually and from screen-readers, but maintain the (visual) layout.
Drupal 8 Drupal 7
<div class="hidden"> <div class="element-hidden">
<div class="visually-hidden"> <div class="element-invisible">
<div class="visually-hidden focusable"> <div class="element-invisible element-focusable">
<div class="invisible"> <div style="visibility: hidden;">

 

When to use these classes

class="hidden"
Do not show to anyone; same as display: none;. Not accessible.

class="visually-hidden"
Do not visually show to anyone, but leave the contents accessible.

class="visually-hidden focusable"
Same as "visually-hidden", but visually show when the element has focus (e.g. when keyboard navigation is used.)

class="invisible"
Render this element as normal, but make everything about it invisible; same as visibility: hidden;. Not accessible.

Impacts: 
Themers
Updates Done (doc team, etc.)
Online documentation: 
Generic online documentation done
Theming guide: 
Theming guide done
Module developer documentation: 
Module developer documentation done
Examples project: 
Not done
Coder Review: 
Not done
Coder Upgrade: 
Not done
Other: 
Other updates done
Details: 

Still need to patch Examples for Developers, Coder.

Progress: 
Added section to [#2023177: Upgrading 7.x themes to 8.x], [#388372: Standard Drupal core styles and classes] and [#2023297: D7 to D8 Upgrade: Generated HTML].