chore(#433): more tests & remove as much logic as possible form template

packages/calendar/src/LionCalendar.js

@@ -321,7 +321,8 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
   }
 
   __renderNextButton(nextMonth, nextYear) {
-    const nextButtonTitle = `Next Month, ${nextMonth} ${nextYear}`;
+    const nextButtonTitle = `${this.msgLit('lion-calendar:nextMonth')}, ${nextMonth} ${nextYear}`;
+
     return html`
       <button
         class="calendar__next-month-button"
@@ -347,6 +348,9 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     day.today = isSameDate(day.date, today);
     day.future = day.date > today;
     day.disabled = this.disableDates(day.date);
+    day.tabindex = day.central ? '0' : '-1';
+    day.ariaPressed = day.selected ? 'true' : 'false';
+    day.ariaCurrent = day.today ? 'date' : undefined;
 
     if (this.minDate && normalizeDateTime(day.date) < normalizeDateTime(this.minDate)) {
       day.disabled = true;

packages/calendar/src/utils/createDay.js

@@ -25,5 +25,8 @@ export function createDay(
     past,
     today,
     future,
+    tabindex: '-1',
+    ariaPressed: 'false',
+    ariaCurrent: undefined,
   };
 }

packages/calendar/src/utils/dayTemplate.js

@@ -26,10 +26,10 @@ export function dayTemplate(day, { weekdays, monthsLabels = defaultMonthLabels }
       <button
         .date=${day.date}
         class="calendar__day-button"
-        tabindex=${day.central ? '0' : '-1'}
+        tabindex=${day.tabindex}
         aria-label=${`${dayNumber} ${monthName} ${year} ${weekdayName}`}
-        aria-pressed=${day.selected ? 'true' : 'false'}
-        aria-current=${ifDefined(day.today ? 'date' : undefined)}
+        aria-pressed=${day.ariaPressed}
+        aria-current=${ifDefined(day.ariaCurrent)}
         ?disabled=${day.disabled}
         ?selected=${day.selected}
         ?past=${day.past}

packages/calendar/test/lion-calendar.test.js

@@ -72,7 +72,7 @@ describe('<lion-calendar>', () => {
         `,
       );
       expect(el.shadowRoot.querySelector('.calendar__next-month-button')).dom.to.equal(`
-        <button class="calendar__next-month-button" aria-label="Next Month, December 2019" title="Next Month, December 2019">&gt;</button>
+        <button class="calendar__next-month-button" aria-label="Next month, December 2019" title="Next month, December 2019">&gt;</button>
       `);
     });
   });
@@ -588,10 +588,10 @@ describe('<lion-calendar>', () => {
             'Previous month, November 2000',
           );
           expect(elObj.nextMonthButtonEl.getAttribute('title')).to.equal(
-            'Next Month, January 2001',
+            'Next month, January 2001',
           );
           expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal(
-            'Next Month, January 2001',
+            'Next month, January 2001',
           );
         });
       });
@@ -1186,21 +1186,62 @@ describe('<lion-calendar>', () => {
 
       const elObj = new CalendarObject(el);
       expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal(
-        'Next Month, December 2019',
+        'Next month, December 2019',
       );
 
+      expect(elObj.previousMonthButtonEl.getAttribute('aria-label')).to.equal(
+        'Previous month, October 2019',
+      );
+
+      expect(elObj.weekdayHeaderEls.map(h => h.getAttribute('aria-label'))).to.eql([
+        'Sunday',
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday',
+      ]);
+
+      expect(elObj.weekdayHeaderEls.map(h => h.textContent.trim())).to.deep.equal([
+        'Sun',
+        'Mon',
+        'Tue',
+        'Wed',
+        'Thu',
+        'Fri',
+        'Sat',
+      ]);
+
       localize.locale = 'nl-NL';
       await el.updateComplete;
       expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal(
-        'Next Month, december 2019',
+        'Volgende maand, december 2019',
       );
 
-      /**
-       * TODO: add more tests, e.g. for:
-       * - weekdays
-       * - weekday abbreviations
-       * - month names
-       */
+      expect(elObj.previousMonthButtonEl.getAttribute('aria-label')).to.equal(
+        'Vorige maand, oktober 2019',
+      );
+
+      expect(elObj.weekdayHeaderEls.map(h => h.getAttribute('aria-label'))).to.eql([
+        'zondag',
+        'maandag',
+        'dinsdag',
+        'woensdag',
+        'donderdag',
+        'vrijdag',
+        'zaterdag',
+      ]);
+
+      expect(elObj.weekdayHeaderEls.map(h => h.textContent.trim())).to.deep.equal([
+        'zo',
+        'ma',
+        'di',
+        'wo',
+        'do',
+        'vr',
+        'za',
+      ]);
     });
   });
 

packages/calendar/test/utils/dayTemplate.test.js

@@ -16,9 +16,9 @@ describe('dayTemplate', () => {
       <td role="gridcell" class="calendar__day-cell">
         <button
           class="calendar__day-button"
-          tabindex="-1"
           aria-label="19 April 2019 Friday"
           aria-pressed="false"
+          tabindex="-1"
         >
           19
         </button>