From 7c61f7ba9a2ea45aab5e380ef20c007bf847ffb6 Mon Sep 17 00:00:00 2001 From: Alex Pott <alex.a.pott@googlemail.com> Date: Tue, 8 Jul 2014 11:45:01 +0100 Subject: [PATCH] Issue #2227601 by mparker17, cs_shadow, swentel, lanchez, mgifford: Added a "Visually-hidden" field label formatter. --- core/includes/theme.inc | 5 ++++ .../field/src/Tests/DisplayApiTest.php | 23 ++++++++++++++++++- core/modules/field_ui/src/DisplayOverview.php | 1 + core/modules/system/templates/field.html.twig | 2 +- core/themes/bartik/bartik.theme | 8 ++----- .../field--taxonomy-term-reference.html.twig | 4 +++- 6 files changed, 34 insertions(+), 9 deletions(-) diff --git a/core/includes/theme.inc b/core/includes/theme.inc index 7cb205c1635f..81c328c74c8b 100644 --- a/core/includes/theme.inc +++ b/core/includes/theme.inc @@ -2372,6 +2372,11 @@ function template_preprocess_field(&$variables, $hook) { $variables['attributes']['class'][] = 'clearfix'; } + // Hide labels visually, but display them to screenreaders if applicable. + if ($element['#label_display'] == 'visually-hidden') { + $variables['title_attributes']['class'][] = 'visually-hidden'; + } + static $default_attributes; if (!isset($default_attributes)) { $default_attributes = new Attribute; diff --git a/core/modules/field/src/Tests/DisplayApiTest.php b/core/modules/field/src/Tests/DisplayApiTest.php index 9a9ed1e7baae..0ee7c79abb2f 100644 --- a/core/modules/field/src/Tests/DisplayApiTest.php +++ b/core/modules/field/src/Tests/DisplayApiTest.php @@ -135,7 +135,7 @@ function testFieldItemListView() { $this->assertText($setting . '|' . $value['value'], format_string('Value @delta was displayed with expected setting.', array('@delta' => $delta))); } - // Check that explicit display settings are used. + // Display settings: Check hidden field. $display = array( 'label' => 'hidden', 'type' => 'field_test_multiple', @@ -156,6 +156,27 @@ function testFieldItemListView() { } $this->assertText($setting . '|' . implode('|', $array), 'Values were displayed with expected setting.'); + // Display settings: Check visually-hidden field. + $display = array( + 'label' => 'visually-hidden', + 'type' => 'field_test_multiple', + 'settings' => array( + 'test_formatter_setting_multiple' => $this->randomName(), + 'alter' => TRUE, + ), + ); + $output = $items->view($display); + $this->content = drupal_render($output); + $setting = $display['settings']['test_formatter_setting_multiple']; + $this->assertRaw('visually-hidden', 'Label was visually hidden.'); + $this->assertText('field_test_entity_display_build_alter', 'Alter fired, display passed.'); + $this->assertText('entity language is ' . LanguageInterface::LANGCODE_NOT_SPECIFIED, 'Language is placed onto the context.'); + $array = array(); + foreach ($this->values as $delta => $value) { + $array[] = $delta . ':' . $value['value']; + } + $this->assertText($setting . '|' . implode('|', $array), 'Values were displayed with expected setting.'); + // Check the prepare_view steps are invoked. $display = array( 'label' => 'hidden', diff --git a/core/modules/field_ui/src/DisplayOverview.php b/core/modules/field_ui/src/DisplayOverview.php index f93ae84df522..0657e91987dd 100644 --- a/core/modules/field_ui/src/DisplayOverview.php +++ b/core/modules/field_ui/src/DisplayOverview.php @@ -226,6 +226,7 @@ protected function getFieldLabelOptions() { 'above' => $this->t('Above'), 'inline' => $this->t('Inline'), 'hidden' => '- ' . $this->t('Hidden') . ' -', + 'visually-hidden' => '- ' . $this->t('Visually Hidden') . ' -', ); } diff --git a/core/modules/system/templates/field.html.twig b/core/modules/system/templates/field.html.twig index a0d527a7ee92..d38b02868f1f 100644 --- a/core/modules/system/templates/field.html.twig +++ b/core/modules/system/templates/field.html.twig @@ -31,7 +31,7 @@ #} <div{{ attributes }}> {% if not label_hidden %} - <div class="field-label"{{ title_attributes }}>{{ label }}: </div> + <div class="field-label{% if title_attributes.class %} {{ title_attributes.class }}{% endif %}"{{ title_attributes|without('class') }}>{{ label }}: </div> {% endif %} <div class="field-items"{{ content_attributes }}> {% for delta, item in items %} diff --git a/core/themes/bartik/bartik.theme b/core/themes/bartik/bartik.theme index 580f757cc31a..2503303f4022 100644 --- a/core/themes/bartik/bartik.theme +++ b/core/themes/bartik/bartik.theme @@ -159,14 +159,10 @@ function bartik_menu_tree__shortcut_default($variables) { function bartik_preprocess_field(&$variables) { $element = $variables['element']; if ($element['#field_type'] == 'taxonomy_term_reference') { - $label_attributes['class'] = array('field-label'); - if ($variables['label_hidden']) { - $label_attributes['class'][] = 'visually-hidden'; - } + $variables['title_attributes']['class'][] = array('field-label'); if ($variables['element']['#label_display'] == 'inline') { - $label_attributes['class'][] = 'inline'; + $variables['title_attributes']['class'][] = 'inline'; } - $variables['label_attributes'] = new Attribute($label_attributes); } } diff --git a/core/themes/bartik/templates/field--taxonomy-term-reference.html.twig b/core/themes/bartik/templates/field--taxonomy-term-reference.html.twig index fad1ed7f1c10..1f05c3e30fb7 100644 --- a/core/themes/bartik/templates/field--taxonomy-term-reference.html.twig +++ b/core/themes/bartik/templates/field--taxonomy-term-reference.html.twig @@ -17,7 +17,9 @@ */ #} <div class="{{ attributes.class }} clearfix"{{ attributes|without('class') }}> - <h3{{ label_attributes }}>{{ label }}: </h3> + {% if not label_hidden %} + <h3{{ label_attributes }}>{{ label }}: </h3> + {% endif %} <ul class="links"> {% for delta, item in items %} <li class="taxonomy-term-reference-{{ delta }}"{{ item_attributes[delta] }}>{{ item }}</li> -- GitLab