commit 9fb5faf0134ae841356b175789f82dcc0e2ef4c7 Author: Joel Pittet Date: Mon Feb 24 21:39:53 2014 -0800 class on label diff --git a/core/includes/form.inc b/core/includes/form.inc index d87e538..4a032f4 100644 --- a/core/includes/form.inc +++ b/core/includes/form.inc @@ -1021,22 +1021,21 @@ function theme_fieldset($variables) { $element['#attributes']['aria-describedby'] = $description_id; } - // If the element is required, a form-required class is appended to - // the fieldset. - if (!empty($element['#required'])) { - $element['#attributes']['class'][] = 'form-required'; - } - $legend_attributes = array(); if (isset($element['#title_display']) && $element['#title_display'] == 'invisible') { $legend_attributes['class'][] = 'visually-hidden'; } + $legend_span_attributes = array('class' => array('fieldset-legend')); + if (!empty($element['#required'])) { + $legend_span_attributes['class'][] = 'form-required'; + } + $output = ''; if ((isset($element['#title']) && $element['#title'] !== '') || !empty($element['#required'])) { // Always wrap fieldset legends in a SPAN for CSS positioning. - $output .= ''; + $output .= ''; $output .= $element['#title']; $output .= ''; } @@ -2858,10 +2857,6 @@ function template_preprocess_form_element(&$variables) { if (!empty($element['#attributes']['disabled'])) { $variables['attributes']['class'][] = 'form-disabled'; } - // Add a class for required elements. - if (!empty($element['#required'])) { - $variables['attributes']['class'][] = 'form-required'; - } // If #title is not set, we don't display any label. if (!isset($element['#title'])) { @@ -2923,17 +2918,23 @@ function theme_form_element_label($variables) { $attributes = array(); // Style the label as class option to display inline with the element. if ($element['#title_display'] == 'after') { - $attributes['class'] = 'option'; + $attributes['class'][] = 'option'; } // Show label only to screen readers to avoid disruption in visual flows. elseif ($element['#title_display'] == 'invisible') { - $attributes['class'] = 'visually-hidden'; + $attributes['class'][] = 'visually-hidden'; } if (!empty($element['#id'])) { $attributes['for'] = $element['#id']; } + // For required elements a 'form-required' class is appended to the + // label attributes. + if (!empty($element['#required'])) { + $attributes['class'][] = 'form-required'; + } + return '' . $title . ''; } diff --git a/core/includes/theme.inc b/core/includes/theme.inc index f9f25bb..4661c2c 100644 --- a/core/includes/theme.inc +++ b/core/includes/theme.inc @@ -1913,10 +1913,6 @@ function theme_container($variables) { if (!isset($element['#attributes']['id'])) { $element['#attributes']['id'] = $element['#id']; } - // Add a class for required elements. - if (!empty($element['widget']['#required'])) { - $element['#attributes']['class'][] = 'form-required'; - } // Add the 'form-wrapper' class. $element['#attributes']['class'][] = 'form-wrapper'; } diff --git a/core/misc/states.js b/core/misc/states.js index 25e8366..530f03e 100644 --- a/core/misc/states.js +++ b/core/misc/states.js @@ -520,14 +520,14 @@ $(document).on('state:required', function (e) { if (e.trigger) { if (e.value) { - var $formWrapper = $(e.target).attr({ 'required': 'required', 'aria-required': 'aria-required' }).closest('.form-item, .form-wrapper'); + var $label = $(e.target).attr({ 'required': 'required', 'aria-required': 'aria-required' }).closest('.form-item, .form-wrapper').find('label'); // Avoids duplicate required markers on initialization. - if (!$formWrapper.hasClass('form-required').length) { - $formWrapper.addClass('form-required'); + if (!$label.hasClass('form-required').length) { + $label.addClass('form-required'); } } else { - $(e.target).removeAttr('required aria-required').closest('.form-item.form-required, .form-wrapper.form-required').removeClass('form-required'); + $(e.target).removeAttr('required aria-required').closest('.form-item, .form-wrapper').find('label.form-required').removeClass('form-required'); } } }); diff --git a/core/modules/datetime/datetime.module b/core/modules/datetime/datetime.module index 5398420..00ba286 100644 --- a/core/modules/datetime/datetime.module +++ b/core/modules/datetime/datetime.module @@ -233,6 +233,13 @@ function template_preprocess_datetime_wrapper(&$variables) { $variables['description'] = $element['#description']; } + $title_attributes = array('class' => array('label')); + // For required datetime fields a 'form-required' class is appended to the + // label attributes. + if (!empty($element['#required'])) { + $title_attributes['class'][] = 'form-required'; + } + $variables['title_attributes'] = new Attribute($title_attributes); $variables['content'] = $element['#children']; } diff --git a/core/modules/datetime/templates/datetime-wrapper.html.twig b/core/modules/datetime/templates/datetime-wrapper.html.twig index cb73680..5660cf5 100644 --- a/core/modules/datetime/templates/datetime-wrapper.html.twig +++ b/core/modules/datetime/templates/datetime-wrapper.html.twig @@ -6,7 +6,7 @@ * Available variables: * - content: The form element to be output, usually a datelist, or datetime. * - title: The title of the form element. - * - attributes: HTML attributes for the form wrapper. + * - title_attributes: HTML attributes for the title wrapper. * - description: Description text for the form element. * * @see template_preprocess_datetime_wrapper() @@ -15,7 +15,7 @@ */ #} {% if title %} -

