Upgrading classes on 7.x themes to Drupal 8 or later

Last updated on

14 June 2022

Changes to core classes

Simplified names of "element-x" helper classes

Drupal 7 introduced some new classes: element-hidden, element-invisible and element-focusable. It was difficult to understand exactly what these classes did from their names, so the class names were changed. The new names should make the classes easier to understand and are more consistent with HTML 5 Boilerplate, a popular HTML 5 framework. Here is a conversion and usage table:

Before (7.x)	After (8.x)	Notes
element-hidden	hidden	Hide both visually and from screenreaders (e.g.: an element that will be populated later with JavaScript or an element you will hide with JavaScript).
element-invisible	visually-hidden	Hide visually, but available for screenreaders (e.g.: a menu title).
element-focusable	visually-hidden focusable	Allows a visually-hidden element to be navigated to using the keyboard (e.g.: skip-to-content links). The `focusable` class must be used with `visually-hidden`.
	invisible	This class is new in Drupal 8. It hides the element both visually and from screenreaders, but maintains the visual layout.