Issue #2779919 by andrewmacpherson, joelpittet, mikeker, UpTil4Music, if-jds, Kolin, John Cook: Stable theme does not respect "visually hidden" field label display option

core/modules/field/tests/src/Kernel/FieldDisplayTest.php

@@ -0,0 +1,126 @@
+<?php
+
+namespace Drupal\Tests\field\Kernel;
+
+use Drupal\entity_test\Entity\EntityTestRev;
+use Drupal\field\Entity\FieldConfig;
+use Drupal\field\Entity\FieldStorageConfig;
+use Drupal\KernelTests\KernelTestBase;
+use Symfony\Component\CssSelector\CssSelectorConverter;
+
+/**
+ * Tests Field display.
+ *
+ * @group field
+ */
+class FieldDisplayTest extends KernelTestBase {
+
+  /**
+   * Modules to enable.
+   *
+   * @var array
+   */
+  public static $modules = [
+    'entity_test',
+    'field',
+    'system',
+    'user',
+  ];
+
+  /**
+   * Test entity type name.
+   *
+   * @var string
+   */
+  protected $entityType;
+
+  /**
+   * Test entity bundle name.
+   *
+   * @var string
+   */
+  protected $bundle;
+
+  /**
+   * Test field name.
+   *
+   * @var string
+   */
+  protected $fieldName;
+
+  /**
+   * Entity view display.
+   *
+   * @var \Drupal\Core\Entity\Display\EntityViewDisplayInterface
+   */
+  protected $display;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    // Configure the theme system.
+    $this->installConfig(['system', 'field']);
+    $this->installEntitySchema('entity_test_rev');
+
+    $this->entityType = 'entity_test_rev';
+    $this->bundle = $this->entityType;
+    $this->fieldName = mb_strtolower($this->randomMachineName());
+
+    $field_storage = FieldStorageConfig::create([
+      'field_name' => $this->fieldName,
+      'entity_type' => $this->entityType,
+      'type' => 'string',
+    ]);
+    $field_storage->save();
+
+    $instance = FieldConfig::create([
+      'field_storage' => $field_storage,
+      'bundle' => $this->bundle,
+      'label' => $this->randomMachineName(),
+    ]);
+    $instance->save();
+
+    $values = [
+      'targetEntityType' => $this->entityType,
+      'bundle' => $this->bundle,
+      'mode' => 'default',
+      'status' => TRUE,
+    ];
+
+    $this->display = \Drupal::entityTypeManager()
+      ->getStorage('entity_view_display')
+      ->create($values);
+    $this->display->save();
+  }
+
+  /**
+   * Tests that visually hidden works with core.
+   */
+  public function testFieldVisualHidden() {
+    $value = $this->randomMachineName();
+
+    // Set the formatter to link to the entity.
+    $this->display->setComponent($this->fieldName, [
+      'type' => 'string',
+      'label' => 'visually_hidden',
+      'settings' => [],
+    ])->save();
+
+    $entity = EntityTestRev::create([]);
+    $entity->{$this->fieldName}->value = $value;
+    $entity->save();
+
+    $build = $this->display->build($entity);
+    $renderer = \Drupal::service('renderer');
+    $content = $renderer->renderPlain($build);
+    $this->setRawContent((string) $content);
+
+    $css_selector_converter = new CssSelectorConverter();
+    $elements = $this->xpath($css_selector_converter->toXPath('.visually-hidden'));
+    $this->assertCount(1, $elements, $content);
+  }
+
+}

core/modules/system/templates/field.html.twig

@@ -38,6 +38,11 @@
  * @ingroup themeable
  */
 #}
+{%
+  set title_classes = [
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
 
 {% if label_hidden %}
   {% if multiple %}
@@ -53,7 +58,7 @@
   {% endif %}
 {% else %}
   <div{{ attributes }}>
-    <div{{ title_attributes }}>{{ label }}</div>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
     {% if multiple %}
       <div>
     {% endif %}

core/themes/stable/templates/field/field.html.twig

@@ -36,6 +36,11 @@
  * @see template_preprocess_field()
  */
 #}
+{%
+  set title_classes = [
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
 
 {% if label_hidden %}
   {% if multiple %}
@@ -51,7 +56,7 @@
   {% endif %}
 {% else %}
   <div{{ attributes }}>
-    <div{{ title_attributes }}>{{ label }}</div>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
     {% if multiple %}
       <div>
     {% endif %}