Improve accessibility (keyboard navigation)

frocher · Feb 20, 2022 · d999580 · d999580
1 parent b444555
commit d999580
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 9 deletions.
diff --git a/src/range-date-picker-cell.ts b/src/range-date-picker-cell.ts
@@ -1,6 +1,7 @@
 import { LitElement, html, css, PropertyValues, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
-import { getTime, startOfDay } from 'date-fns';
+import { format, getTime, startOfDay } from 'date-fns';
+import { enUS } from 'date-fns/esm/locale';
 import { Day } from './day.js';
 
 class RangeDatepickerCell extends LitElement {
@@ -20,6 +21,15 @@ class RangeDatepickerCell extends LitElement {
       margin: 0;
       padding: 0;
       color: var(--wc-datepicker-cell-text);
+
+      border: none;
+      outline: none;
+      background-color: transparent;
+    }
+
+    .day:focus {
+      outline: 1px solid
+        var(--wc-datepicker-cell-hovered, rgba(0, 150, 136, 0.5));
     }
 
     .day:not(.disabled):hover {
@@ -87,11 +97,23 @@ class RangeDatepickerCell extends LitElement {
 
   @property({ type: Boolean }) protected isCurrentDate = false;
 
+  @property({ type: Object })
+  public get locale() {
+    return this._locale ? this._locale : enUS;
+  }
+
+  public set locale(value) {
+    const oldValue = this._locale;
+    this._locale = value;
+    this.requestUpdate('locale', oldValue);
+  }
+
+  protected _locale: any | null = null;
+
   render(): TemplateResult {
     return html`
-      <div
+      <button
         @click="${this.handleTap}"
-        @keydown="${this.handleTap}"
         @mouseover="${this.handleHover}"
         @focus="${this.handleHover}"
         class="day ${this.isCurrentDate ? 'currentDate' : ''} ${this.isSelected(
@@ -102,9 +124,11 @@ class RangeDatepickerCell extends LitElement {
           this.max!,
           this.disabledDays
         )}"
+        ?disabled="${this.disabled}"
+        title="${this.getTitle(this.day?.date)}"
       >
         <div class="currentDayMarker">${this.day?.title}</div>
-      </div>
+      </button>
     `;
   }
 
@@ -204,6 +228,15 @@ class RangeDatepickerCell extends LitElement {
     }
     return '';
   }
+
+  getTitle(date: number | undefined): string {
+    if (date === undefined) {
+      return '';
+    }
+    return format(date * 1000, 'PPPP', {
+      locale: this.locale,
+    });
+  }
 }
 
 window.customElements.define('wc-range-datepicker-cell', RangeDatepickerCell);
diff --git a/src/range-datepicker-calendar.ts b/src/range-datepicker-calendar.ts
@@ -255,12 +255,13 @@ export class RangeDatepickerCalendar extends LitElement {
       return html`
         <div class="year-container">
           ${this.year}
-          <mwc-icon-button icon="arrow_drop_down" @click="${
-            this.handleOpenYearSelection
-          }"></mwc-icon-button>
+          <mwc-icon-button
+            icon="arrow_drop_down"
+            @click="${this.handleOpenYearSelection}"
+          ></mwc-icon-button>
           <mwc-menu class="year-change" @selected="${this.handleYearSelected}">
-          ${this.yearsList.map(i => this.renderYearItem(i))}
-          </mwc-men>
+            ${this.yearsList.map(i => this.renderYearItem(i))}
+          </mwc-menu>
         </div>
       `;
     }
@@ -295,6 +296,7 @@ export class RangeDatepickerCalendar extends LitElement {
                 .hoveredDate="${this.hoveredDate}"
                 .dateTo="${this.dateTo}"
                 .dateFrom="${this.dateFrom}"
+                .locale="${this.locale}"
                 .day="${day}"
                 ?isCurrentDate="${this.isCurrentDate(day)}"
                 @date-is-selected="${this.handleDateSelected}"
@@ -432,6 +434,7 @@ export class RangeDatepickerCalendar extends LitElement {
   handleDateSelected(e: CustomEvent): void {
     const { detail } = e;
     const { date } = detail;
+
     if (!this.noRange) {
       if (this.dateFrom && this.dateTo) {
         this.dateFrom = date;
@@ -445,6 +448,7 @@ export class RangeDatepickerCalendar extends LitElement {
     } else {
       this.dateFrom = date;
     }
+
     this.dispatchEvent(
       new CustomEvent('date-from-changed', { detail: { value: this.dateFrom } })
     );