Commit da1b134a authored by alexpott's avatar alexpott
Browse files

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;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment