diff --git a/core/includes/theme.inc b/core/includes/theme.inc index e44f13d..8038161 100644 --- a/core/includes/theme.inc +++ b/core/includes/theme.inc @@ -1838,6 +1838,11 @@ function template_preprocess_container(&$variables) { $element['#attributes']['class'][] = 'form-wrapper'; } + // Add the aria-describedby attribute for date fields. + if (isset($element['widget']['#attributes']['aria-describedby'])) { + $element['#attributes']['aria-describedby'] = $element['widget']['#attributes']['aria-describedby']; + } + $variables['children'] = $element['#children']; $variables['attributes'] = $element['#attributes']; } diff --git a/core/modules/datetime/datetime.module b/core/modules/datetime/datetime.module index 3d13b7b..126ba6e 100644 --- a/core/modules/datetime/datetime.module +++ b/core/modules/datetime/datetime.module @@ -231,7 +231,13 @@ function template_preprocess_datetime_wrapper(&$variables) { } if (!empty($element['#description'])) { + // Add aria-describedby attribute to title tag for screen readers. $variables['description'] = $element['#description']; + $variables['attributes']['class'][] = 'description'; + // Associate the description with the aria-describedby attribute. + $variables['attributes']['id'] = $variables['attributes']['aria-describedby']; + // Remove aria-describedby attribute as it shouldn't be visible here. + unset($variables['attributes']['aria-describedby']); } $title_attributes = array('class' => array('label')); diff --git a/core/modules/datetime/lib/Drupal/datetime/Plugin/Field/FieldWidget/DateTimeDefaultWidget.php b/core/modules/datetime/lib/Drupal/datetime/Plugin/Field/FieldWidget/DateTimeDefaultWidget.php index ca60f4a..763517f 100644 --- a/core/modules/datetime/lib/Drupal/datetime/Plugin/Field/FieldWidget/DateTimeDefaultWidget.php +++ b/core/modules/datetime/lib/Drupal/datetime/Plugin/Field/FieldWidget/DateTimeDefaultWidget.php @@ -53,7 +53,6 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen // title because the actual title display is handled at a higher level by // the Field module. - $element['#theme_wrappers'][] = 'datetime_wrapper'; $element['#attributes']['class'][] = 'container-inline'; $element['#element_validate'][] = 'datetime_datetime_widget_validate'; @@ -62,6 +61,7 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen case DateTimeItem::DATETIME_TYPE_DATE: $date_type = 'date'; $time_type = 'none'; + $element['#theme_wrappers'][] = 'datetime_wrapper'; $date_format = $this->dateStorage->load('html_date')->getPattern($format_type); $time_format = ''; $element_format = $date_format; @@ -71,6 +71,7 @@ public function formElement(FieldItemListInterface $items, $delta, array $elemen default: $date_type = 'date'; $time_type = 'time'; + $element['#pre_render'][] = 'form_pre_render_conditional_form_element'; $date_format = $this->dateStorage->load('html_date')->getPattern($format_type); $time_format = $this->dateStorage->load('html_time')->getPattern($format_type); $element_format = $date_format . ' ' . $time_format; diff --git a/core/modules/datetime/lib/Drupal/datetime/Tests/DateTimeFieldTest.php b/core/modules/datetime/lib/Drupal/datetime/Tests/DateTimeFieldTest.php index d8c976a..2953850 100644 --- a/core/modules/datetime/lib/Drupal/datetime/Tests/DateTimeFieldTest.php +++ b/core/modules/datetime/lib/Drupal/datetime/Tests/DateTimeFieldTest.php @@ -170,6 +170,7 @@ function testDatetimeField() { $this->drupalGet('entity_test/add'); $this->assertFieldByName("{$field_name}[0][value][date]", '', 'Date element found.'); $this->assertFieldByName("{$field_name}[0][value][time]", '', 'Time element found.'); + $this->assertFieldByXPath('//*[@id="edit-' . $field_name . '-wrapper"]/fieldset/legend/span[contains(@class, "form-required")]', TRUE, 'Required markup found'); // Submit a valid date and ensure it is accepted. $value = '2012-12-31 00:00:00'; diff --git a/core/modules/datetime/templates/datetime-wrapper.html.twig b/core/modules/datetime/templates/datetime-wrapper.html.twig index 5660cf5..2bc9be0 100644 --- a/core/modules/datetime/templates/datetime-wrapper.html.twig +++ b/core/modules/datetime/templates/datetime-wrapper.html.twig @@ -8,6 +8,7 @@ * - title: The title of the form element. * - title_attributes: HTML attributes for the title wrapper. * - description: Description text for the form element. + * - attributes: Attributes for the description field. * * @see template_preprocess_datetime_wrapper() * @@ -19,5 +20,5 @@ {% endif %} {{ content }} {% if description %} -
{{ description }}
+ {{ description }} {% endif %} diff --git a/core/modules/system/css/system.module.css b/core/modules/system/css/system.module.css index a74934f..ffafafb 100644 --- a/core/modules/system/css/system.module.css +++ b/core/modules/system/css/system.module.css @@ -270,6 +270,9 @@ tr .ajax-progress-throbber .throbber { .container-inline .details-wrapper { display: block; } +.container-inline .description { + display: block; +} /** * Prevent text wrapping. diff --git a/core/modules/system/templates/fieldset.html.twig b/core/modules/system/templates/fieldset.html.twig index 52d410f..23cebfc 100644 --- a/core/modules/system/templates/fieldset.html.twig +++ b/core/modules/system/templates/fieldset.html.twig @@ -16,6 +16,7 @@ * - children: The rendered child elements of the fieldset. * - prefix: The content to add before the fieldset children. * - suffix: The content to add after the fieldset children. + * - content: The form element to be output. * * @see template_preprocess_fieldset() * @@ -32,6 +33,7 @@ {{ prefix }} {% endif %} {{ children }} + {{ content }} {% if suffix %} {{ suffix }} {% endif %}