Issue #2473951 by Cottser, cilefen, yannickoo, davidhernandez, LewisNyman:...

Issue #2473951 by Cottser, cilefen, yannickoo, davidhernandez, LewisNyman: Prefix form-required classes with js-

core/includes/theme.inc

@@ -507,8 +507,8 @@ function template_preprocess_datetime_wrapper(&$variables) {
   }
 
   $variables['required'] = FALSE;
-  // For required datetime fields a 'form-required' class is appended to the
-  // label attributes.
+  // For required datetime fields 'form-required' & 'js-form-required' classes
+  // are appended to the label attributes.
   if (!empty($element['#required'])) {
     $variables['required'] = TRUE;
   }
@@ -1556,6 +1556,7 @@ function template_preprocess_field_multiple_value_form(&$variables) {
     $order_class = $element['#field_name'] . '-delta-order';
     $header_attributes = new Attribute(array('class' => array('label')));
     if (!empty($element['#required'])) {
+      $header_attributes['class'][] = 'js-form-required';
       $header_attributes['class'][] = 'form-required';
     }
     $header = array(

core/misc/states.js

@@ -609,12 +609,12 @@
       if (e.value) {
         var $label = $(e.target).attr({'required': 'required', 'aria-required': 'aria-required'}).closest('.form-item, .js-form-wrapper').find('label');
         // Avoids duplicate required markers on initialization.
-        if (!$label.hasClass('form-required').length) {
-          $label.addClass('form-required');
+        if (!$label.hasClass('js-form-required').length) {
+          $label.addClass('js-form-required form-required');
         }
       }
       else {
-        $(e.target).removeAttr('required aria-required').closest('.form-item, .js-form-wrapper').find('label.form-required').removeClass('form-required');
+        $(e.target).removeAttr('required aria-required').closest('.form-item, .js-form-wrapper').find('label.js-form-required').removeClass('js-form-required form-required');
       }
     }
   });

core/modules/datetime/src/Tests/DateTimeFieldTest.php

