feat: use title to replace MD tooltip for all hover-able labels

motss · Feb 13, 2022 · fa3e059 · fa3e059
1 parent 92848c9
commit fa3e059
Show file tree

Hide file tree

Showing 14 changed files with 190 additions and 86 deletions.
diff --git a/src/__tests__/year-grid/app-year-grid.test.ts b/src/__tests__/year-grid/app-year-grid.test.ts
@@ -3,7 +3,8 @@ import '../../year-grid/app-year-grid';
 import { expect, fixture, html } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 
-import type { confirmKeySet } from '../../constants';
+import type { confirmKeySet} from '../../constants';
+import { labelSelectedYear, labelTodayYear } from '../../constants';
 import { toFormatters } from '../../helpers/to-formatters';
 import type { CustomEventDetail, InferredFromSet } from '../../typings';
 import type { AppYearGrid } from '../../year-grid/app-year-grid';
@@ -17,6 +18,8 @@ describe(appYearGridName, () => {
     formatters: toFormatters('en-US'),
     max: new Date('2021-03-03'),
     min: new Date('2019-01-01'),
+    selectedYearLabel: labelSelectedYear,
+    todayYearLabel: labelTodayYear,
   };
   const elementSelectors = {
     yearGrid: '.year-grid',

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,20 +1,20 @@
 import { toResolvedDate } from './helpers/to-resolved-date.js';
 import { keyArrowDown, keyArrowLeft, keyArrowRight, keyArrowUp, keyEnd, keyEnter, keyHome, keyPageDown, keyPageUp, keySpace } from './key-values.js';
 
-//#region constants
-export const MAX_DATE = toResolvedDate('2100-12-31');
-//#endregion constants
-
-export const startViews = [
-  'calendar',
-  'yearGrid',
-] as const;
-
-export const DateTimeFormat = Intl.DateTimeFormat;
-
 export const confirmKeySet = new Set([keyEnter, keySpace]);
+export const DateTimeFormat = Intl.DateTimeFormat;
+export const labelChooseMonth = 'Choose month' as const;
+export const labelChooseYear = 'Choose year' as const;
+export const labelNextMonth = 'Next month' as const;
+export const labelPreviousMonth = 'Previous month' as const;
+export const labelSelectedDate = 'Selected date' as const;
+export const labelSelectedYear = 'Selected year' as const;
+export const labelTodayDate = 'Today date' as const;
+export const labelTodayYear = 'Today year' as const;
+export const MAX_DATE = toResolvedDate('2100-12-31');
 export const navigationKeyListNext = [keyArrowDown, keyPageDown, keyEnd];
 export const navigationKeyListPrevious = [keyArrowUp, keyPageUp, keyHome];
 export const navigationKeySetDayNext = new Set([...navigationKeyListNext, keyArrowRight]);
 export const navigationKeySetDayPrevious = new Set([...navigationKeyListPrevious, keyArrowLeft]);
 export const navigationKeySetGrid = new Set([...navigationKeySetDayNext, ...navigationKeySetDayPrevious]);
+export const startViews = ['calendar', 'yearGrid'] as const;
diff --git a/src/date-picker-dialog/date-picker-dialog.ts b/src/date-picker-dialog/date-picker-dialog.ts
@@ -127,6 +127,8 @@ export class DatePickerDialog extends DatePickerMixin(DatePickerMinMaxMixin(Root
 
   protected $renderSlot(): TemplateResult {
     const {
+      chooseMonthLabel,
+      chooseYearLabel,
       disabledDates,
       disabledDays,
       firstDayOfWeek,
@@ -137,15 +139,19 @@ export class DatePickerDialog extends DatePickerMixin(DatePickerMinMaxMixin(Root
       nextMonthLabel,
       previousMonthLabel,
       selectedDateLabel,
+      selectedYearLabel,
       showWeekNumber,
       startView,
+      todayDateLabel,
+      todayYearLabel,
       value,
       weekLabel,
       weekNumberType,
-      yearDropdownLabel,
     } = this;
 
     return slotDatePicker({
+      chooseMonthLabel,
+      chooseYearLabel,
       disabledDates,
       disabledDays,
       firstDayOfWeek,
@@ -159,12 +165,14 @@ export class DatePickerDialog extends DatePickerMixin(DatePickerMinMaxMixin(Root
       onDatePickerFirstUpdated: this.$onDatePickerFirstUpdated,
       previousMonthLabel,
       selectedDateLabel,
+      selectedYearLabel,
       showWeekNumber,
       startView,
+      todayDateLabel,
+      todayYearLabel,
       value,
       weekLabel,
       weekNumberType,
-      yearDropdownLabel,
     });
   }
 

diff --git a/src/date-picker-input-surface/stylings.ts b/src/date-picker-input-surface/stylings.ts
@@ -13,6 +13,7 @@ export const DatePickerInputSurfaceStyling = css`
   --mdc-shape-medium: var(--_shape);
 
   display: block;
+  position: absolute; /* NOTE(motss): Set this so that surface can be placed on top of its anchor element */
 }
 
 .mdc-menu-surface.mdc-menu-surface--open {

diff --git a/src/date-picker-input/date-picker-input.ts b/src/date-picker-input/date-picker-input.ts
@@ -68,16 +68,17 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
 
     const input = await this.$input;
     if (input) {
-      const onBodyKeyup = (ev: KeyboardEvent) => {
+      const onBodyKeyup = async (ev: KeyboardEvent) => {
         if (ev.key === keyEscape) {
           this.closePicker();
         } else if (ev.key === keyTab) {
-          const isTabInside = (ev.composedPath() as HTMLElement[]).find(
+          const inputSurface = await this.$inputSurface;
+          const isTabInsideInputSurface = (ev.composedPath() as HTMLElement[]).find(
             n => n.nodeType === Node.ELEMENT_NODE &&
-            this.isEqualNode(n)
+            n.isEqualNode(inputSurface)
           );
 
-          if (!isTabInside) this.closePicker();
+          if (!isTabInsideInputSurface) this.closePicker();
         }
       }
       const onClick = () => this._open = true;
@@ -195,17 +196,19 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
 
     return html`
     <app-date-picker-input-surface
+      @opened=${this.#onOpened}
       ?open=${this._open}
       ?stayOpenOnBodyClick=${true}
       .anchor=${this as HTMLElement}
       @closed=${this.#onClosed}
-      @opened=${this.#onOpened}
     >${this.$renderSlot()}</app-date-picker-input-surface>
     `;
   }
 
   protected $renderSlot(): TemplateResult {
     const {
+      chooseMonthLabel,
+      chooseYearLabel,
       disabledDates,
       disabledDays,
       firstDayOfWeek,
@@ -216,15 +219,19 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
       nextMonthLabel,
       previousMonthLabel,
       selectedDateLabel,
+      selectedYearLabel,
       showWeekNumber,
       startView,
+      todayDateLabel,
+      todayYearLabel,
       value,
       weekLabel,
       weekNumberType,
-      yearDropdownLabel,
     } = this;
 
     return slotDatePicker({
+      chooseMonthLabel,
+      chooseYearLabel,
       disabledDates,
       disabledDays,
       firstDayOfWeek,
@@ -238,12 +245,14 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
       onDatePickerFirstUpdated: this.#onDatePickerFirstUpdated,
       previousMonthLabel,
       selectedDateLabel,
+      selectedYearLabel,
       showWeekNumber,
       startView,
+      todayDateLabel,
+      todayYearLabel,
       value,
       weekLabel,
       weekNumberType,
-      yearDropdownLabel,
     });
   }
 

diff --git a/src/date-picker/date-picker.ts b/src/date-picker/date-picker.ts
@@ -29,7 +29,6 @@ import { RootElement } from '../root-element/root-element.js';
 import { baseStyling, resetShadowRoot, webkitScrollbarStyling } from '../stylings.js';
 import type { CustomEventDetail, DatePickerProperties, Formatters, StartView, ValueUpdatedEvent } from '../typings.js';
 import type { AppYearGrid } from '../year-grid/app-year-grid.js';
-import type { YearGridData } from '../year-grid/typings.js';
 import { datePickerStyling } from './stylings.js';
 import type { DatePickerChangedProperties } from './typings.js';
 
@@ -246,25 +245,31 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
 
   protected override render(): TemplateResult {
     const formatters = this.#formatters;
-    const currentDate = this._currentDate;
-    const max = this._max;
-    const min = this._min;
-    const showWeekNumber = this.showWeekNumber;
-    const startView = this.startView;
+    const {
+      _currentDate,
+      _max,
+      _min,
+      chooseMonthLabel,
+      chooseYearLabel,
+      showWeekNumber,
+      startView,
+    } = this;
 
     const { longMonthYearFormat } = formatters;
-    const selectedYearMonth = longMonthYearFormat(currentDate);
+    const selectedYearMonth = longMonthYearFormat(_currentDate);
     const isStartViewYearGrid = startView === 'yearGrid';
+    const label = startView === 'calendar' ? chooseYearLabel : chooseMonthLabel;
 
     return html`
     <div class=header part=header>
       <div class=month-and-year-selector>
         <p class=selected-year-month>${selectedYearMonth}</p>
 
         <mwc-icon-button
-          class=year-dropdown
-          .ariaLabel=${this.yearDropdownLabel}
+          .ariaLabel=${label}
           @click=${this.#updateStartView}
+          class=year-dropdown
+          title=${label}
         >${iconArrowDropdown}</mwc-icon-button>
       </div>
 
@@ -273,15 +278,15 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
           nothing :
           html`
           <div class=month-pagination>
-            ${this.#renderNavigationButton('previous', isInCurrentMonth(min, currentDate))}
-            ${this.#renderNavigationButton('next', isInCurrentMonth(max, currentDate))}
+            ${this.#renderNavigationButton('previous', isInCurrentMonth(_min, _currentDate))}
+            ${this.#renderNavigationButton('next', isInCurrentMonth(_max, _currentDate))}
           </div>
           `
       }
     </div>
 
     <div class="body ${classMap({
-      [`start-view--${isStartViewYearGrid ? 'year-grid' : 'calendar'}`]: true,
+      [`start-view--${startView}`]: true,
       'show-week-number': showWeekNumber,
     })}" part=body>${
       (isStartViewYearGrid ? this.#renderYearGrid : this.#renderCalendar)()
@@ -323,13 +328,26 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
   };
 
   #renderCalendar = (): TemplateResult => {
-    const currentDate = this._currentDate;
-    const firstDayOfWeek = this.firstDayOfWeek;
+    const {
+      _currentDate,
+      _max,
+      _min,
+      _selectedDate,
+      disabledDates,
+      disabledDays,
+      firstDayOfWeek,
+      locale,
+      selectedDateLabel,
+      showWeekNumber,
+      todayDateLabel,
+      weekLabel,
+      weekNumberType,
+    } = this;
+    const currentDate = _currentDate;
     const formatters = this.#formatters;
-    const max = this._max;
-    const min = this._min;
-    const selectedDate = this._selectedDate;
-    const showWeekNumber = this.showWeekNumber;
+    const max = _max;
+    const min = _min;
+    const selectedDate = _selectedDate;
     const {
       dayFormat,
       fullDateFormat,
@@ -340,9 +358,9 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
     const weekdays = getWeekdays({
       longWeekdayFormat,
       narrowWeekdayFormat,
-      firstDayOfWeek: this.firstDayOfWeek,
+      firstDayOfWeek,
       showWeekNumber,
-      weekLabel: this.weekLabel,
+      weekLabel,
     });
     const {
       calendar: calendarMonth,
@@ -351,15 +369,15 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
     } = calendar({
       date: currentDate,
       dayFormat,
-      disabledDates: splitString(this.disabledDates, toResolvedDate),
-      disabledDays: splitString(this.disabledDays, Number),
+      disabledDates: splitString(disabledDates, toResolvedDate),
+      disabledDays: splitString(disabledDays, Number),
       firstDayOfWeek,
       fullDateFormat,
-      locale: this.locale,
+      locale,
       max,
       min,
       showWeekNumber,
-      weekNumberType: this.weekNumberType,
+      weekNumberType,
     });
 
     return html`
@@ -373,8 +391,10 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
         formatters,
         max,
         min,
+        selectedDateLabel,
         showWeekNumber,
         todayDate: this.#today,
+        todayDateLabel,
         weekdays,
       }}
       @date-updated=${this.#updateSelectedDate}
@@ -388,28 +408,40 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(RootElemen
     shouldSkipRender = true
   ): TemplateResult {
     const isPreviousNavigationType = navigationType === 'previous';
+    const label = isPreviousNavigationType ? this.previousMonthLabel : this.nextMonthLabel;
 
     return shouldSkipRender ?
       html`<div data-navigation=${navigationType}></div>` :
       html`
       <mwc-icon-button
-        data-navigation=${navigationType}
-        .ariaLabel=${isPreviousNavigationType ? this.previousMonthLabel : this.nextMonthLabel}
+        .ariaLabel=${label}
         @click=${this.#navigateMonth}
+        data-navigation=${navigationType}
+        title=${label}
       >${isPreviousNavigationType ? iconChevronLeft : iconChevronRight}</mwc-icon-button>
       `;
   }
 
   #renderYearGrid = (): TemplateResult => {
+    const {
+      _max,
+      _min,
+      _selectedDate,
+      selectedYearLabel,
+      todayYearLabel,
+    } = this;
+
     return html`
     <app-year-grid
       class=year-grid
       .data=${{
-        date: this._selectedDate,
+        date: _selectedDate,
         formatters: this.#formatters,
-        max: this._max,
-        min: this._min,
-      } as YearGridData}
+        max: _max,
+        min: _min,
+        selectedYearLabel,
+        todayYearLabel,
+      }}
       @year-updated=${this.#updateYear}
     ></app-year-grid>
     `;