summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlex Pott2013-06-17 19:58:27 (GMT)
committer Alex Pott2013-06-17 19:58:27 (GMT)
commitda1b134af1fc747d27e76619460b3bafec636a0d (patch)
tree9f186fd2c6107b82d5df622fc383f625529d0092
parent0204ee8e86c3bd450bc44e42e7a8f70cc21bf9ab (diff)
Issue #1363112 by mparker17, mgifford, tlattimore, Jacine, dcmouyard, bowersox, ry5n, ahdiaz: Simplify names of 'element-x' helper classes.
-rw-r--r--core/includes/form.inc4
-rw-r--r--core/includes/menu.inc6
-rw-r--r--core/includes/pager.inc2
-rw-r--r--core/includes/theme.inc12
-rw-r--r--core/includes/theme.maintenance.inc4
-rw-r--r--core/misc/announce.js2
-rw-r--r--core/misc/autocomplete.js2
-rw-r--r--core/misc/collapse.js2
-rw-r--r--core/misc/dropbutton/dropbutton.js2
-rw-r--r--core/misc/vertical-tabs.js2
-rw-r--r--core/modules/aggregator/templates/aggregator-summary-items.html.twig2
-rw-r--r--core/modules/block/lib/Drupal/block/BlockFormController.php2
-rw-r--r--core/modules/book/templates/book-navigation.html.twig2
-rw-r--r--core/modules/ckeditor/ckeditor.admin.inc2
-rw-r--r--core/modules/comment/templates/comment.html.twig4
-rw-r--r--core/modules/contextual/contextual.js10
-rw-r--r--core/modules/contextual/contextual.module2
-rw-r--r--core/modules/contextual/contextual.toolbar.js2
-rw-r--r--core/modules/contextual/css/contextual.module.css2
-rw-r--r--core/modules/contextual/css/contextual.theme.css4
-rw-r--r--core/modules/contextual/css/contextual.toolbar.css2
-rw-r--r--core/modules/edit/js/edit.js2
-rw-r--r--core/modules/field_ui/lib/Drupal/field_ui/DisplayOverview.php2
-rw-r--r--core/modules/forum/forum.module4
-rw-r--r--core/modules/forum/templates/forum-icon.html.twig2
-rw-r--r--core/modules/forum/templates/forum-list.html.twig2
-rw-r--r--core/modules/locale/templates/locale-translation-update-info.html.twig2
-rw-r--r--core/modules/node/lib/Drupal/node/NodeRenderController.php2
-rw-r--r--core/modules/node/lib/Drupal/node/Tests/PageEditTest.php2
-rw-r--r--core/modules/overlay/css/overlay-parent.css2
-rw-r--r--core/modules/overlay/overlay-child.js6
-rw-r--r--core/modules/overlay/overlay-parent.js2
-rw-r--r--core/modules/overlay/overlay.module4
-rw-r--r--core/modules/overlay/templates/overlay-disable-message.html.twig2
-rw-r--r--core/modules/overlay/templates/overlay.html.twig4
-rw-r--r--core/modules/system/css/system.module.css17
-rw-r--r--core/modules/system/lib/Drupal/system/Tests/Form/ElementsLabelsTest.php4
-rw-r--r--core/modules/system/system.admin.inc8
-rw-r--r--core/modules/system/templates/html.html.twig2
-rw-r--r--core/modules/toolbar/js/toolbar.js2
-rw-r--r--core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.module2
-rw-r--r--core/modules/toolbar/toolbar.module4
-rw-r--r--core/modules/tour/css/tour.module.css2
-rw-r--r--core/modules/tour/js/tour.js2
-rw-r--r--core/modules/tour/lib/Drupal/tour/TourRenderController.php2
-rw-r--r--core/modules/tour/tour.module2
-rw-r--r--core/modules/translation_entity/translation_entity.admin.inc6
-rw-r--r--core/modules/views_ui/js/views-admin.js2
-rw-r--r--core/modules/views_ui/lib/Drupal/views_ui/Form/Ajax/ReorderDisplays.php2
-rw-r--r--core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php6
-rw-r--r--core/themes/bartik/css/style.css4
-rw-r--r--core/themes/bartik/templates/comment.html.twig4
-rw-r--r--core/themes/bartik/templates/maintenance-page.html.twig8
-rw-r--r--core/themes/bartik/templates/page.html.twig12
-rw-r--r--core/themes/seven/templates/page.html.twig2
55 files changed, 105 insertions, 98 deletions
diff --git a/core/includes/form.inc b/core/includes/form.inc
index a10a8d2..b23bd28 100644
--- a/core/includes/form.inc
+++ b/core/includes/form.inc
@@ -2873,7 +2873,7 @@ function theme_fieldset($variables) {
$legend_attributes = array();
if (isset($element['#title_display']) && $element['#title_display'] == 'invisible') {
- $legend_attributes['class'][] = 'element-invisible';
+ $legend_attributes['class'][] = 'visually-hidden';
}
$output = '<fieldset' . new Attribute($element['#attributes']) . '>';
@@ -4805,7 +4805,7 @@ function theme_form_element_label($variables) {
}
// Show label only to screen readers to avoid disruption in visual flows.
elseif ($element['#title_display'] == 'invisible') {
- $attributes['class'] = 'element-invisible';
+ $attributes['class'] = 'visually-hidden';
}
if (!empty($element['#id'])) {
diff --git a/core/includes/menu.inc b/core/includes/menu.inc
index cd8121d..6038fa5 100644
--- a/core/includes/menu.inc
+++ b/core/includes/menu.inc
@@ -1662,7 +1662,7 @@ function theme_menu_local_task($variables) {
if (!empty($variables['element']['#active'])) {
// Add text to indicate active tab for non-visual users.
- $active = '<span class="element-invisible">' . t('(active tab)') . '</span>';
+ $active = '<span class="visually-hidden">' . t('(active tab)') . '</span>';
// If the link does not contain HTML already, check_plain() it now.
// After we set 'html'=TRUE the link will not be sanitized by l().
@@ -2304,13 +2304,13 @@ function theme_menu_local_tasks(&$variables) {
$output = '';
if (!empty($variables['primary'])) {
- $variables['primary']['#prefix'] = '<h2 class="element-invisible">' . t('Primary tabs') . '</h2>';
+ $variables['primary']['#prefix'] = '<h2 class="visually-hidden">' . t('Primary tabs') . '</h2>';
$variables['primary']['#prefix'] .= '<ul class="tabs primary">';
$variables['primary']['#suffix'] = '</ul>';
$output .= drupal_render($variables['primary']);
}
if (!empty($variables['secondary'])) {
- $variables['secondary']['#prefix'] = '<h2 class="element-invisible">' . t('Secondary tabs') . '</h2>';
+ $variables['secondary']['#prefix'] = '<h2 class="visually-hidden">' . t('Secondary tabs') . '</h2>';
$variables['secondary']['#prefix'] .= '<ul class="tabs secondary">';
$variables['secondary']['#suffix'] = '</ul>';
$output .= drupal_render($variables['secondary']);
diff --git a/core/includes/pager.inc b/core/includes/pager.inc
index 4c497ba..b073e3d 100644
--- a/core/includes/pager.inc
+++ b/core/includes/pager.inc
@@ -309,7 +309,7 @@ function theme_pager($variables) {
'#markup' => $li_last,
);
}
- return '<h2 class="element-invisible">' . t('Pages') . '</h2>' . theme('item_list', array(
+ return '<h2 class="visually-hidden">' . t('Pages') . '</h2>' . theme('item_list', array(
'items' => $items,
'attributes' => array('class' => array('pager')),
));
diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index ae8ec15..a07cae3 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1651,7 +1651,7 @@ function theme_status_messages($variables) {
foreach (drupal_get_messages($display) as $type => $messages) {
$output .= "<div class=\"messages messages--$type\">\n";
if (!empty($status_heading[$type])) {
- $output .= '<h2 class="element-invisible">' . $status_heading[$type] . "</h2>\n";
+ $output .= '<h2 class="visually-hidden">' . $status_heading[$type] . "</h2>\n";
}
if (count($messages) > 1) {
$output .= " <ul class=\"messages__list\">\n";
@@ -1716,7 +1716,7 @@ function theme_link($variables) {
* When using a string it will be used as the text of the heading and the
* level will default to 'h2'. Headings should be used on navigation menus
* and any list of links that consistently appears on multiple pages. To
- * make the heading invisible use the 'element-invisible' CSS class. Do not
+ * make the heading invisible use the 'visually-hidden' CSS class. Do not
* use 'display:none', which removes it from screen-readers and assistive
* technology. Headings allow screen-reader and keyboard only users to
* navigate to or skip the links. See
@@ -1884,8 +1884,8 @@ function theme_breadcrumb($variables) {
if (!empty($breadcrumb)) {
$output .= '<nav role="navigation" class="breadcrumb">';
// Provide a navigational heading to give context for breadcrumb links to
- // screen-reader users. Make the heading invisible with .element-invisible.
- $output .= '<h2 class="element-invisible">' . t('You are here') . '</h2>';
+ // screen-reader users. Make the heading invisible with .visually-hidden.
+ $output .= '<h2 class="visually-hidden">' . t('You are here') . '</h2>';
$output .= '<ol><li>' . implode('</li><li>', $breadcrumb) . '</li></ol>';
$output .= '</nav>';
}
@@ -2817,7 +2817,7 @@ function template_preprocess_page(&$variables) {
),
'#heading' => array(
'text' => t('Main menu'),
- 'class' => array('element-invisible'),
+ 'class' => array('visually-hidden'),
)
);
}
@@ -2831,7 +2831,7 @@ function template_preprocess_page(&$variables) {
),
'#heading' => array(
'text' => t('Secondary menu'),
- 'class' => array('element-invisible'),
+ 'class' => array('visually-hidden'),
)
);
}
diff --git a/core/includes/theme.maintenance.inc b/core/includes/theme.maintenance.inc
index 6a07c71..55809e4 100644
--- a/core/includes/theme.maintenance.inc
+++ b/core/includes/theme.maintenance.inc
@@ -123,7 +123,7 @@ function theme_task_list($variables) {
$active = $variables['active'];
$done = isset($items[$active]) || $active == NULL;
- $output = '<h2 class="element-invisible">Installation tasks</h2>';
+ $output = '<h2 class="visually-hidden">Installation tasks</h2>';
$output .= '<ol class="task-list">';
foreach ($items as $k => $item) {
@@ -139,7 +139,7 @@ function theme_task_list($variables) {
$output .= '<li';
$output .= ($class ? ' class="' . $class . '"' : '') . '>';
$output .= $item;
- $output .= ($status ? '<span class="element-invisible">' . $status . '</span>' : '');
+ $output .= ($status ? '<span class="visually-hidden">' . $status . '</span>' : '');
$output .= '</li>';
}
$output .= '</ol>';
diff --git a/core/misc/announce.js b/core/misc/announce.js
index 3037436..dbefeb6 100644
--- a/core/misc/announce.js
+++ b/core/misc/announce.js
@@ -31,7 +31,7 @@
if (!liveElement) {
liveElement = document.createElement('div');
liveElement.id = 'drupal-live-announce';
- liveElement.className = 'element-invisible';
+ liveElement.className = 'visually-hidden';
liveElement.setAttribute('aria-live', 'polite');
liveElement.setAttribute('aria-busy', 'false');
document.body.appendChild(liveElement);
diff --git a/core/misc/autocomplete.js b/core/misc/autocomplete.js
index fa74a75..a11ddf4 100644
--- a/core/misc/autocomplete.js
+++ b/core/misc/autocomplete.js
@@ -19,7 +19,7 @@ Drupal.behaviors.autocomplete = {
$($input[0].form).submit(Drupal.autocompleteSubmit);
$input.parent()
.attr('role', 'application')
- .append($('<span class="element-invisible" aria-live="assertive"></span>')
+ .append($('<span class="visually-hidden" aria-live="assertive"></span>')
.attr('id', $input[0].id + '-autocomplete-aria-live')
);
new Drupal.jsAC($input, acdb[uri]);
diff --git a/core/misc/collapse.js b/core/misc/collapse.js
index 9860ebf..5622d08 100644
--- a/core/misc/collapse.js
+++ b/core/misc/collapse.js
@@ -60,7 +60,7 @@ $.extend(CollapsibleDetails.prototype, {
// Turn the summary into a clickable link.
var $legend = this.$node.find('> summary');
- $('<span class="details-summary-prefix element-invisible"></span>')
+ $('<span class="details-summary-prefix visually-hidden"></span>')
.append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show'))
.prependTo($legend)
.after(' ');
diff --git a/core/misc/dropbutton/dropbutton.js b/core/misc/dropbutton/dropbutton.js
index daebca2..22fe4ef 100644
--- a/core/misc/dropbutton/dropbutton.js
+++ b/core/misc/dropbutton/dropbutton.js
@@ -154,7 +154,7 @@ $.extend(Drupal.theme, {
* A string representing a DOM fragment.
*/
dropbuttonToggle: function (options) {
- return '<li class="dropbutton-toggle"><button type="button" role="button"><span class="dropbutton-arrow"><span class="element-invisible">' + options.title + '</span></span></button></li>';
+ return '<li class="dropbutton-toggle"><button type="button" role="button"><span class="dropbutton-arrow"><span class="visually-hidden">' + options.title + '</span></span></button></li>';
}
});
diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js
index 1421533..acd181b 100644
--- a/core/misc/vertical-tabs.js
+++ b/core/misc/vertical-tabs.js
@@ -132,7 +132,7 @@ Drupal.verticalTab.prototype = {
this.item.addClass('selected');
// Mark the active tab for screen readers.
$('#active-vertical-tab').remove();
- this.link.append('<span id="active-vertical-tab" class="element-invisible">' + Drupal.t('(active tab)') + '</span>');
+ this.link.append('<span id="active-vertical-tab" class="visually-hidden">' + Drupal.t('(active tab)') + '</span>');
},
/**
diff --git a/core/modules/aggregator/templates/aggregator-summary-items.html.twig b/core/modules/aggregator/templates/aggregator-summary-items.html.twig
index 5376fda..12df970 100644
--- a/core/modules/aggregator/templates/aggregator-summary-items.html.twig
+++ b/core/modules/aggregator/templates/aggregator-summary-items.html.twig
@@ -20,5 +20,5 @@
<h3>{{ title }}</h3>
{{ summary_list }}
<div class="links">
- <a href="{{ source_url }}">{{ 'More<span class="element-invisible"> posts about %title</span>'|t({ '%title': title }) }}</a>
+ <a href="{{ source_url }}">{{ 'More<span class="visually-hidden"> posts about %title</span>'|t({ '%title': title }) }}</a>
</div>
diff --git a/core/modules/block/lib/Drupal/block/BlockFormController.php b/core/modules/block/lib/Drupal/block/BlockFormController.php
index 335a9cd..828c5d4 100644
--- a/core/modules/block/lib/Drupal/block/BlockFormController.php
+++ b/core/modules/block/lib/Drupal/block/BlockFormController.php
@@ -101,7 +101,7 @@ class BlockFormController extends EntityFormController {
);
$form['visibility']['path']['pages'] = array(
'#type' => 'textarea',
- '#title' => '<span class="element-invisible">' . $title . '</span>',
+ '#title' => '<span class="visually-hidden">' . $title . '</span>',
'#default_value' => !empty($visibility['path']['pages']) ? $visibility['path']['pages'] : '',
'#description' => $description,
);
diff --git a/core/modules/book/templates/book-navigation.html.twig b/core/modules/book/templates/book-navigation.html.twig
index 82e02fd..8dae15f 100644
--- a/core/modules/book/templates/book-navigation.html.twig
+++ b/core/modules/book/templates/book-navigation.html.twig
@@ -36,7 +36,7 @@
<nav id="book-navigation-{{ book_id }}" class="book-navigation">
{{ tree }}
{% if has_links %}
- <h2 class="element-invisible">{{ 'Book Navigation'|t }}</h2>
+ <h2 class="visually-hidden">{{ 'Book Navigation'|t }}</h2>
<ul class="book-pager">
{% if prev_url %}
<li class="previous">
diff --git a/core/modules/ckeditor/ckeditor.admin.inc b/core/modules/ckeditor/ckeditor.admin.inc
index e2aa8a3..cd043ac 100644
--- a/core/modules/ckeditor/ckeditor.admin.inc
+++ b/core/modules/ckeditor/ckeditor.admin.inc
@@ -124,7 +124,7 @@ function theme_ckeditor_settings_toolbar($variables) {
// aria-live region for outputing aural information about the state of the
// configuration.
- $output .= '<div id="ckeditor-button-configuration-aria-live" class="element-invisible" aria-live="polite"></div>';
+ $output .= '<div id="ckeditor-button-configuration-aria-live" class="visually-hidden" aria-live="polite"></div>';
$output .= '<div id="ckeditor-button-description" class="fieldset-description">' . t('Move a button into the <em>Active toolbar</em> to enable it, or into the list of <em>Available buttons</em> to disable it. Use dividers to create button groups. Buttons may be moved with the mouse or keyboard arrow keys.') . '</div>';
diff --git a/core/modules/comment/templates/comment.html.twig b/core/modules/comment/templates/comment.html.twig
index 4b441dd..857a90a 100644
--- a/core/modules/comment/templates/comment.html.twig
+++ b/core/modules/comment/templates/comment.html.twig
@@ -52,7 +52,7 @@
* 'parent_author' and 'parent_created' during template_preprocess_comment().
* This information is presented to help screen readers follow lengthy
* discussion threads. You can hide this from sighted users using the class
- * element-invisible.
+ * visually-hidden.
*
* These two variables are provided for context:
* - comment: Full comment object.
@@ -85,7 +85,7 @@
reader without this information.
#}
{% if parent %}
- <p class="parent element-invisible">{{ parent }}</p>
+ <p class="parent visually-hidden">{{ parent }}</p>
{% endif %}
{{ permalink }}
diff --git a/core/modules/contextual/contextual.js b/core/modules/contextual/contextual.js
index 18a5be1..ffdb73e 100644
--- a/core/modules/contextual/contextual.js
+++ b/core/modules/contextual/contextual.js
@@ -91,11 +91,11 @@ function adjustIfNestedAndOverlapping ($contextual) {
// Retrieve height of nested contextual link.
var height = 0;
var $trigger = $nestedContextual.find('.trigger');
- // Elements with the .element-invisible class have no dimensions, so this
+ // Elements with the .visually-hidden class have no dimensions, so this
// class must be temporarily removed to the calculate the height.
- $trigger.removeClass('element-invisible');
+ $trigger.removeClass('visually-hidden');
height = $nestedContextual.height();
- $trigger.addClass('element-invisible');
+ $trigger.addClass('visually-hidden');
// Adjust nested contextual link's position.
$nestedContextual.css({ top: $nestedContextual.position().top + height });
@@ -275,7 +275,7 @@ Drupal.contextual = {
// The open state determines if the links are visible.
.toggleClass('open', isOpen)
// Update the visibility of the trigger.
- .find('.trigger').toggleClass('element-invisible', !isVisible);
+ .find('.trigger').toggleClass('visually-hidden', !isVisible);
// Nested contextual region handling: hide any nested contextual triggers.
if ('isOpen' in this.model.changed) {
@@ -411,7 +411,7 @@ Drupal.contextual.collection = new Backbone.Collection([], { model: Drupal.conte
* A string representing a DOM fragment.
*/
Drupal.theme.contextualTrigger = function () {
- return '<button class="trigger element-invisible element-focusable" type="button"></button>';
+ return '<button class="trigger visually-hidden focusable" type="button"></button>';
};
})(jQuery, Drupal, drupalSettings, Backbone, Modernizr);
diff --git a/core/modules/contextual/contextual.module b/core/modules/contextual/contextual.module
index f67d52d..6a3fba9 100644
--- a/core/modules/contextual/contextual.module
+++ b/core/modules/contextual/contextual.module
@@ -40,7 +40,7 @@ function contextual_toolbar() {
),
),
'#wrapper_attributes' => array(
- 'class' => array('element-hidden', 'contextual-toolbar-tab'),
+ 'class' => array('hidden', 'contextual-toolbar-tab'),
),
'#attached' => array(
'library' => array(
diff --git a/core/modules/contextual/contextual.toolbar.js b/core/modules/contextual/contextual.toolbar.js
index feea0cf..ecd19d92 100644
--- a/core/modules/contextual/contextual.toolbar.js
+++ b/core/modules/contextual/contextual.toolbar.js
@@ -150,7 +150,7 @@ Drupal.contextualToolbar = {
*/
render: function () {
// Render the visibility.
- this.$el.toggleClass('element-hidden', !this.model.get('isVisible'));
+ this.$el.toggleClass('hidden', !this.model.get('isVisible'));
// Render the state.
this.$el.find('button').toggleClass('active', !this.model.get('isViewing'));
diff --git a/core/modules/contextual/css/contextual.module.css b/core/modules/contextual/css/contextual.module.css
index 4d8d908..2a21e1b 100644
--- a/core/modules/contextual/css/contextual.module.css
+++ b/core/modules/contextual/css/contextual.module.css
@@ -7,7 +7,7 @@
position: relative;
}
.contextual .trigger:focus {
- /* Override the .element-focusable position: static */
+ /* Override the .focusable position: static */
position: relative !important;
}
.contextual-links {
diff --git a/core/modules/contextual/css/contextual.theme.css b/core/modules/contextual/css/contextual.theme.css
index 7a34421..a371afa 100644
--- a/core/modules/contextual/css/contextual.theme.css
+++ b/core/modules/contextual/css/contextual.theme.css
@@ -34,7 +34,7 @@
border: 1px solid #ddd;
border-radius: 13px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
- /* Override the .element-focusable height: auto */
+ /* Override the .focusable height: auto */
height: 28px !important;
float: right; /* LTR */
margin: 0;
@@ -42,7 +42,7 @@
padding: 0 2px;
position: relative;
right: 2px; /* LTR */
- /* Override the .element-focusable height: auto */
+ /* Override the .focusable height: auto */
width: 28px !important;
text-indent: -9999px;
cursor: pointer;
diff --git a/core/modules/contextual/css/contextual.toolbar.css b/core/modules/contextual/css/contextual.toolbar.css
index 69fc317..72baa68 100644
--- a/core/modules/contextual/css/contextual.toolbar.css
+++ b/core/modules/contextual/css/contextual.toolbar.css
@@ -32,6 +32,6 @@
}
/* @todo get rid of this declaration by making toolbar.module's CSS less specific */
-.js .toolbar .bar .contextual-toolbar-tab.tab.element-hidden {
+.js .toolbar .bar .contextual-toolbar-tab.tab.hidden {
display: none;
}
diff --git a/core/modules/edit/js/edit.js b/core/modules/edit/js/edit.js
index a3c1fd7..d5e984e 100644
--- a/core/modules/edit/js/edit.js
+++ b/core/modules/edit/js/edit.js
@@ -279,7 +279,7 @@ function loadMissingEditors (callback) {
// @todo Simplify this once https://drupal.org/node/1533366 lands.
var id = 'edit-load-editors';
// Create a temporary element to be able to use Drupal.ajax.
- var $el = $('<div id="' + id + '" class="element-hidden"></div>').appendTo('body');
+ var $el = $('<div id="' + id + '" class="hidden"></div>').appendTo('body');
// Create a Drupal.ajax instance to load the form.
Drupal.ajax[id] = new Drupal.ajax(id, $el, {
url: Drupal.url('edit/attachments'),
diff --git a/core/modules/field_ui/lib/Drupal/field_ui/DisplayOverview.php b/core/modules/field_ui/lib/Drupal/field_ui/DisplayOverview.php
index e77dfee..bb09eab 100644
--- a/core/modules/field_ui/lib/Drupal/field_ui/DisplayOverview.php
+++ b/core/modules/field_ui/lib/Drupal/field_ui/DisplayOverview.php
@@ -429,7 +429,7 @@ class DisplayOverview extends OverviewBase {
// spinners will be added manually by the client-side script.
'progress' => 'none',
),
- '#attributes' => array('class' => array('element-invisible'))
+ '#attributes' => array('class' => array('visually-hidden'))
);
$form['actions'] = array('#type' => 'actions');
diff --git a/core/modules/forum/forum.module b/core/modules/forum/forum.module
index 75436a3..7cc950f 100644
--- a/core/modules/forum/forum.module
+++ b/core/modules/forum/forum.module
@@ -1088,7 +1088,7 @@ function template_preprocess_forum_list(&$variables) {
if ($user->uid) {
$variables['forums'][$id]->new_topics = _forum_topics_unread($forum->id(), $user->uid);
if ($variables['forums'][$id]->new_topics) {
- $variables['forums'][$id]->new_text = format_plural($variables['forums'][$id]->new_topics, '1 new post<span class="element-invisible"> in forum %title</span>', '@count new posts<span class="element-invisible"> in forum %title</span>', array('%title' => $variables['forums'][$id]->label()));
+ $variables['forums'][$id]->new_text = format_plural($variables['forums'][$id]->new_topics, '1 new post<span class="visually-hidden"> in forum %title</span>', '@count new posts<span class="visually-hidden"> in forum %title</span>', array('%title' => $variables['forums'][$id]->label()));
$variables['forums'][$id]->new_url = url('forum/' . $forum->id(), array('fragment' => 'new'));
$variables['forums'][$id]->icon_class = 'new';
$variables['forums'][$id]->icon_title = t('New posts');
@@ -1163,7 +1163,7 @@ function template_preprocess_forum_topic_list(&$variables) {
$variables['topics'][$id]->new_text = '';
$variables['topics'][$id]->new_url = '';
if ($topic->new_replies) {
- $variables['topics'][$id]->new_text = format_plural($topic->new_replies, '1 new post<span class="element-invisible"> in topic %title</span>', '@count new posts<span class="element-invisible"> in topic %title</span>', array('%title' => $variables['topics'][$id]->title));
+ $variables['topics'][$id]->new_text = format_plural($topic->new_replies, '1 new post<span class="visually-hidden"> in topic %title</span>', '@count new posts<span class="visually-hidden"> in topic %title</span>', array('%title' => $variables['topics'][$id]->title));
$variables['topics'][$id]->new_url = url("node/$topic->nid", array('query' => comment_new_page_count($topic->comment_count, $topic->new_replies, $topic), 'fragment' => 'new'));
}
diff --git a/core/modules/forum/templates/forum-icon.html.twig b/core/modules/forum/templates/forum-icon.html.twig
index eafbe06..986e1a6 100644
--- a/core/modules/forum/templates/forum-icon.html.twig
+++ b/core/modules/forum/templates/forum-icon.html.twig
@@ -22,5 +22,5 @@
{% if first_new -%}
<a id="new"></a>
{%- endif %}
- <span class="element-invisible">{{ icon_title }}</span>
+ <span class="visually-hidden">{{ icon_title }}</span>
</div>
diff --git a/core/modules/forum/templates/forum-list.html.twig b/core/modules/forum/templates/forum-list.html.twig
index fd55a77..b114c3e 100644
--- a/core/modules/forum/templates/forum-list.html.twig
+++ b/core/modules/forum/templates/forum-list.html.twig
@@ -57,7 +57,7 @@
#}
{% for i in 1..forum.depth if forum.depth > 0 %}<div class="indent">{% endfor %}
<div class="icon forum-status-{{ forum.icon_class }}" title="{{ forum.icon_title }}">
- <span class="element-invisible">{{ forum.icon_title }}</span>
+ <span class="visually-hidden">{{ forum.icon_title }}</span>
</div>
<div class="name"><a href="{{ forum.link }}">{{ forum.label }}</a></div>
{% if forum.description.value %}
diff --git a/core/modules/locale/templates/locale-translation-update-info.html.twig b/core/modules/locale/templates/locale-translation-update-info.html.twig
index f469d3c..183c427 100644
--- a/core/modules/locale/templates/locale-translation-update-info.html.twig
+++ b/core/modules/locale/templates/locale-translation-update-info.html.twig
@@ -20,7 +20,7 @@
*/
#}
<div class="inner" tabindex="0" role="button">
- <span class="update-description-prefix element-invisible">Show description</span>
+ <span class="update-description-prefix visually-hidden">Show description</span>
{% if modules %}
<span class="text">{{ 'Updates for: @modules'|t({'@modules': modules|join(', ')}) }}</span>
{% elseif missing_updates_status %}
diff --git a/core/modules/node/lib/Drupal/node/NodeRenderController.php b/core/modules/node/lib/Drupal/node/NodeRenderController.php
index 05e13da..a58a96f 100644
--- a/core/modules/node/lib/Drupal/node/NodeRenderController.php
+++ b/core/modules/node/lib/Drupal/node/NodeRenderController.php
@@ -46,7 +46,7 @@ class NodeRenderController extends EntityRenderController {
if ($view_mode == 'teaser') {
$node_title_stripped = strip_tags($entity->label());
$links['node-readmore'] = array(
- 'title' => t('Read more<span class="element-invisible"> about @title</span>', array(
+ 'title' => t('Read more<span class="visually-hidden"> about @title</span>', array(
'@title' => $node_title_stripped,
)),
'href' => 'node/' . $entity->nid,
diff --git a/core/modules/node/lib/Drupal/node/Tests/PageEditTest.php b/core/modules/node/lib/Drupal/node/Tests/PageEditTest.php
index 8d963d4..c37a227 100644
--- a/core/modules/node/lib/Drupal/node/Tests/PageEditTest.php
+++ b/core/modules/node/lib/Drupal/node/Tests/PageEditTest.php
@@ -57,7 +57,7 @@ class PageEditTest extends NodeTestBase {
$this->assertEqual($edit_url, $actual_url, 'On edit page.');
// Check that the title and body fields are displayed with the correct values.
- $active = '<span class="element-invisible">' . t('(active tab)') . '</span>';
+ $active = '<span class="visually-hidden">' . t('(active tab)') . '</span>';
$link_text = t('!local-task-title!active', array('!local-task-title' => t('Edit'), '!active' => $active));
$this->assertText(strip_tags($link_text), 0, 'Edit tab found and marked active.');
$this->assertFieldByName($title_key, $edit[$title_key], 'Title field displayed.');
diff --git a/core/modules/overlay/css/overlay-parent.css b/core/modules/overlay/css/overlay-parent.css
index 0447f53..c036aa9 100644
--- a/core/modules/overlay/css/overlay-parent.css
+++ b/core/modules/overlay/css/overlay-parent.css
@@ -43,7 +43,7 @@ html.overlay-open .displace-bottom {
/**
* Within the overlay parent, the message about disabling the overlay is for
* screen-reader users only. It is always kept invisible with the
- * element-invisible class, and removed from the tab order. Overlay-child.css
+ * visually-hidden class, and removed from the tab order. Overlay-child.css
* contains styling for the same message appearing within the overlay, and
* intended for sighted users.
*/
diff --git a/core/modules/overlay/overlay-child.js b/core/modules/overlay/overlay-child.js
index be43628..cd7cdee 100644
--- a/core/modules/overlay/overlay-child.js
+++ b/core/modules/overlay/overlay-child.js
@@ -69,11 +69,11 @@ Drupal.behaviors.overlayChild = {
$(context).find('#overlay-disable-message')
.focusin(function () {
$(this).addClass('overlay-disable-message-focused')
- .find('a.element-focusable').removeClass('element-invisible');
+ .find('a.focusable').removeClass('visually-hidden');
})
.focusout(function () {
$(this).removeClass('overlay-disable-message-focused')
- .find('a.element-focusable').addClass('element-invisible');
+ .find('a.focusable').addClass('visually-hidden');
});
}
};
@@ -157,7 +157,7 @@ Drupal.overlayChild.behaviors.tabs = function (context, settings) {
$('#overlay-tabs > li > a').bind('click.drupal-overlay', function () {
var active_tab = Drupal.t('(active tab)');
- $tabsLinks.parent().siblings().removeClass('active').find('element-invisible:contains(' + active_tab + ')').appendTo(this);
+ $tabsLinks.parent().siblings().removeClass('active').find('visually-hidden:contains(' + active_tab + ')').appendTo(this);
$(this).parent().addClass('active');
});
};
diff --git a/core/modules/overlay/overlay-parent.js b/core/modules/overlay/overlay-parent.js
index a8a32d6..4f45299 100644
--- a/core/modules/overlay/overlay-parent.js
+++ b/core/modules/overlay/overlay-parent.js
@@ -342,7 +342,7 @@ Drupal.overlay.loadChild = function (event) {
Drupal.overlay.setFocusBefore = function ($element, document) {
// Create an anchor inside the placeholder document.
var placeholder = document.createElement('a');
- var $placeholder = $(placeholder).addClass('element-invisible').attr('href', '#');
+ var $placeholder = $(placeholder).addClass('visually-hidden').attr('href', '#');
// Put the placeholder where it belongs, and set the document focus to it.
$placeholder.insertBefore($element);
$placeholder.attr('autofocus', true);
diff --git a/core/modules/overlay/overlay.module b/core/modules/overlay/overlay.module
index b158083..103a810 100644
--- a/core/modules/overlay/overlay.module
+++ b/core/modules/overlay/overlay.module
@@ -381,9 +381,9 @@ function template_preprocess_overlay_disable_message(&$variables) {
// screen-reader users, this message appears in both the parent and child
// documents, but only the one in the child document is part of the tab order.
foreach (array('profile_link', 'dismiss_message_link') as $key) {
- $element[$key]['#options']['attributes']['class'][] = 'element-invisible';
+ $element[$key]['#options']['attributes']['class'][] = 'visually-hidden';
if (overlay_get_mode() == 'child') {
- $element[$key]['#options']['attributes']['class'][] = 'element-focusable';
+ $element[$key]['#options']['attributes']['class'][] = 'focusable';
}
}
diff --git a/core/modules/overlay/templates/overlay-disable-message.html.twig b/core/modules/overlay/templates/overlay-disable-message.html.twig
index e752da5..46de92d 100644
--- a/core/modules/overlay/templates/overlay-disable-message.html.twig
+++ b/core/modules/overlay/templates/overlay-disable-message.html.twig
@@ -14,6 +14,6 @@
*/
#}
<div id="overlay-disable-message" class="clearfix">
- <h3 class="element-invisible">{{ 'Options for the administrative overlay'|t }}</h3>
+ <h3 class="visually-hidden">{{ 'Options for the administrative overlay'|t }}</h3>
{{ profile_link }} {{ dismiss_link }}
</div>
diff --git a/core/modules/overlay/templates/overlay.html.twig b/core/modules/overlay/templates/overlay.html.twig
index f54633e..7f91d0e 100644
--- a/core/modules/overlay/templates/overlay.html.twig
+++ b/core/modules/overlay/templates/overlay.html.twig
@@ -26,10 +26,10 @@
<h1{{ title_attributes }}>{{ title }}</h1>
</div>
<div id="overlay-close-wrapper">
- <a id="overlay-close" href="#" class="overlay-close" role="button" aria-controls="overlay-content"><span class="element-invisible">{{ 'Close overlay'|t }}</span></a>
+ <a id="overlay-close" href="#" class="overlay-close" role="button" aria-controls="overlay-content"><span class="visually-hidden">{{ 'Close overlay'|t }}</span></a>
</div>
{% if tabs %}
- <h2 class="element-invisible">{{ 'Primary tabs'|t }}</h2><ul id="overlay-tabs">{{ tabs }}</ul>
+ <h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2><ul id="overlay-tabs">{{ tabs }}</ul>
{% endif %}
</div>
<div{{ content_attributes }}>
diff --git a/core/modules/system/css/system.module.css b/core/modules/system/css/system.module.css
index 9a1c950..2e92836 100644
--- a/core/modules/system/css/system.module.css
+++ b/core/modules/system/css/system.module.css
@@ -248,7 +248,7 @@ input {
* from a user. The effect of this class can be toggled with the jQuery show()
* and hide() functions.
*/
-.element-hidden {
+.hidden {
display: none;
}
@@ -260,7 +260,7 @@ input {
* manner should be kept concise, to avoid unnecessary burden on the user.
* "!important" is used to prevent unintentional overrides.
*/
-.element-invisible {
+.visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
@@ -269,11 +269,11 @@ input {
}
/**
- * The .element-focusable class extends the .element-invisible class to allow
+ * The .focusable class extends the .visually-hidden class to allow
* the element to be focusable when navigated to via the keyboard.
*/
-.element-invisible.element-focusable:active,
-.element-invisible.element-focusable:focus {
+.visually-hidden.focusable:active,
+.visually-hidden.focusable:focus {
position: static !important;
clip: auto;
overflow: visible;
@@ -282,6 +282,13 @@ input {
}
/**
+ * Hide visually and from screen-readers, but maintain layout.
+ */
+.invisible {
+ visibility: hidden;
+}
+
+/**
* Float clearing.
*
* Based on the micro clearfix hack by Nicolas Gallagher, with the :before
diff --git a/core/modules/system/lib/Drupal/system/Tests/Form/ElementsLabelsTest.php b/core/modules/system/lib/Drupal/system/Tests/Form/ElementsLabelsTest.php
index b36b3c0..feb354b 100644
--- a/core/modules/system/lib/Drupal/system/Tests/Form/ElementsLabelsTest.php
+++ b/core/modules/system/lib/Drupal/system/Tests/Form/ElementsLabelsTest.php
@@ -65,8 +65,8 @@ class ElementsLabelsTest extends WebTestBase {
$elements = $this->xpath('//input[@id="edit-form-textfield-test-no-title-required"]/preceding-sibling::label[@for="edit-form-textfield-test-no-title-required"]/abbr[@class="form-required"]');
$this->assertTrue(isset($elements[0]), 'Label tag with required marker precedes required textfield with no title.');
- $elements = $this->xpath('//input[@id="edit-form-textfield-test-title-invisible"]/preceding-sibling::label[@for="edit-form-textfield-test-title-invisible" and @class="element-invisible"]');
- $this->assertTrue(isset($elements[0]), 'Label preceding field and label class is element-invisible.');
+ $elements = $this->xpath('//input[@id="edit-form-textfield-test-title-invisible"]/preceding-sibling::label[@for="edit-form-textfield-test-title-invisible" and @class="visually-hidden"]');
+ $this->assertTrue(isset($elements[0]), 'Label preceding field and label class is visually-hidden.');
$elements = $this->xpath('//input[@id="edit-form-textfield-test-title"]/preceding-sibling::abbr[@class="form-required"]');
$this->assertFalse(isset($elements[0]), 'No required marker on non-required field.');
diff --git a/core/modules/system/system.admin.inc b/core/modules/system/system.admin.inc
index 1cfea0c..878741c 100644
--- a/core/modules/system/system.admin.inc
+++ b/core/modules/system/system.admin.inc
@@ -883,7 +883,7 @@ function system_modules($form, $form_state = array()) {
'#title' => t($package),
'#theme' => 'system_modules_details',
'#header' => array(
- array('data' => t('<span class="element-invisible">Enabled</span>'), 'class' => array('checkbox')),
+ array('data' => t('<span class="visually-hidden">Enabled</span>'), 'class' => array('checkbox')),
array('data' => t('Name'), 'class' => array('name')),
array('data' => t('Description'), 'class' => array('description', RESPONSIVE_PRIORITY_LOW)),
),
@@ -1466,7 +1466,7 @@ function theme_status_report($variables) {
'class' => 'error',
),
);
- $output = '<table class="system-status-report"><thead><tr class="element-invisible">';
+ $output = '<table class="system-status-report"><thead><tr class="visually-hidden">';
$output .= '<th>' . t('Status') . '</th><th>' . t('Component') . '</th><th>' . t('Details') . '</th>';
$output .= '</tr></thead><tbody>';
@@ -1486,7 +1486,7 @@ function theme_status_report($variables) {
$severity = $severities[REQUIREMENT_INFO];
}
- $severity['icon'] = '<div title="' . $severity['title'] . '"><span class="element-invisible">' . $severity['title'] . '</span></div>';
+ $severity['icon'] = '<div title="' . $severity['title'] . '"><span class="visually-hidden">' . $severity['title'] . '</span></div>';
// Output table rows.
$output .= '<tr class="' . $severity['class'] . '">';
@@ -1563,7 +1563,7 @@ function theme_system_modules_details($variables) {
$description .= $links;
$description .= '</div>';
}
- $col4 = '<div class="inner" tabindex="0" role="button"><span class="module-description-prefix element-invisible">Show description</span> ' . $description . '</div>';
+ $col4 = '<div class="inner" tabindex="0" role="button"><span class="module-description-prefix visually-hidden">Show description</span> ' . $description . '</div>';
$row[] = array('class' => array('description', 'expand'), 'data' => $col4);
$rows[] = $row;
diff --git a/core/modules/system/templates/html.html.twig b/core/modules/system/templates/html.html.twig
index 02a542b..153ff6b 100644
--- a/core/modules/system/templates/html.html.twig
+++ b/core/modules/system/templates/html.html.twig
@@ -38,7 +38,7 @@
</head>
<body{{ attributes }}>
<div id="skip-link">
- <a href="#main-content" class="element-invisible element-focusable">
+ <a href="#main-content" class="visually-hidden focusable">
{{ 'Skip to main content'|t }}
</a>
</div>
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
index c069791..3e12b55 100644
--- a/core/modules/toolbar/js/toolbar.js
+++ b/core/modules/toolbar/js/toolbar.js
@@ -338,7 +338,7 @@ Drupal.theme.toolbarOrientationToggle = function () {
* A string representing a DOM fragment.
*/
Drupal.theme.toolbarMessageBox = function () {
- return '<div id="toolbar-messages" class="element-invisible" role="region" aria-live="polite"></div>';
+ return '<div id="toolbar-messages" class="visually-hidden" role="region" aria-live="polite"></div>';
};
/**
diff --git a/core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.module b/core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.module
index 5bab7a9..ab7c2ad 100644
--- a/core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.module
+++ b/core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.module
@@ -35,7 +35,7 @@ function toolbar_test_toolbar() {
l(t('link 2'), '<front>'),
l(t('link 3'), '<front>'),
),
- '#prefix' => '<h2 class="element-invisible">' . t('Test tray') . '</h2>',
+ '#prefix' => '<h2 class="visually-hidden">' . t('Test tray') . '</h2>',
'#attributes' => array(
'class' => array('menu'),
),
diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module
index 3d3f075..52d3988 100644
--- a/core/modules/toolbar/toolbar.module
+++ b/core/modules/toolbar/toolbar.module
@@ -236,7 +236,7 @@ function theme_toolbar(&$variables) {
}
return '<nav' . new Attribute($element['#attributes']) . '>'
. '<div' . new Attribute($element['#bar']['#attributes']) . '>'
- . '<h2 class="element-invisible">' . $element['#bar']['#heading'] . '</h2>'
+ . '<h2 class="visually-hidden">' . $element['#bar']['#heading'] . '</h2>'
. $element['#children'] . '</div>' . $trays . '</nav>';
}
}
@@ -378,7 +378,7 @@ function theme_toolbar_tray_wrapper(&$variables) {
function theme_toolbar_tray_heading_wrapper(&$variables) {
if (!empty($variables['element']['#children'])) {
$element = $variables['element'];
- return '<h3 class="element-invisible">' . $element['#heading'] . '</h3>' . $element['#children'];
+ return '<h3 class="visually-hidden">' . $element['#heading'] . '</h3>' . $element['#children'];
}
}
diff --git a/core/modules/tour/css/tour.module.css b/core/modules/tour/css/tour.module.css
index 945e9e3..07033cd 100644
--- a/core/modules/tour/css/tour.module.css
+++ b/core/modules/tour/css/tour.module.css
@@ -34,6 +34,6 @@
}
/* @todo Remove once http://drupal.org/node/1916690 is resolved. */
-.js .toolbar .tour-toolbar-tab.tab.element-hidden {
+.js .toolbar .tour-toolbar-tab.tab.hidden {
display: none;
}
diff --git a/core/modules/tour/js/tour.js b/core/modules/tour/js/tour.js
index 86ad8a2..611b225 100644
--- a/core/modules/tour/js/tour.js
+++ b/core/modules/tour/js/tour.js
@@ -97,7 +97,7 @@ Drupal.tour.views.ToggleTourView = Backbone.View.extend({
*/
render: function () {
// Render the visibility.
- this.$el.toggleClass('element-hidden', this._getTour().length === 0);
+ this.$el.toggleClass('hidden', this._getTour().length === 0);
// Render the state.
var isActive = this.model.get('isActive');
this.$el.find('button')
diff --git a/core/modules/tour/lib/Drupal/tour/TourRenderController.php b/core/modules/tour/lib/Drupal/tour/TourRenderController.php
index e1bf15d..163882d 100644
--- a/core/modules/tour/lib/Drupal/tour/TourRenderController.php
+++ b/core/modules/tour/lib/Drupal/tour/TourRenderController.php
@@ -60,7 +60,7 @@ class TourRenderController extends EntityRenderController {
'#attributes' => array(
'id' => 'tour',
'class' => array(
- 'element-hidden',
+ 'hidden',
),
),
);
diff --git a/core/modules/tour/tour.module b/core/modules/tour/tour.module
index 70e77ea..48e44f6 100644
--- a/core/modules/tour/tour.module
+++ b/core/modules/tour/tour.module
@@ -89,7 +89,7 @@ function tour_toolbar() {
),
),
'#wrapper_attributes' => array(
- 'class' => array('tour-toolbar-tab', 'element-hidden'),
+ 'class' => array('tour-toolbar-tab', 'hidden'),
'id' => 'toolbar-tab-tour',
),
'#attached' => array(
diff --git a/core/modules/translation_entity/translation_entity.admin.inc b/core/modules/translation_entity/translation_entity.admin.inc
index d8cf685..9f8b1b8 100644
--- a/core/modules/translation_entity/translation_entity.admin.inc
+++ b/core/modules/translation_entity/translation_entity.admin.inc
@@ -172,7 +172,7 @@ function _translation_entity_preprocess_language_content_settings_table(&$variab
'#prefix' => '<label for="' . $field_element['#id'] . '">',
'#suffix' => '</label>',
'bundle' => array(
- '#prefix' => '<span class="element-invisible">',
+ '#prefix' => '<span class="visually-hidden">',
'#suffix' => '</span> ',
'#markup' => check_plain($element[$bundle]['settings']['#label']),
),
@@ -206,12 +206,12 @@ function _translation_entity_preprocess_language_content_settings_table(&$variab
'#prefix' => '<label for="' . $column_element[$key]['#id'] . '">',
'#suffix' => '</label>',
'bundle' => array(
- '#prefix' => '<span class="element-invisible">',
+ '#prefix' => '<span class="visually-hidden">',
'#suffix' => '</span> ',
'#markup' => check_plain($element[$bundle]['settings']['#label']),
),
'field' => array(
- '#prefix' => '<span class="element-invisible">',
+ '#prefix' => '<span class="visually-hidden">',
'#suffix' => '</span> ',
'#markup' => check_plain($field_element['#label']),
),
diff --git a/core/modules/views_ui/js/views-admin.js b/core/modules/views_ui/js/views-admin.js
index f695e77..9dc1075 100644
--- a/core/modules/views_ui/js/views-admin.js
+++ b/core/modules/views_ui/js/views-admin.js
@@ -627,7 +627,7 @@ Drupal.viewsUi.rearrangeFilterHandler.prototype.duplicateGroupsOperator = functi
// Get rid of the explanatory text around the operator; its placement is
// explanatory enough.
- this.operator.find('label').add('div.description').addClass('element-invisible');
+ this.operator.find('label').add('div.description').addClass('visually-hidden');
this.operator.find('select').addClass('form-select');
// Keep a list of the operator dropdowns, so we can sync their behavior later.
diff --git a/core/modules/views_ui/lib/Drupal/views_ui/Form/Ajax/ReorderDisplays.php b/core/modules/views_ui/lib/Drupal/views_ui/Form/Ajax/ReorderDisplays.php
index 17b8fa0..cc921ae 100644
--- a/core/modules/views_ui/lib/Drupal/views_ui/Form/Ajax/ReorderDisplays.php
+++ b/core/modules/views_ui/lib/Drupal/views_ui/Form/Ajax/ReorderDisplays.php
@@ -128,7 +128,7 @@ class ReorderDisplays extends ViewsFormBase {
'#value' => TRUE,
);
- $form['displays'][$id]['#attributes']['class'][] = 'element-hidden';
+ $form['displays'][$id]['#attributes']['class'][] = 'hidden';
}
}
diff --git a/core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php b/core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php
index fc6f511..1f3869c 100644
--- a/core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php
+++ b/core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php
@@ -704,7 +704,7 @@ class ViewEditFormController extends ViewFormControllerBase implements EntityCon
if ($display_id) {
$tabs[$display_id]['#active'] = TRUE;
}
- $tabs['#prefix'] = '<h2 class="element-invisible">' . t('Secondary tabs') . '</h2><ul id = "views-display-menu-tabs" class="tabs secondary">';
+ $tabs['#prefix'] = '<h2 class="visually-hidden">' . t('Secondary tabs') . '</h2><ul id = "views-display-menu-tabs" class="tabs secondary">';
$tabs['#suffix'] = '</ul>';
$element['tabs'] = $tabs;
}
@@ -933,7 +933,7 @@ class ViewEditFormController extends ViewFormControllerBase implements EntityCon
$count_handlers = count($executable->display_handler->getHandlers($type));
// Create the add text variable for the add action.
- $add_text = t('Add <span class="element-invisible">@type</span>', array('@type' => $types[$type]['ltitle']));
+ $add_text = t('Add <span class="visually-hidden">@type</span>', array('@type' => $types[$type]['ltitle']));
$actions['add'] = array(
'title' => $add_text,
@@ -943,7 +943,7 @@ class ViewEditFormController extends ViewFormControllerBase implements EntityCon
);
if ($count_handlers > 0) {
// Create the rearrange text variable for the rearrange action.
- $rearrange_text = $type == 'filter' ? t('And/Or Rearrange <span class="element-invisible">filter criteria</span>') : t('Rearrange <span class="element-invisible">@type</span>', array('@type' => $types[$type]['ltitle']));
+ $rearrange_text = $type == 'filter' ? t('And/Or Rearrange <span class="visually-hidden">filter criteria</span>') : t('Rearrange <span class="visually-hidden">@type</span>', array('@type' => $types[$type]['ltitle']));
$actions['rearrange'] = array(
'title' => $rearrange_text,
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index e312fc7..a7a36a8 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -347,7 +347,7 @@ h1#site-name {
padding: 0;
}
.region-header .block > h2 {
- /* @extend .element-invisible */
+ /* @extend .visually-hidden */
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
@@ -880,7 +880,7 @@ ul.links {
margin-top: 0;
}
#footer .block > h2 {
- /* @extend .element-invisible */
+ /* @extend .visually-hidden */
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
diff --git a/core/themes/bartik/templates/comment.html.twig b/core/themes/bartik/templates/comment.html.twig
index 48fd391..58496aa 100644
--- a/core/themes/bartik/templates/comment.html.twig
+++ b/core/themes/bartik/templates/comment.html.twig
@@ -52,7 +52,7 @@
* 'parent_author' and 'parent_created' during template_preprocess_comment().
* This information is presented to help screen readers follow lengthy
* discussion threads. You can hide this from sighted users using the class
- * element-invisible.
+ * visually-hidden.
*
* These two variables are provided for context:
* - comment: Full comment object.
@@ -87,7 +87,7 @@
// reader without this information.
#}
{% if parent %}
- <p class="comment-parent element-invisible">
+ <p class="comment-parent visually-hidden">
{{ parent }}
</p>
{% endif %}
diff --git a/core/themes/bartik/templates/maintenance-page.html.twig b/core/themes/bartik/templates/maintenance-page.html.twig
index 2d49784..7e03936 100644
--- a/core/themes/bartik/templates/maintenance-page.html.twig
+++ b/core/themes/bartik/templates/maintenance-page.html.twig
@@ -23,23 +23,23 @@
<body class="{{ attributes.class }}"{{ attributes }}>
<div id="skip-link">
- <a href="#main-content" class="element-invisible element-focusable">{{ 'Skip to main content'|t }}</a>
+ <a href="#main-content" class="visually-hidden focusable">{{ 'Skip to main content'|t }}</a>
</div>
<div id="page-wrapper"><div id="page">
<header id="header" role="banner"><div class="section clearfix">
{% if site_name or site_slogan %}
- <div id="name-and-slogan"{{ hide_site_name and hide_site_slogan ? ' class="element-invisible"' }}>
+ <div id="name-and-slogan"{{ hide_site_name and hide_site_slogan ? ' class="visually-hidden"' }}>
{% if site_name %}
- <div id="site-name"{{ hide_site_name ? ' class="element-invisible"' }}>
+ <div id="site-name"{{ hide_site_name ? ' class="visually-hidden"' }}>
<strong>
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
</strong>
</div>
{% endif %}
{% if site_slogan %}
- <div id="site-slogan"{{ hide_site_slogan ? ' class="element-invisible"' }}>
+ <div id="site-slogan"{{ hide_site_slogan ? ' class="visually-hidden"' }}>
{{ site_slogan }}
</div>
{% endif %}
diff --git a/core/themes/bartik/templates/page.html.twig b/core/themes/bartik/templates/page.html.twig
index 1af8907..da511eb 100644
--- a/core/themes/bartik/templates/page.html.twig
+++ b/core/themes/bartik/templates/page.html.twig
@@ -26,10 +26,10 @@
* - site_slogan: The slogan of the site. This is empty when displaying the site
* slogan has been disabled in theme settings.
* - hide_site_name: A flag indicating if the site name has been toggled off on
- * the theme settings page. If hidden, the "element-invisible" class is added
+ * the theme settings page. If hidden, the "visually-hidden" class is added
* to make the site name visually hidden, but still accessible.
* - hide_site_slogan: A flag indicating if the site slogan has been toggled off
- * on the theme settings page. If hidden, the "element-invisible" class is
+ * on the theme settings page. If hidden, the "visually-hidden" class is
* added to make the site slogan visually hidden, but still accessible.
*
* Navigation:
@@ -99,24 +99,24 @@
{% endif %}
{% if site_name or site_slogan %}
- <div id="name-and-slogan"{% if hide_site_name and hide_site_slogan %} class="element-invisible"{% endif %}>
+ <div id="name-and-slogan"{% if hide_site_name and hide_site_slogan %} class="visually-hidden"{% endif %}>
{% if site_name %}
{% if title %}
- <div id="site-name"{% if hide_site_name %} class="element-invisible"{% endif %}>
+ <div id="site-name"{% if hide_site_name %} class="visually-hidden"{% endif %}>
<strong>
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
</strong>
</div>
{# Use h1 when the content title is empty #}
{% else %}
- <h1 id="site-name"{% if hide_site_name %} class="element-invisible" {% endif %}>
+ <h1 id="site-name"{% if hide_site_name %} class="visually-hidden" {% endif %}>
<a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
</h1>
{% endif %}
{% endif %}
{% if site_slogan %}
- <div id="site-slogan"{% if hide_site_slogan %} class="element-invisible"{% endif %}>
+ <div id="site-slogan"{% if hide_site_slogan %} class="visually-hidden"{% endif %}>
{{ site_slogan }}
</div>
{% endif %}
diff --git a/core/themes/seven/templates/page.html.twig b/core/themes/seven/templates/page.html.twig
index 3b8294e..abf824f 100644
--- a/core/themes/seven/templates/page.html.twig
+++ b/core/themes/seven/templates/page.html.twig
@@ -86,7 +86,7 @@
{% endif %}
<main id="content" class="clearfix" role="main">
- <div class="element-invisible"><a id="main-content"></a></div>
+ <div class="visually-hidden"><a id="main-content"></a></div>
{% if messages %}
<div id="console" class="clearfix">{{ messages }}</div>
{% endif %}