Issue #3257154 by SKAUGHT: Facets range datepicker widget | Accessibility related cleanup

config/schema/facets_range_datepicker_widget.schema.yml

+# Config schema for state radio, you can find the implementation in
+# Drupal\facets_range_datepicker_widget\Plugin\facets\widget\DatepickerWidget.
+facet.widget.config.datepicker:
+  type: facet.widget.datepicker
+  label: 'Datepicker widget configuration'
+  mapping:
+    facet_min_label:
+      type: label
+      label: 'Date Label'
+      translatable: true
+    labels_hidden:
+      type: boolean
+      label: 'Add visually-hidden class to Facet Labels'
+
+# Drupal\facets_range_datepicker_widget\Plugin\facets\widget\RangeDatepickerWidget.
+facet.widget.config.range_datepicker:
+  type: facet.widget.range_datepicker
+  label: 'Range Datepicker widget configuration'
+  mapping:
+    facet_min_label:
+      type: label
+      label: 'Minimum Date Label'
+      translatable: true
+    facet_max_label:
+      type: label
+      label: 'Maximun Date Label'    
+      translatable: true
+    labels_hidden:
+      type: boolean
+      label: 'Add visually-hidden class to Facet Labels'

src/Plugin/facets/widget/DatepickerWidget.php

@@ -5,6 +5,7 @@ namespace Drupal\facets_range_datepicker_widget\Plugin\facets\widget;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\facets\FacetInterface;
 use Drupal\facets\Widget\WidgetPluginBase;