{{ title }}

+ {{ title }} {% endif %} {{ content }} {% if description %} diff --git a/core/modules/field/field.form.inc b/core/modules/field/field.form.inc index 389b760..ceeb6b8 100644 --- a/core/modules/field/field.form.inc +++ b/core/modules/field/field.form.inc @@ -7,6 +7,7 @@ use Drupal\Component\Utility\NestedArray; use Drupal\Core\Field\FieldDefinitionInterface; +use Drupal\Core\Template\Attribute; /** * Returns HTML for an individual form element. @@ -29,9 +30,13 @@ function theme_field_multiple_value_form($variables) { $table_id = drupal_html_id($element['#field_name'] . '_values'); $order_class = $element['#field_name'] . '-delta-order'; + $label_attributes = array('class' => array('label')); + if (!empty($element['#required'])) { + $label_attributes['class'][] = 'form-required'; + } $header = array( array( - 'data' => '

' . t('!title', array('!title' => $element['#title'])) . "

", + 'data' => '' . $element['#title'] . "", 'colspan' => 2, 'class' => array('field-label'), ), diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css index 747e218..ebb94da 100644 --- a/core/modules/system/css/system.theme.css +++ b/core/modules/system/css/system.theme.css @@ -83,35 +83,17 @@ h4.label { color: #e00; } -.form-required label:not(.option):before, -.form-required label:not(.option):after, -.form-required .fieldset-legend:before, -.form-required .fieldset-legend:after, -.form-required .label:before, -.form-required .label:after { +.form-required:after { speak: none; color: #e00; -} - -.form-required label:not(.option):after, -.form-required .fieldset-legend:after, -.form-required .label:after { content: "*"; margin-left: 0.25em; } -[dir="rtl"] .form-required label:not(.option):before, -[dir="rtl"] .form-required .fieldset-legend:before, -[dir="rtl"] .form-required .label:before { - content: "*"; - margin-right: 0.25em; -} - abbr.tabledrag-changed, abbr.ajax-changed { border-bottom: none; } - .form-item input.error, .form-item textarea.error, .form-item select.error { diff --git a/core/modules/system/lib/Drupal/system/Tests/Form/ElementsLabelsTest.php b/core/modules/system/lib/Drupal/system/Tests/Form/ElementsLabelsTest.php index 29825a4..b002635 100644 --- a/core/modules/system/lib/Drupal/system/Tests/Form/ElementsLabelsTest.php +++ b/core/modules/system/lib/Drupal/system/Tests/Form/ElementsLabelsTest.php @@ -59,10 +59,10 @@ 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"]/parent::div[contains(@class, "form-required")]/input[@id="edit-form-textfield-test-title-and-required"]'); + $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"]'); $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"]/parent::div[contains(@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="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"]'); diff --git a/core/modules/system/lib/Drupal/system/Tests/Form/FormTest.php b/core/modules/system/lib/Drupal/system/Tests/Form/FormTest.php index 8bb3c0e..4f4c4f8 100644 --- a/core/modules/system/lib/Drupal/system/Tests/Form/FormTest.php +++ b/core/modules/system/lib/Drupal/system/Tests/Form/FormTest.php @@ -95,8 +95,7 @@ function testRequiredFields() { $elements['file']['empty_values'] = $empty_strings; // Regular expression to find the expected marker on required elements. - - $required_marker_preg = '@<(?:div|fieldset) class=".*?form-required.*?">@'; + $required_marker_preg = '@<.*?class=".*?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) { diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css index 709b6dc..1eb0768 100644 --- a/core/themes/bartik/css/style.css +++ b/core/themes/bartik/css/style.css @@ -421,8 +421,7 @@ h1#site-name { background: #fff; background: rgba(255, 255, 255, 0.8); } -.region-header .form-required label:not(.option):after, -.region-header .form-required .label:after { +.region-header .form-required:after { color: #eee; color: rgba(255, 255, 255, 0.7); }