From b6ec5a8cb550b207d72846ca79a220187b9ea5d2 Mon Sep 17 00:00:00 2001
From: Ovidiu <oleaovidiu94@gmail.com>
Date: Thu, 5 Dec 2019 16:17:26 +0200
Subject: [PATCH] fix(catalog): add info for next/previous month on to the
 buttons (#384)

---
 packages/calendar/src/LionCalendar.js        | 45 ++++++++++++++------
 packages/calendar/test/lion-calendar.test.js | 32 +++++++++-----
 2 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/packages/calendar/src/LionCalendar.js b/packages/calendar/src/LionCalendar.js
index 56294c666..4028f1f5a 100644
--- a/packages/calendar/src/LionCalendar.js
+++ b/packages/calendar/src/LionCalendar.js
@@ -257,18 +257,30 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
   __renderHeader() {
     const month = getMonthNames({ locale: this.__getLocale() })[this.centralDate.getMonth()];
     const year = this.centralDate.getFullYear();
+    const nextMonth =
+      this.centralDate.getMonth() === 11
+        ? getMonthNames({ locale: this.__getLocale() })[0]
+        : getMonthNames({ locale: this.__getLocale() })[this.centralDate.getMonth() + 1];
+    const previousMonth =
+      this.centralDate.getMonth() === 0
+        ? getMonthNames({ locale: this.__getLocale() })[11]
+        : getMonthNames({ locale: this.__getLocale() })[this.centralDate.getMonth() - 1];
+    const nextYear =
+      this.centralDate.getMonth() === 11
+        ? this.centralDate.getFullYear() + 1
+        : this.centralDate.getFullYear();
+    const previousYear =
+      this.centralDate.getMonth() === 0
+        ? this.centralDate.getFullYear() - 1
+        : this.centralDate.getFullYear();
+
     return html`
       <div class="calendar__header">
-        ${this.__renderPreviousButton()}
-        <h2
-          class="calendar__month-heading"
-          id="month_and_year"
-          aria-live="polite"
-          aria-atomic="true"
-        >
+        ${this.__renderPreviousButton(previousMonth, previousYear)}
+        <h2 class="calendar__month-heading" id="month_and_year" aria-atomic="true">
           ${month} ${year}
         </h2>
-        ${this.__renderNextButton()}
+        ${this.__renderNextButton(nextMonth, nextYear)}
       </div>
     `;
   }
@@ -290,12 +302,16 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     });
   }
 
-  __renderPreviousButton() {
+  __renderPreviousButton(previousMonth, previousYear) {
+    const previousButtonTitle = `${this.msgLit(
+      'lion-calendar:previousMonth',
+    )}, ${previousMonth} ${previousYear}`;
+
     return html`
       <button
         class="calendar__previous-month-button"
-        aria-label=${this.msgLit('lion-calendar:previousMonth')}
-        title=${this.msgLit('lion-calendar:previousMonth')}
+        aria-label=${previousButtonTitle}
+        title=${previousButtonTitle}
         @click=${this.goToPreviousMonth}
         ?disabled=${this.isPreviousMonthDisabled}
       >
@@ -304,12 +320,13 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     `;
   }
 
-  __renderNextButton() {
+  __renderNextButton(nextMonth, nextYear) {
+    const nextButtonTitle = `Next Month, ${nextMonth} ${nextYear}`;
     return html`
       <button
         class="calendar__next-month-button"
-        aria-label=${this.msgLit('lion-calendar:nextMonth')}
-        title=${this.msgLit('lion-calendar:nextMonth')}
+        aria-label=${nextButtonTitle}
+        title=${nextButtonTitle}
         @click=${this.goToNextMonth}
         ?disabled=${this.isNextMonthDisabled}
       >
diff --git a/packages/calendar/test/lion-calendar.test.js b/packages/calendar/test/lion-calendar.test.js
index 0e5018c69..c1da5e73a 100644
--- a/packages/calendar/test/lion-calendar.test.js
+++ b/packages/calendar/test/lion-calendar.test.js
@@ -45,7 +45,6 @@ describe('<lion-calendar>', () => {
         <h2
           id="month_and_year"
           class="calendar__month-heading"
-          aria-live="polite"
           aria-atomic="true"
         >
           December 2000
@@ -62,7 +61,7 @@ describe('<lion-calendar>', () => {
         `,
       );
       expect(el.shadowRoot.querySelector('.calendar__previous-month-button')).dom.to.equal(`
-        <button class="calendar__previous-month-button" aria-label="Previous month" title="Previous month">&lt;</button>
+        <button class="calendar__previous-month-button" aria-label="Previous month, October 2019" title="Previous month, October 2019">&lt;</button>
       `);
     });
 
@@ -73,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" title="Next month">&gt;</button>
+        <button class="calendar__next-month-button" aria-label="Next Month, December 2019" title="Next Month, December 2019">&gt;</button>
       `);
     });
   });
@@ -428,7 +427,7 @@ describe('<lion-calendar>', () => {
       });
 
       describe('Accessibility', () => {
-        it('has aria-live="polite" and aria-atomic="true" set on the secondary title', async () => {
+        it('has aria-atomic="true" set on the secondary title', async () => {
           const elObj = new CalendarObject(
             await fixture(
               html`
@@ -436,7 +435,6 @@ describe('<lion-calendar>', () => {
               `,
             ),
           );
-          expect(elObj.monthHeadingEl.getAttribute('aria-live')).to.equal('polite');
           expect(elObj.monthHeadingEl.getAttribute('aria-atomic')).to.equal('true');
         });
       });
@@ -583,10 +581,18 @@ describe('<lion-calendar>', () => {
             <lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>
           `);
           const elObj = new CalendarObject(el);
-          expect(elObj.previousMonthButtonEl.getAttribute('title')).to.equal('Previous month');
-          expect(elObj.previousMonthButtonEl.getAttribute('aria-label')).to.equal('Previous month');
-          expect(elObj.nextMonthButtonEl.getAttribute('title')).to.equal('Next month');
-          expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal('Next month');
+          expect(elObj.previousMonthButtonEl.getAttribute('title')).to.equal(
+            'Previous month, November 2000',
+          );
+          expect(elObj.previousMonthButtonEl.getAttribute('aria-label')).to.equal(
+            'Previous month, November 2000',
+          );
+          expect(elObj.nextMonthButtonEl.getAttribute('title')).to.equal(
+            'Next Month, January 2001',
+          );
+          expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal(
+            'Next Month, January 2001',
+          );
         });
       });
     });
@@ -1179,11 +1185,15 @@ describe('<lion-calendar>', () => {
       `);
 
       const elObj = new CalendarObject(el);
-      expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal('Next month');
+      expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal(
+        'Next Month, December 2019',
+      );
 
       localize.locale = 'nl-NL';
       await el.updateComplete;
-      expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal('Volgende maand');
+      expect(elObj.nextMonthButtonEl.getAttribute('aria-label')).to.equal(
+        'Next Month, december 2019',
+      );
 
       /**
        * TODO: add more tests, e.g. for: