diff --git a/core/includes/theme.inc b/core/includes/theme.inc index 7cb205c1635f921434d374e922018b0cbc6f3c15..81c328c74c8bfbc1c1ec755269c61088f3c9e149 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 9a9ed1e7baaecdd481969a878097cba50bd7755a..0ee7c79abb2f23025361c240ac7271b2bcb61817 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 f93ae84df5222457122bd2a86046f75e38e80375..0657e91987dd6ddea5e12c3f1534d1d99b8e90d4 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 a0d527a7ee929196e06761c6b5545d8292e73953..d38b02868f1f3c28ca153c1a192e5b5ed727e0e7 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 580f757cc31ab90d08cfc8d3ce9049eeab851590..2503303f402267fed999f907cb099a5fdfa114e2 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 fad1ed7f1c1053b8847dba0786c5f164609fd2e1..1f05c3e30fb7bc537d0d200bc3af404040946d85 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>