@lion/ui 0.3.3 → 0.3.4

package/components/calendar/test/lion-calendar.test.js

@@ -396,7 +396,7 @@ describe('<lion-calendar>', () => {
         clock.restore();
       });
 
-      it('should set centralDate to the unique valid value when minDate and maxDate are equal', async () => {
+      it('requires the user to set an appropriate centralDate even when minDate and maxDate are equal', async () => {
         const clock = sinon.useFakeTimers({ now: new Date('2019/06/03').getTime() });
 
         const el = await fixture(html`
@@ -405,9 +405,18 @@ describe('<lion-calendar>', () => {
             .maxDate="${new Date('2019/07/03')}"
           ></lion-calendar>
         `);
-        expect(isSameDate(el.centralDate, new Date('2019/07/03')), 'central date').to.be.true;
+        const elSetting = await fixture(html`
+          <lion-calendar
+            .centralDate="${new Date('2019/07/03')}"
+            .minDate="${new Date('2019/07/03')}"
+            .maxDate="${new Date('2019/07/03')}"
+          ></lion-calendar>
+        `);
 
         clock.restore();
+        expect(isSameDate(el.centralDate, new Date('2019/06/03')), 'central date').to.be.true;
+        expect(isSameDate(elSetting.centralDate, new Date('2019/07/03')), 'central date').to.be
+          .true;
       });
 
       describe('Normalization', () => {
@@ -482,6 +491,98 @@ describe('<lion-calendar>', () => {
     });
 
     describe('Navigation', () => {
+      describe('finding enabled dates', () => {
+        it('has helper for `findNextEnabledDate()`, `findPreviousEnabledDate()`, `findNearestEnabledDate()`', async () => {
+          const el = await fixture(html`
+            <lion-calendar
+              .selectedDate="${new Date('2001/01/02')}"
+              .disableDates=${
+                /** @param {Date} date */ date => date.getDate() === 3 || date.getDate() === 4
+              }
+            ></lion-calendar>
+          `);
+          const elObj = new CalendarObject(el);
+
+          el.focusDate(el.findNextEnabledDate());
+          await el.updateComplete;
+          expect(elObj.focusedDayObj?.monthday).to.equal(5);
+
+          el.focusDate(el.findPreviousEnabledDate());
+          await el.updateComplete;
+          expect(elObj.focusedDayObj?.monthday).to.equal(2);
+
+          el.focusDate(el.findNearestEnabledDate());
+          await el.updateComplete;
+          expect(elObj.focusedDayObj?.monthday).to.equal(1);
+        });
+
+        it('future dates take precedence over past dates when "distance" between dates is equal', async () => {
+          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
+
+          const el = await fixture(html`
+            <lion-calendar
+              .disableDates="${/** @param {Date} d */ d => d.getDate() === 15}"
+            ></lion-calendar>
+          `);
+          el.focusDate(el.findNearestEnabledDate());
+          await el.updateComplete;
+
+          const elObj = new CalendarObject(el);
+          expect(elObj.centralDayObj?.monthday).to.equal(16);
+
+          clock.restore();
+        });
+
+        it('will search 750 days in the past', async () => {
+          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
+
+          const el = await fixture(html`
+            <lion-calendar
+              .disableDates="${/** @param {Date} d */ d => d.getFullYear() > 1998}"
+            ></lion-calendar>
+          `);
+          el.focusDate(el.findNearestEnabledDate());
+          await el.updateComplete;
+
+          expect(el.centralDate.getFullYear()).to.equal(1998);
+          expect(el.centralDate.getMonth()).to.equal(11);
+          expect(el.centralDate.getDate()).to.equal(31);
+
+          clock.restore();
+        });
+
+        it('will search 750 days in the future', async () => {
+          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
+
+          const el = await fixture(html`
+            <lion-calendar
+              .disableDates="${/** @param {Date} d */ d => d.getFullYear() < 2002}"
+            ></lion-calendar>
+          `);
+
+          el.focusDate(el.findNearestEnabledDate());
+          await el.updateComplete;
+
+          expect(el.centralDate.getFullYear()).to.equal(2002);
+          expect(el.centralDate.getMonth()).to.equal(0);
+          expect(el.centralDate.getDate()).to.equal(1);
+
+          clock.restore();
+        });
+
+        it('throws if no available date can be found within +/- 750 days', async () => {
+          const el = await fixture(html`
+            <lion-calendar
+              .disableDates="${/** @param {Date} d */ d => d.getFullYear() < 2002}"
+            ></lion-calendar>
+          `);
+
+          expect(() => {
+            el.findNextEnabledDate(new Date('1900/01/01'));
+          }).to.throw(Error, 'Could not find a selectable date within +/- 750 day for 1900/1/1');
+        });
+      });
+
       describe('Year', () => {
         it('has a button for navigation to previous year', async () => {
           const el = await fixture(
@@ -655,7 +756,7 @@ describe('<lion-calendar>', () => {
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('November');
           expect(elObj.activeYear).to.equal('2000');
-          expect(isSameDate(el.centralDate, new Date('2000/11/20'))).to.be.true;
+          expect(isSameDate(el.centralDate, new Date('2000/11/15'))).to.be.true;
 
           clock.restore();
         });
@@ -677,7 +778,7 @@ describe('<lion-calendar>', () => {
           await el.updateComplete;
           expect(elObj.activeMonth).to.equal('January');
           expect(elObj.activeYear).to.equal('2001');
-          expect(isSameDate(el.centralDate, new Date('2001/01/10'))).to.be.true;
+          expect(isSameDate(el.centralDate, new Date('2001/01/15'))).to.be.true;
 
           clock.restore();
         });
@@ -696,17 +797,21 @@ describe('<lion-calendar>', () => {
           expect(remote.activeMonth).to.equal('September');
           expect(remote.activeYear).to.equal('2019');
           expect(remote.centralDayObj?.el).dom.to.equal(`
-            <button
+            <div
               class="calendar__day-button"
+              aria-disabled="false"
+              role="button"
               tabindex="0"
-              aria-label="30 September 2019 Monday"
               aria-pressed="false"
               past=""
               current-month="">
               <span class="calendar__day-button__text">
                 30
               </span>
-            </button>
+              <span class="u-sr-only">
+                September 2019 Monday
+              </span>
+            </div>
           `);
         });
       });
@@ -801,7 +906,7 @@ describe('<lion-calendar>', () => {
         ).to.equal(true);
       });
 
-      it('adds "disabled" attribute to disabled dates', async () => {
+      it('adds aria-disabled="true" attribute to disabled dates', async () => {
         const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
 
         const el = await fixture(html`
@@ -815,7 +920,7 @@ describe('<lion-calendar>', () => {
         const elObj = new CalendarObject(el);
         expect(
           elObj.checkForAllDayObjs(
-            /** @param {DayObject} d */ d => d.el.hasAttribute('disabled'),
+            /** @param {DayObject} d */ d => d.el.getAttribute('aria-disabled') === 'true',
             [1, 2, 30, 31],
           ),
         ).to.equal(true);
@@ -972,7 +1077,7 @@ describe('<lion-calendar>', () => {
             expect(elObj.focusedDayObj?.monthday).to.equal(12 + 1);
           });
 
-          it('navigates (sets focus) to next selectable column item via [arrow right] key', async () => {
+          it('navigates (sets focus) to next column item via [arrow right] key', async () => {
             const el = await fixture(html`
               <lion-calendar
                 .selectedDate="${new Date('2001/01/02')}"
@@ -987,7 +1092,7 @@ describe('<lion-calendar>', () => {
               new KeyboardEvent('keydown', { key: 'ArrowRight' }),
             );
             await el.updateComplete;
-            expect(elObj.focusedDayObj?.monthday).to.equal(5);
+            expect(elObj.focusedDayObj?.monthday).to.equal(3);
           });
 
           it('navigates (sets focus) to next row via [arrow right] key if last item in row', async () => {
@@ -1108,77 +1213,6 @@ describe('<lion-calendar>', () => {
 
           clock.restore();
         });
-
-        it('is on day closest to today, if today (and surrounding dates) is/are disabled', async () => {
-          const el = await fixture(html`
-            <lion-calendar
-              .centralDate="${new Date('2000/12/15')}"
-              .disableDates="${/** @param {Date} d */ d => d.getDate() <= 16}"
-            ></lion-calendar>
-          `);
-          const elObj = new CalendarObject(el);
-          expect(elObj.centralDayObj?.monthday).to.equal(17);
-
-          el.disableDates = d => d.getDate() >= 12;
-          await el.updateComplete;
-          expect(elObj.centralDayObj?.monthday).to.equal(11);
-        });
-
-        it('future dates take precedence over past dates when "distance" between dates is equal', async () => {
-          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
-
-          const el = await fixture(html`
-            <lion-calendar
-              .disableDates="${/** @param {Date} d */ d => d.getDate() === 15}"
-            ></lion-calendar>
-          `);
-          const elObj = new CalendarObject(el);
-          expect(elObj.centralDayObj?.monthday).to.equal(16);
-
-          clock.restore();
-        });
-
-        it('will search 750 days in the past', async () => {
-          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
-
-          const el = await fixture(html`
-            <lion-calendar
-              .disableDates="${/** @param {Date} d */ d => d.getFullYear() > 1998}"
-            ></lion-calendar>
-          `);
-          expect(el.centralDate.getFullYear()).to.equal(1998);
-          expect(el.centralDate.getMonth()).to.equal(11);
-          expect(el.centralDate.getDate()).to.equal(31);
-
-          clock.restore();
-        });
-
-        it('will search 750 days in the future', async () => {
-          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
-
-          const el = await fixture(html`
-            <lion-calendar
-              .disableDates="${/** @param {Date} d */ d => d.getFullYear() < 2002}"
-            ></lion-calendar>
-          `);
-          expect(el.centralDate.getFullYear()).to.equal(2002);
-          expect(el.centralDate.getMonth()).to.equal(0);
-          expect(el.centralDate.getDate()).to.equal(1);
-
-          clock.restore();
-        });
-
-        it('throws if no available date can be found within +/- 750 days', async () => {
-          const el = await fixture(html`
-            <lion-calendar
-              .disableDates="${/** @param {Date} d */ d => d.getFullYear() < 2002}"
-            ></lion-calendar>
-          `);
-
-          expect(() => {
-            el.centralDate = new Date('1900/01/01');
-          }).to.throw(Error, 'Could not find a selectable date within +/- 750 day for 1900/1/1');
-        });
       });
 
       /**
@@ -1226,7 +1260,8 @@ describe('<lion-calendar>', () => {
 
       it('renders each day as a button inside a table cell', async () => {
         const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
-        const hasBtn = /** @param {DayObject} d */ d => d.el.tagName === 'BUTTON';
+        const hasBtn = /** @param {DayObject} d */ d =>
+          d.el.tagName === 'DIV' && d.el.getAttribute('role') === 'button';
         expect(elObj.checkForAllDayObjs(hasBtn)).to.equal(true);
       });
 
@@ -1301,31 +1336,6 @@ describe('<lion-calendar>', () => {
         expect(elObj.checkForAllDayObjs(hasAriaPressed, [12])).to.equal(true);
       });
 
-      // This implementation mentions "button" inbetween and doesn't mention table
-      // column and row. As an alternative, see Deque implementation below.
-      // it(`on focus on a day, the screen reader pronounces "day of the week", "day number"
-      //    and "month" (in this order)', async () => {
-      //   // implemented by labelelledby referencing row and column names
-      //   const el = await fixture('<lion-calendar></lion-calendar>');
-      // });
-
-      // Alternative: Deque implementation
-      it(`sets aria-label on button, that consists of
-        "{day number} {month name} {year} {weekday name}"`, async () => {
-        const elObj = new CalendarObject(
-          await fixture(html`
-            <lion-calendar .centralDate="${new Date('2000/11/12')}"></lion-calendar>
-          `),
-        );
-        expect(
-          elObj.checkForAllDayObjs(
-            /** @param {DayObject} d */ d =>
-              d.buttonEl.getAttribute('aria-label') ===
-              `${d.monthday} November 2000 ${d.weekdayNameLong}`,
-          ),
-        ).to.equal(true);
-      });
-
       /**
        * Not in scope:
        * - reads the new focused day on month navigation"

package/components/calendar/test/utils/dayTemplate.test.js

@@ -11,14 +11,18 @@ describe('dayTemplate', () => {
     const el = await fixture(dayTemplate(day, { weekdays }));
     expect(el).dom.to.equal(`
       <td role="gridcell" class="calendar__day-cell">
-        <button
-          class="calendar__day-button"
-          aria-label="19 April 2019 Friday"
+        <div
+          aria-disabled="false"
           aria-pressed="false"
+          role="button"
+          class="calendar__day-button"
           tabindex="-1"
         >
           <span class="calendar__day-button__text">19</span>
-        </button>
+          <span class="u-sr-only">
+            April 2019 Friday
+          </span>
+        </div>
       </td>
     `);
   });