Improve accessibility (#553)

* Improve accessibility

* Fix lint

* Add missing `isDatePicker` to range / multi calendar

* Add `@autofocus` parameter and implement

Author: mkszepp

docs/app/components/snippets/datepicker-1.hbs

@@ -1,12 +1,16 @@
 <BasicDropdown as |dropdown|>
-  {{! template-lint-disable require-input-label }}
+  <div>
+    <label for="datepicker-1">Date picker</label>
+  </div>
+
   <input
     type="text"
     data-ebd-id="{{dropdown.uniqueId}}-trigger"
     class="datepicker-demo-input"
-    onclick={{dropdown.actions.toggle}}
     value={{if this.selected (format-date this.selected "DD-MM-YYYY")}}
+    id="datepicker-1"
     readonly
+    {{on "focus" dropdown.actions.toggle}}
   />
 
   <dropdown.Content class="datepicker-demo-dropdown">
@@ -16,6 +20,8 @@
       @onCenterChange={{this.onCenterChange}}
       @selected={{this.selected}}
       @onSelect={{this.onSelect}}
+      @isDatePicker={{true}}
+      @autofocus={{true}}
       as |calendar|
     >
       <calendar.Nav />

docs/app/components/snippets/multiple-selection-1.hbs

@@ -2,6 +2,7 @@
   @center={{this.center}}
   @selected={{this.collection}}
   @onSelect={{this.onSelect}}
+  @onCenterChange={{this.onCenterChange}}
   as |calendar|
 >
   <calendar.Nav />

docs/app/components/snippets/multiple-selection-1.js

@@ -6,6 +6,11 @@ export default class extends Component {
   @tracked center = new Date('2016-05-17');
   @tracked collection = [];
 
+  @action
+  onCenterChange(selected) {
+    this.center = selected.date;
+  }
+
   @action
   onSelect(selected) {
     this.collection = selected.date;

ember-power-calendar/package.json

@@ -68,6 +68,7 @@
     "@embroider/macros": "^1.17.3",
     "ember-assign-helper": "^0.5.1",
     "ember-element-helper": "^0.8.7",
+    "ember-modifier": "^4.2.0",
     "ember-truth-helpers": "^4.0.3"
   },
   "devDependencies": {

ember-power-calendar/src/-private/days-utils.ts

@@ -14,6 +14,7 @@ import {
   type PowerCalendarDay,
 } from '../utils.ts';
 
+export const DAY_IN_MS = 86400000;
 export const WEEK_DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 export type TWeekdayFormat = 'min' | 'short' | 'long';
 
@@ -95,13 +96,13 @@ export function handleDayKeyDown(
     }
   }
 
-  if (!index) {
+  if (index === undefined) {
     return;
   }
 
   if (e.key === 'ArrowUp') {
     e.preventDefault();
-    const newIndex = Math.max(index - 7, 0);
+    const newIndex = index - 7;
     day = days[newIndex];
     if (day?.isDisabled) {
       for (let i = newIndex + 1; i <= index; i++) {
@@ -113,7 +114,7 @@ export function handleDayKeyDown(
     }
   } else if (e.key === 'ArrowDown') {
     e.preventDefault();
-    const newIndex = Math.min(index + 7, days.length - 1);
+    const newIndex = index + 7;
     day = days[newIndex];
     if (day?.isDisabled) {
       for (let i = newIndex - 1; i >= index; i--) {
@@ -124,12 +125,12 @@ export function handleDayKeyDown(
       }
     }
   } else if (e.key === 'ArrowLeft') {
-    day = days[Math.max(index - 1, 0)];
+    day = days[index - 1];
     if (day?.isDisabled) {
       return;
     }
   } else if (e.key === 'ArrowRight') {
-    day = days[Math.min(index + 1, days.length - 1)];
+    day = days[index + 1];
     if (day?.isDisabled) {
       return;
     }
@@ -243,7 +244,7 @@ export function handleClick(
   e: MouseEvent,
   days: PowerCalendarDay[],
   calendar: CalendarAPI,
-): void {
+): PowerCalendarDay | undefined {
   const dayEl: HTMLElement | null | undefined = (
     e.target as HTMLElement | null
   )?.closest('[data-date]');
@@ -254,6 +255,8 @@ export function handleClick(
       if (calendar.actions.select) {
         calendar.actions.select(day, calendar, e);
       }
+
+      return day;
     }
   }
 }

ember-power-calendar/src/-private/utils.ts

@@ -25,7 +25,11 @@ export function publicActionsObject(
     | undefined,
   changeCenterTask: TaskForAsyncTaskFunction<
     unknown,
-    (newCenter: Date, calendar: CalendarAPI, e: MouseEvent) => Promise<void>
+    (
+      newCenter: Date,
+      calendar: CalendarAPI,
+      e: MouseEvent | KeyboardEvent,
+    ) => Promise<void>
   >,
   currentCenter: Date,
 ): PowerCalendarActions {
@@ -37,7 +41,7 @@ export function publicActionsObject(
     const changeCenter = (
       newCenter: Date,
       calendar: CalendarAPI,
-      e: MouseEvent,
+      e: MouseEvent | KeyboardEvent,
     ) => {
       return changeCenterTask.perform(newCenter, calendar, e);
     };

ember-power-calendar/src/components/power-calendar-multiple.hbs

@@ -5,17 +5,32 @@
       Nav=(component
         (ensure-safe-component (or @navComponent this.navComponent))
         calendar=(readonly this.publicAPI)
+        isDatePicker=@isDatePicker
       )
       Days=(component
         (ensure-safe-component (or @daysComponent this.daysComponent))
         calendar=(readonly this.publicAPI)
+        isDatePicker=@isDatePicker
+        autofocus=@autofocus
       )
     )
   )
   as |calendar|
 }}
   {{#let (element this.tagWithDefault) as |Tag|}}
-    <Tag class="ember-power-calendar" ...attributes id={{calendar.uniqueId}}>
+    <Tag
+      class="ember-power-calendar"
+      role={{if @isDatePicker "dialog" "group"}}
+      aria-modal={{if @isDatePicker "true"}}
+      aria-label={{if
+        @ariaLabel
+        @ariaLabel
+        (unless @ariaLabeledBy "Choose Multiple Dates")
+      }}
+      aria-labelledby={{@ariaLabeledBy}}
+      ...attributes
+      id={{calendar.uniqueId}}
+    >
       {{#if (has-block)}}
         {{yield calendar}}
       {{else}}

ember-power-calendar/src/components/power-calendar-multiple/days.hbs

@@ -2,26 +2,38 @@
 <div
   class="ember-power-calendar-days"
   data-power-calendar-id={{or @calendar.calendarUniqueId @calendar.uniqueId}}
+  role="grid"
+  aria-labelledby="ember-power-calendar-nav-title-{{@calendar.uniqueId}}"
   {{on "click" this.handleClick}}
+  {{this.setup}}
   ...attributes
 >
-  <div class="ember-power-calendar-row ember-power-calendar-weekdays">
+  <div
+    class="ember-power-calendar-row ember-power-calendar-weekdays"
+    role="row"
+  >
     {{#each this.weekdaysNames as |wdn|}}
-      <div class="ember-power-calendar-weekday">{{wdn}}</div>
+      <div
+        class="ember-power-calendar-weekday"
+        role="columnheader"
+      >{{wdn}}</div>
     {{/each}}
   </div>
   <div
     class="ember-power-calendar-day-grid"
+    role="rowgroup"
     {{on "keydown" this.handleKeyDown}}
   >
     {{#each this.weeks key="id" as |week|}}
       <div
         class="ember-power-calendar-row ember-power-calendar-week"
+        role="row"
         data-missing-days={{week.missingDays}}
       >
         {{#each week.days key="id" as |day|}}
           <button
             type="button"
+            role="gridcell"
             data-date="{{day.id}}"
             class={{ember-power-calendar-day-classes
               day
@@ -32,6 +44,8 @@
             {{on "focus" this.handleDayFocus}}
             {{on "blur" this.handleDayBlur}}
             disabled={{day.isDisabled}}
+            tabindex={{if day.isFocused "0" "-1"}}
+            aria-selected={{if day.isSelected "true"}}
           >
             {{#if (has-block)}}
               {{yield day @calendar this.weeks}}

ember-power-calendar/src/components/power-calendar-multiple/days.ts

@@ -5,6 +5,7 @@ import { scheduleOnce } from '@ember/runloop';
 import service from '../../-private/service.ts';
 import {
   add,
+  formatDate,
   getWeekdays,
   getWeekdaysMin,
   getWeekdaysShort,
@@ -35,9 +36,11 @@ import type {
   PowerCalendarDaysArgs,
   PowerCalendarDaysSignature,
 } from '../power-calendar/days.ts';
+import { modifier } from 'ember-modifier';
 
 interface PowerCalendarMultipleDaysArgs
-  extends Omit<PowerCalendarDaysArgs, 'selected'> {
+  extends Omit<PowerCalendarDaysArgs, 'calendar' | 'selected'> {
+  calendar: PowerCalendarMultipleAPI;
   selected?: Date[];
   maxLength?: number;
 }
@@ -52,6 +55,8 @@ export default class PowerCalendarMultipleDaysComponent extends Component<PowerC
 
   @tracked focusedId: string | null = null;
 
+  didSetup = false;
+
   get weekdayFormat(): TWeekdayFormat {
     return this.args.weekdayFormat || 'short'; // "min" | "short" | "long"
   }
@@ -151,11 +156,48 @@ export default class PowerCalendarMultipleDaysComponent extends Component<PowerC
   }
 
   @action
-  handleKeyDown(e: KeyboardEvent): void {
+  async handleKeyDown(e: KeyboardEvent): Promise<void> {
     const day = handleDayKeyDown(e, this.focusedId, this.days);
+
+    if (!day || !day?.isCurrentMonth) {
+      if (this.args.calendar.actions.moveCenter) {
+        if (
+          e.key === 'ArrowUp' ||
+          e.key === 'ArrowRight' ||
+          e.key === 'ArrowDown' ||
+          e.key === 'ArrowLeft'
+        ) {
+          const currentDay = this.days.find(
+            (x) => x.id === this.focusedId,
+          )?.date;
+
+          if (currentDay) {
+            let date = currentDay;
+            let step = 1;
+            if (e.key === 'ArrowUp') {
+              date = add(currentDay, -7, 'day');
+              step = -1;
+            } else if (e.key === 'ArrowLeft') {
+              date = add(currentDay, -1, 'day');
+              step = -1;
+            } else if (e.key === 'ArrowRight') {
+              date = add(currentDay, 1, 'day');
+            } else if (e.key === 'ArrowDown') {
+              date = add(currentDay, 7, 'day');
+            }
+
+            await this.focusDay(e, date, step);
+
+            return;
+          }
+        }
+      }
+    }
+
     if (!day) {
       return;
     }
+
     this.focusedId = day.id;
     scheduleOnce(
       'afterRender',
@@ -171,6 +213,82 @@ export default class PowerCalendarMultipleDaysComponent extends Component<PowerC
     handleClick(e, this.days, this.args.calendar);
   }
 
+  setup = modifier(
+    () => {
+      if (this.didSetup) {
+        return;
+      }
+
+      this.didSetup = true;
+
+      if (this.args.autofocus) {
+        scheduleOnce('afterRender', this, this.initialFocus.bind(this));
+      }
+    },
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    { eager: false },
+  );
+
+  initialFocus() {
+    const activeDay = this.days.find((x) => x.isSelected && !x.isDisabled);
+
+    if (activeDay) {
+      this.focusedId = activeDay.id;
+    } else {
+      const todayDay = this.days.find((x) => x.isToday && !x.isDisabled);
+      if (todayDay) {
+        this.focusedId = todayDay.id ?? '';
+      } else {
+        const firstSelectableDay = this.days.find((x) => !x.isDisabled);
+        if (firstSelectableDay) {
+          this.focusedId = firstSelectableDay.id ?? '';
+        } else {
+          this.focusedId = this.days.find((x) => !x.isCurrentMonth)?.id ?? '';
+        }
+      }
+    }
+
+    focusDate(this.args.calendar.uniqueId, this.focusedId ?? '');
+  }
+
+  async focusDay(e: MouseEvent | KeyboardEvent, date: Date, step: number = 0) {
+    if (
+      dayIsDisabled(
+        date,
+        this.args.calendar,
+        this.args.minDate,
+        this.args.maxDate,
+        this.args.disabledDates,
+      )
+    ) {
+      return;
+    }
+
+    if (this.args.calendar.actions.moveCenter && step !== 0) {
+      await this.args.calendar.actions.moveCenter(
+        step,
+        'month',
+        this.args.calendar,
+        e,
+      );
+    }
+
+    this.focusedId = formatDate(date, 'YYYY-MM-DD');
+
+    if (step !== 0) {
+      scheduleOnce(
+        'afterRender',
+        this,
+        focusDate,
+        this.args.calendar.uniqueId,
+        this.focusedId ?? '',
+      );
+    } else {
+      focusDate(this.args.calendar.uniqueId, this.focusedId ?? '');
+    }
+  }
+
   // Methods
   dayIsSelected(date: Date, calendar: CalendarAPI = this.args.calendar) {
     const selected = (calendar as PowerCalendarMultipleAPI).selected || [];