diff --git a/core/modules/datetime/datetime.module b/core/modules/datetime/datetime.module index 3a016b5..0adedda 100644 --- a/core/modules/datetime/datetime.module +++ b/core/modules/datetime/datetime.module @@ -238,9 +238,17 @@ function template_preprocess_datetime_wrapper(&$variables) { if (!empty($element['#title'])) { $variables['title'] = $element['#title']; } - if (!empty($element['#description'])) { $variables['description'] = $element['#description']; + // Add element class and id for screen readers. + $variables['attributes']['class'][] = 'description'; + $variables['attributes']['id'] = $variables['attributes']['aria-describedby']; + // Remove aria-describedby attribute as it shouldn't be visible here. + unset($variables['attributes']['aria-describedby']); + } + else { + // Add the aria-describedby attribute to fieldset. + $variables['attributes']['aria-describedby'] = $element['#id'] . '--description'; } $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 a4acf70..8c10308 100644 --- a/core/modules/datetime/templates/datetime-wrapper.html.twig +++ b/core/modules/datetime/templates/datetime-wrapper.html.twig @@ -9,18 +9,21 @@ * - attributes: HTML attributes for the form wrapper. * - required: (optional) A marker indicating that the form element is required. * - description: Description text for the form element. + * - attributes: HTML attributes for the containing element. * * @see template_preprocess_datetime_wrapper() * * @ingroup themeable */ #} -{% if title %} -

- {% trans %}{{ title|passthrough }}{{ required|passthrough }}{% endtrans %} -

-{% endif %} -{{ content }} -{% if description %} -
{{ description }}
-{% endif %} +
+ {% if title %} + + {% trans %}{{ title|passthrough }}{{ required|passthrough }}{% endtrans %} + + {% endif %} + {{ content }} + {% if description %} + {{ description }} + {% endif %} +