diff --git a/core/modules/datetime/datetime.module b/core/modules/datetime/datetime.module index e296c84..bc3c690 100644 --- a/core/modules/datetime/datetime.module +++ b/core/modules/datetime/datetime.module @@ -107,6 +107,10 @@ function datetime_theme() { 'template' => 'datetime-wrapper', 'render element' => 'element', ), + 'datetime_fieldset_wrapper' => array( + 'template' => 'datetime-fieldset-wrapper', + 'render element' => 'element', + ), ); } @@ -249,8 +253,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')); @@ -264,6 +273,46 @@ function template_preprocess_datetime_wrapper(&$variables) { } /** + * Prepares variables for datetime fieldset form wrapper templates. + * + * Default template: datetime-fieldset-wrapper.html.twig. + * + * @param array $variables + * An associative array containing: + * - element: An associative array containing the properties of the element. + * Properties used: #attributes, ,#content, #description, #id, #title, + * #required. + */ +function template_preprocess_datetime_fieldset_wrapper(&$variables) { + $element = $variables['element']; + $variables['content'] = $element['#children']; + $variables['attributes'] = $element['#attributes']; + $variables['attributes']['class'][] = 'form-item'; + $legend_attributes = array(); + if (isset($element['#title_display']) && $element['#title_display'] == 'invisible') { + $legend_attributes['class'][] = 'visually-hidden'; + } + $variables['legend']['attributes'] = new Attribute($legend_attributes); + if (!empty($element['#title'])) { + $variables['legend']['title'] = $element['#title']; + } +// $variables['legend']['title'] = (isset($element['#title']) && $element['#title'] !== '') ? Xss::filterAdmin($element['#title']) : ''; + $legend_span_attributes = array('class' => array('fieldset-legend')); + if (!empty($element['#required'])) { + $legend_span_attributes['class'][] = 'form-required'; + $variables['legend_span']['attributes'] = new Attribute($legend_span_attributes); + } + if (!empty($element['#description'])) { + $description_attributes = array( + 'class' => 'description', + 'id' => $element['#attributes']['aria-describedby'], + ); + $variables['description']['attributes'] = new Attribute($description_attributes); + $variables['description']['content'] = $element['#description']; + } +} + +/** * Expands a datetime element type into date and/or time elements. * * All form elements are designed to have sane defaults so any or all can be diff --git a/core/modules/datetime/src/Plugin/Field/FieldWidget/DateTimeDefaultWidget.php b/core/modules/datetime/src/Plugin/Field/FieldWidget/DateTimeDefaultWidget.php index 1500436..5ccf9a5 100644 --- a/core/modules/datetime/src/Plugin/Field/FieldWidget/DateTimeDefaultWidget.php +++ b/core/modules/datetime/src/Plugin/Field/FieldWidget/DateTimeDefaultWidget.php @@ -85,7 +85,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'; + $element['#theme_wrappers'][] = 'datetime_fieldset_wrapper'; $date_format = $this->dateStorage->load('html_date')->getPattern(); $time_format = $this->dateStorage->load('html_time')->getPattern(); $element_format = $date_format . ' ' . $time_format; diff --git a/core/modules/datetime/templates/datetime-fieldset-wrapper.html.twig b/core/modules/datetime/templates/datetime-fieldset-wrapper.html.twig new file mode 100644 index 0000000..4855700 --- /dev/null +++ b/core/modules/datetime/templates/datetime-fieldset-wrapper.html.twig @@ -0,0 +1,34 @@ +{# +/** + * @file + * Default theme implementation of a datetime fieldset form wrapper. + * + * Available variables: + * - attributes: HTML attributes for the fieldset element. + * - required: The required marker or empty if the associated fieldset is + * not required. + * - legend: The legend element containing the following properties: + * - title: Title of the fieldset, intended for use as the text of the legend. + * - attributes: HTML attributes to apply to the legend. + * - description: The description element containing the following properties: + * - content: The description content of the fieldset. + * - attributes: HTML attributes to apply to the description container. + * - content: The form element to be output. + * + * @see template_preprocess_datetime_fieldset_wrapper() + * + * @ingroup themeable + */ +#} + + {% if legend.title is not empty or required -%} + {# Always wrap fieldset legends in a SPAN for CSS positioning. #} + {{ legend.title }}{{ required }} + {%- endif %} +
+ {{ content }} + {% if description.content %} + {{ description.content }}
+ {% endif %} + + \ No newline at end of file