Commit da1b134a authored by alexpott's avatar alexpott

Issue #1363112 by mparker17, mgifford, tlattimore, Jacine, dcmouyard,...

Issue #1363112 by mparker17, mgifford, tlattimore, Jacine, dcmouyard, bowersox, ry5n, ahdiaz: Simplify names of 'element-x' helper classes.
parent 0204ee8e
......@@ -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'])) {
......
......@@ -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']);
......
......@@ -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')),
));
......
......@@ -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'),
)
);
}
......
......@@ -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>';
......
......@@ -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);
......
......@@ -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]);
......
......@@ -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(' ');
......
......@@ -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>';
}
});
......
......@@ -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>');
},
/**
......
......@@ -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>
......@@ -101,7 +101,7 @@ public function form(array $form, array &$form_state) {
);
$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,
);
......
......@@ -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">
......
......@@ -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>';
......
......@@ -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 }}
......
......@@ -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);
......@@ -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(
......
......@@ -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'));
......
......@@ -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 {
......
......@@ -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;
......
......@@ -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;
}
......@@ -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'),
......
......@@ -429,7 +429,7 @@ public function buildForm(array $form, array &$form_state, $entity_type = NULL,
// 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');
......
......@@ -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'));
}
......
......@@ -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>
......@@ -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 %}
......
......@@ -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 %}
......
......@@ -46,7 +46,7 @@ public function buildContent(array $entities, array $displays, $view_mode, $lang
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,
......
......@@ -57,7 +57,7 @@ function testPageEdit() {
$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.');
......
......@@ -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.
*/
......
......@@ -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');
});
};
......
......@@ -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);
......
......@@ -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';
}
}
......
......@@ -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>
......@@ -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 }}>
......
......@@ -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;
......@@ -281,6 +281,13 @@ input {
width: auto;
}
/**
* Hide visually and from screen-readers, but maintain layout.
*/
.invisible {
visibility: hidden;
}
/**
* Float clearing.
*
......
......@@ -65,8 +65,8 @@ function testFormLabels() {
$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.');
......
......@@ -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;
......
......@@ -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>
......
......@@ -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>';
};
/**
......
......@@ -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'),
),
......
......@@ -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'];
}
}
......
......@@ -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;
}
......@@ -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')
......
......@@ -60,7 +60,7 @@ public function viewMultiple(array $entities = array(), $view_mode = 'full', $la
'#attributes' => array(
'id' => 'tour',
'class' => array(
'element-hidden',
'hidden',
),
),
);
......
......@@ -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(
......
......@@ -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']),
),
......