@@ -119,7 +119,7 @@ function testDateField() {
     // Display creation form.
     $this->drupalGet('entity_test/add');
     $this->assertFieldByName("{$field_name}[0][value][date]", '', 'Date element found.');
-    $this->assertFieldByXPath('//*[@id="edit-' . $field_name . '-wrapper"]/h4[contains(@class, "form-required")]', TRUE, 'Required markup found');
+    $this->assertFieldByXPath('//*[@id="edit-' . $field_name . '-wrapper"]/h4[contains(@class, "js-form-required")]', TRUE, 'Required markup found');
     $this->assertNoFieldByName("{$field_name}[0][value][time]", '', 'Time element not found.');
 
     // Build up a date in the UTC timezone.

core/modules/field/src/Tests/FormTest.php

@@ -334,12 +334,12 @@ public function testFieldFormUnlimitedRequired() {
     // Display creation form -> 1 widget.
     $this->drupalGet('entity_test/add');
     // Check that the Required symbol is present for the multifield label.
-    $this->assertRaw(SafeMarkup::format('<h4 class="label form-required">@label</h4>', array('@label' => $this->field['label'])),
-        'Required symbol added field label.');
+    $element = $this->xpath('//h4[contains(@class, "label") and contains(@class, "js-form-required") and contains(text(), :value)]', array(':value' => $this->field['label']));
+    $this->assertTrue(isset($element[0]), 'Required symbol added field label.');
     // Check that the label of the field input is visually hidden and contains
     // the field title and an indication of the delta for a11y.
-    $this->assertRaw(SafeMarkup::format('<label for="edit-field-unlimited-0-value" class="visually-hidden form-required">@label (value 1)</label>', array('@label' => $this->field['label'])),
-        'Required symbol not added for field input.');
+    $element = $this->xpath('//label[@for=:for and contains(@class, "js-form-required") and contains(text(), :value)]', array(':for' => 'edit-field-unlimited-0-value', ':value' => $this->field['label'] . ' (value 1)'));
+    $this->assertTrue(isset($element[0]), 'Required symbol not added for field input.');
   }
 
   /**

core/modules/field_ui/field_ui.js

@@ -17,15 +17,16 @@
     attach: function (context) {
       var $form = $(context).find('[data-drupal-selector="field-ui-field-storage-add-form"]').once('field_ui_add');
       if ($form.length) {
-        // Add a few 'form-required' css classes here. We can not use the Form
-        // API '#required' property because both label elements for "add new"
-        // and "re-use existing" can never be filled and submitted at the same
-        // time. The actual validation will happen server-side.
+        // Add a few 'js-form-required' and 'form-required' css classes here.
+        // We can not use the Form API '#required' property because both label
+        // elements for "add new" and "re-use existing" can never be filled and
+        // submitted at the same time. The actual validation will happen
+        // server-side.
         $form.find(
           '.form-item-label label,' +
           '.form-item-field-name label,' +
           '.form-item-existing-storage-label label')
-          .addClass('form-required');
+          .addClass('js-form-required form-required');
 
         var $newFieldType = $form.find('select[name="new_storage_type"]');
         var $existingStorageName = $form.find('select[name="existing_storage_name"]');

core/modules/image/src/Tests/ImageFieldValidateTest.php

@@ -70,11 +70,11 @@ function testRequiredAttributes() {
     $this->uploadNodeImage($image, $field_name, 'article');
 
     // Look for form-required for the alt text.
-    $elements = $this->xpath('//label[@for="edit-' . $field_name . '-0-alt" and @class="form-required"]/following-sibling::input[@id="edit-' . $field_name . '-0-alt"]');
+    $elements = $this->xpath('//label[@for="edit-' . $field_name . '-0-alt" and @class="js-form-required form-required"]/following-sibling::input[@id="edit-' . $field_name . '-0-alt"]');
 
     $this->assertTrue(isset($elements[0]),'Required marker is shown for the required alt text.');
 
-    $elements = $this->xpath('//label[@for="edit-' . $field_name . '-0-title" and @class="form-required"]/following-sibling::input[@id="edit-' . $field_name . '-0-title"]');
+    $elements = $this->xpath('//label[@for="edit-' . $field_name . '-0-title" and @class="js-form-required form-required"]/following-sibling::input[@id="edit-' . $field_name . '-0-title"]');
 
     $this->assertTrue(isset($elements[0]), 'Required marker is shown for the required title text.');
 

core/modules/system/src/Tests/Form/ElementsLabelsTest.php

@@ -53,16 +53,16 @@ function testFormLabels() {
 
     // Exercise various defaults for textboxes and modifications to ensure
     // appropriate override and correct behavior.
-    $elements = $this->xpath('//label[@for="edit-form-textfield-test-title-and-required" and @class="form-required"]/following-sibling::input[@id="edit-form-textfield-test-title-and-required"]');
+    $elements = $this->xpath('//label[@for="edit-form-textfield-test-title-and-required" and @class="js-form-required form-required"]/following-sibling::input[@id="edit-form-textfield-test-title-and-required"]');
     $this->assertTrue(isset($elements[0]), 'Label precedes textfield, with required marker inside label.');
 
-    $elements = $this->xpath('//input[@id="edit-form-textfield-test-no-title-required"]/preceding-sibling::label[@for="edit-form-textfield-test-no-title-required" and @class="form-required"]');
+    $elements = $this->xpath('//input[@id="edit-form-textfield-test-no-title-required"]/preceding-sibling::label[@for="edit-form-textfield-test-no-title-required" and @class="js-form-required 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="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::span[@class="form-required"]');
+    $elements = $this->xpath('//input[@id="edit-form-textfield-test-title"]/preceding-sibling::span[@class="js-form-required form-required"]');
     $this->assertFalse(isset($elements[0]), 'No required marker on non-required field.');
 
     $elements = $this->xpath('//input[@id="edit-form-textfield-test-title-after"]/following-sibling::label[@for="edit-form-textfield-test-title-after" and @class="option"]');

core/modules/system/src/Tests/Form/FormTest.php

@@ -97,7 +97,7 @@ function testRequiredFields() {
     $elements['file']['empty_values'] = $empty_strings;
 
     // Regular expression to find the expected marker on required elements.
-    $required_marker_preg = '@<.*?class=".*?form-required.*?">@';
+    $required_marker_preg = '@<.*?class=".*?js-form-required.*form-required.*?">@';
     // Go through all the elements and all the empty values for them.
     foreach ($elements as $type => $data) {
       foreach ($data['empty_values'] as $key => $empty) {

core/modules/system/templates/datetime-wrapper.html.twig

@@ -17,6 +17,7 @@
 #}
 {%
   set title_classes = [
+    required ? 'js-form-required',
     required ? 'form-required',
   ]
 %}

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

@@ -33,6 +33,7 @@
   {%
     set legend_span_classes = [
       'fieldset-legend',
+      required ? 'js-form-required',
       required ? 'form-required',
     ]
   %}

core/modules/system/templates/form-element-label.html.twig

@@ -18,6 +18,7 @@
   set classes = [
     title_display == 'after' ? 'option',
     title_display == 'invisible' ? 'visually-hidden',
+    required ? 'js-form-required',
     required ? 'form-required',
   ]
 %}

core/themes/classy/templates/form/datetime-wrapper.html.twig

@@ -16,6 +16,7 @@
 {%
   set title_classes = [
     'label',
+    required ? 'js-form-required',
     required ? 'form-required',
   ]
 %}

core/themes/classy/templates/form/fieldset.html.twig

@@ -31,6 +31,7 @@
   {%
     set legend_span_classes = [
       'fieldset-legend',
+      required ? 'js-form-required',
       required ? 'form-required',
     ]
   %}

core/themes/classy/templates/form/form-element-label.html.twig

@@ -16,6 +16,7 @@
   set classes = [
     title_display == 'after' ? 'option',
     title_display == 'invisible' ? 'visually-hidden',
+    required ? 'js-form-required',
     required ? 'form-required',
   ]
 %}