feat: improve a11y (#27)

* feat: improve a11y * fix: adapt tests to new behavior
Sqrrl · Aug 26, 2024 · 0f16c9a · 0f16c9a
1 parent d34d2b0
commit 0f16c9a
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 38 deletions.
diff --git a/src/components/wc-datepicker/wc-datepicker.spec.tsx b/src/components/wc-datepicker/wc-datepicker.spec.tsx
@@ -309,11 +309,6 @@ describe('wc-datepicker', () => {
     const monthSelect = page.root.querySelector<HTMLSelectElement>(
       '.wc-datepicker__month-select'
     );
-
-    const header = page.root.querySelector<HTMLElement>(
-      '.wc-datepicker__header'
-    );
-
     const previousMonthButton = page.root.querySelector<HTMLButtonElement>(
       '.wc-datepicker__previous-month-button'
     );
@@ -322,26 +317,21 @@ describe('wc-datepicker', () => {
       '.wc-datepicker__next-month-button'
     );
 
-    expect(header.innerText.startsWith('January')).toBeTruthy();
-
     monthSelect.value = '5';
     monthSelect.dispatchEvent(new Event('change'));
 
     await page.waitForChanges();
 
-    expect(header.innerText.startsWith('May')).toBeTruthy();
     expect(spy.mock.calls[0][0].detail).toEqual({ month: 5, year: 2022 });
 
     previousMonthButton.click();
     await page.waitForChanges();
 
-    expect(header.innerText.startsWith('April')).toBeTruthy();
     expect(spy.mock.calls[1][0].detail).toEqual({ month: 4, year: 2022 });
 
     nextMonthButton.click();
     await page.waitForChanges();
 
-    expect(header.innerText.startsWith('May')).toBeTruthy();
     expect(spy.mock.calls[2][0].detail).toEqual({ month: 5, year: 2022 });
   });
 
@@ -359,10 +349,6 @@ describe('wc-datepicker', () => {
       '.wc-datepicker__year-select'
     );
 
-    const header = page.root.querySelector<HTMLElement>(
-      '.wc-datepicker__header'
-    );
-
     const previousYearButton = page.root.querySelector<HTMLButtonElement>(
       '.wc-datepicker__previous-year-button'
     );
@@ -371,26 +357,25 @@ describe('wc-datepicker', () => {
       '.wc-datepicker__next-year-button'
     );
 
-    expect(header.innerText.includes('2022')).toBeTruthy();
+    expect(yearSelect.value).toEqual('2022');
 
     yearSelect.value = '1989';
     yearSelect.dispatchEvent(new Event('change'));
 
     await page.waitForChanges();
 
-    expect(header.innerText.includes('1989')).toBeTruthy();
     expect(spy.mock.calls[0][0].detail).toEqual({ month: 1, year: 1989 });
 
     previousYearButton.click();
     await page.waitForChanges();
 
-    expect(header.innerText.includes('1988')).toBeTruthy();
+    expect(yearSelect.value).toEqual('1988');
     expect(spy.mock.calls[1][0].detail).toEqual({ month: 1, year: 1988 });
 
     nextYearButton.click();
     await page.waitForChanges();
 
-    expect(header.innerText.includes('1989')).toBeTruthy();
+    expect(yearSelect.value).toEqual('1989');
     expect(spy.mock.calls[2][0].detail).toEqual({ month: 1, year: 1989 });
   });
 
@@ -405,26 +390,18 @@ describe('wc-datepicker', () => {
       '.wc-datepicker__today-button'
     );
 
-    const header = page.root.querySelector<HTMLElement>(
-      '.wc-datepicker__header'
-    );
-
     const today = new Date();
 
-    expect(header.innerText.includes('January 1, 1989')).toBeTruthy();
+    const yearSelect = page.root.querySelector<HTMLInputElement>(
+      '.wc-datepicker__year-select'
+    );
+
+    expect(yearSelect.value).toEqual('1989');
 
     todayButton.click();
     await page.waitForChanges();
 
-    expect(
-      header.innerText.includes(
-        Intl.DateTimeFormat('en-US', {
-          day: 'numeric',
-          month: 'long',
-          year: 'numeric'
-        }).format(today)
-      )
-    ).toBeTruthy();
+    expect(yearSelect.value).toEqual(today.getFullYear().toString());
   });
 
   it('clears its value', async () => {

diff --git a/src/components/wc-datepicker/wc-datepicker.tsx b/src/components/wc-datepicker/wc-datepicker.tsx
@@ -185,15 +185,36 @@ export class WCDatepicker {
   }
 
   private getTitle() {
-    if (!Boolean(this.currentDate)) {
+    if (!Boolean(this.value)) {
       return;
     }
 
-    return Intl.DateTimeFormat(this.locale, {
-      day: 'numeric',
-      month: 'long',
-      year: 'numeric'
-    }).format(this.currentDate);
+    if (this.isRangeValue(this.value)) {
+      const startDate = Intl.DateTimeFormat(this.locale, {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric'
+      }).format(this.value[0]);
+      const endDate = this.value[1]
+        ? Intl.DateTimeFormat(this.locale, {
+            day: 'numeric',
+            month: 'long',
+            year: 'numeric'
+          }).format(this.value[1])
+        : undefined;
+
+      if (Boolean(endDate)) {
+        return `${startDate} - ${endDate}`;
+      } else {
+        return startDate;
+      }
+    } else {
+      return Intl.DateTimeFormat(this.locale, {
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric'
+      }).format(this.value);
+    }
   }
 
   private focusDate(date: Date) {
@@ -471,6 +492,7 @@ export class WCDatepicker {
             )}
             <span class={this.getClassName('current-month')}>
               <select
+                title={this.labels.monthSelect}
                 aria-label={this.labels.monthSelect}
                 class={this.getClassName('month-select')}
                 disabled={this.disabled}
@@ -488,6 +510,7 @@ export class WCDatepicker {
                 ))}
               </select>
               <input
+                title={this.labels.yearSelect}
                 aria-label={this.labels.yearSelect}
                 class={this.getClassName('year-select')}
                 disabled={this.disabled}
@@ -559,6 +582,7 @@ export class WCDatepicker {
                 <tr class={this.getClassName('weekday-row')}>
                   {this.weekdays.map((weekday) => (
                     <th
+                      aria-label={weekday[1]}
                       abbr={weekday[1]}
                       class={this.getClassName('weekday')}
                       key={weekday[0]}