+use Drupal\Component\Utility\Html;
 
 /**
  * The datepicker widget.
@@ -21,7 +22,10 @@ class DatepickerWidget extends WidgetPluginBase {
    * {@inheritdoc}
    */
   public function defaultConfiguration() {
-    return parent::defaultConfiguration();
+    return [
+      'labels_hidden' => 0,
+      'facet_min_label' => 'Select Date',
+    ] + parent::defaultConfiguration();
   }
 
   /**
@@ -41,22 +45,33 @@ class DatepickerWidget extends WidgetPluginBase {
     if (isset($active[0]['min'])) {
       $default = date('Y-m-d', $active[0]['min']);
     }
+    $config = $this->getConfiguration();
 
+    $htmlUniqueId = Html::getUniqueId($facet->id() . '-min');
     $build['#items'] = [];
-    $build['#items']['min'] = [
-      [
-        '#type' => 'html_tag',
-        '#tag' => 'input',
-        '#attributes' => [
-          'type' => 'date',
-          'class' => ['facet-datepicker'],
-          'id' => $facet->id() . '-min',
-          'name' => $facet->id() . '-min',
-          'data-type' => 'datepicker-min',
-          'value' => $default,
-        ],
+    $build['#items']['min']['label'] = [
+      '#type' => 'html_tag',
+      '#tag' => 'label',
+      '#value' => $config['facet_min_label'],
+      '#attributes' => [
+        'id' => $htmlUniqueId . '-label',
+        'for' => $htmlUniqueId,
       ],
     ];
+    $build['#items']['min']['input'] = [
+      '#type' => 'html_tag',
+      '#tag' => 'input',
+      '#attributes' => [
+        'type' => 'date',
+        'class' => ['facet-datepicker'],
+        'id' => $htmlUniqueId,
+        'name' => $htmlUniqueId,
+        'data-type' => 'datepicker-min',
+      ],
+    ];
+    if ($config['labels_hidden'] == 1) {
+      $build['#items']['min']['label']['#attributes']['class'] = ['visually-hidden'];
+    }
 
     $url = array_shift($results)->getUrl()->toString();
     $build['#attached']['drupalSettings']['facets']['datepicker'][$facet->id()] = [
@@ -78,6 +93,19 @@ class DatepickerWidget extends WidgetPluginBase {
     $form['warning'] = [
       '#markup' => '<div class="messages messages--warning">' . $message . '</div>',
     ];
+    $config = $this->getConfiguration();
+
+    $form['labels_hidden'] = [
+      '#type' => 'checkbox',
+      '#title' => $this->t('Add <q>visually-hidden</q> class to Facet Labels'),
+      '#default_value' => $config['labels_hidden'],
+    ];
+
+    $form['facet_min_label'] = [
+      '#type' => 'textfield',
+      '#title' => $this->t('Date Label'),
+      '#default_value' => $config['facet_min_label'],
+    ];
 
     return $form;
   }

src/Plugin/facets/widget/RangeDatepickerWidget.php

@@ -4,6 +4,7 @@ namespace Drupal\facets_range_datepicker_widget\Plugin\facets\widget;
 
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\facets\FacetInterface;
+use Drupal\Component\Utility\Html;
 
 /**
  * The Datepicker widget.
@@ -16,6 +17,16 @@ use Drupal\facets\FacetInterface;
  */
 class RangeDatepickerWidget extends DatepickerWidget {
 
+  /**
+   * {@inheritdoc}
+   */
+  public function defaultConfiguration() {
+    return [
+      'facet_min_label' => 'Initial Date',
+      'facet_max_label' => 'Closing Date',
+    ] + parent::defaultConfiguration();
+  }
+
   /**
    * {@inheritdoc}
    */
@@ -28,26 +39,38 @@ class RangeDatepickerWidget extends DatepickerWidget {
     }
 
     $active = $facet->getActiveItems();
-    $default = '';
-    if (isset($active[0]['max'])) {
-      $default = date('Y-m-d', $active[0]['max']);
-     }
-
-    $build['#items']['max'] = [
-      [
-        '#type' => 'html_tag',
-        '#tag' => 'input',
-        '#attributes' => [
-          'type' => 'date',
-          'class' => ['facet-datepicker'],
-          'id' => $facet->id() . '-max',
-          'name' => $facet->id() . '-max',
-          'data-type' => 'datepicker-max',
-          'value' => $default,
-        ],
+    $config = $this->getConfiguration();
+
+    // As this extends DatepickerWidget update the 'min' title.
+    $build['#items']['min']['label']['#value'] = $config['facet_min_label'];
+    $labelValue = $facet->getName();
+
+    $htmlUniqueId = Html::getUniqueId($facet->id() . '-max');
+
+    $build['#items']['max']['label'] = [
+      '#type' => 'html_tag',
+      '#tag' => 'label',
+      '#value' => $config['facet_max_label'],
+      '#attributes' => [
+        'id' => $htmlUniqueId . '-label',
+        'for' => $htmlUniqueId,
       ],
     ];
-
+    $build['#items']['max']['input'] = [
+      '#type' => 'html_tag',
+      '#tag' => 'input',
+      '#attributes' => [
+        'type' => 'date',
+        'class' => ['facet-datepicker'],
+        'id' => $htmlUniqueId,
+        'name' => $htmlUniqueId,
+        'data-type' => 'datepicker-max',
+      ],
+    ];
+    if ($config['labels_hidden'] == 1) {
+      $build['#items']['min']['label']['#attributes']['class'] = ['visually-hidden'];
+      $build['#items']['max']['label']['#attributes']['class'] = ['visually-hidden'];
+    }
     $url = array_shift($results)->getUrl()->toString();
     $build['#attached']['drupalSettings']['facets']['datepicker'][$facet->id()] = [
       'url' => $url,
@@ -84,7 +107,16 @@ class RangeDatepickerWidget extends DatepickerWidget {
     $form['warning'] = [
       '#markup' => '<div class="messages messages--warning">' . $message . '</div>',
     ];
+    $config = $this->getConfiguration();
+
+    $form['facet_min_label']['#default_value'] = $config['facet_min_label'];
+    $form['facet_min_label']['#title'] = $this->t('Minimum Date Label');
 
+    $form['facet_max_label'] = [
+      '#type' => 'textfield',
+      '#title' => $this->t('Maximum Date Label'),
+      '#default_value' => $config['facet_max_label'],
+    ];
     return $form;
   }