STCOM-1395 Datepicker - update Calendar cursorDate when year is chang…

…ed (#2410)

Problem: When the year is changed, the cursorDate is not updated, so the
calendar days have no '[tabIndex=0]' day, which means that users cannot
navigate to the calendar days using the keyboard for selection. Tests
added.

CHANGELOG.md

@@ -16,6 +16,7 @@
 * Clear filter value after an action chosen from `MultiSelection` menu. Refs STCOM-1385.
 * ExportCSV - fix usage within `<Modal>`s by rendering the download link to the `div#OverlayContainer`. Refs STCOM-1387.
 * `<MenuSection>` should default its heading/label tag to `H3` instead of `H1`. Refs STCOM-1392.
+* `<Datepicker>` fix for `<Calendar>` tabIndex when changing the year. Refs STCOM-1395.
 * `<Tooltip>` should allow for tooltip content to be hovered without closing the tooltip. Refs STCOM-1391.
 * `<AdvancedSearchRow>` - change `aria-label` for the input box to enter a search query and the Boolean operator dropdown. Refs STCOM-1195.
 

lib/Datepicker/Calendar.js

@@ -374,10 +374,20 @@ class Calendar extends React.Component {
     if (e.target.value) {
       const year = e.target.value;
       if (new moment(year, 'YYYY', true).isValid()) { // eslint-disable-line new-cap
-        this.setState(curState => ({
+        this.setState(curState => {
+          let cursorDate = '';
+          if (year === this.selectedMoment?.year()) {
+            cursorDate = this.selectedMoment;
+          } else {
+            cursorDate = new moment().year(year).date(1).month(curState.month); // eslint-disable-line new-cap
+          }
+          return {
           year,
           calendar: getCalendar(year, curState.month, curState.dayOffset),
-        }));
+          cursorDate,
+        };
+      }
+      );
       }
     }
   }

lib/Datepicker/tests/Datepicker-test.js

@@ -53,6 +53,7 @@ describe('Datepicker', () => {
     .locator((el) => el.textContent)
     .filters({
       month: (el) => el.getAttribute('data-date').split('/')[0],
+      tabIndex: (el) => el.tabIndex,
     });
 
   describe('render', () => {
@@ -69,6 +70,31 @@ describe('Datepicker', () => {
     it('has a placeholder in the input', () => datepicker.has({ placeholder: 'MM/DD/YYYY' }));
   });
 
+  describe('calendar tabIndex', () => {
+    beforeEach(async () => {
+      await mountWithContext(
+        <Datepicker onChange={() => {}} />
+      );
+      await datepicker.openCalendar();
+    });
+
+    describe('changing the month', () => {
+      beforeEach(async () => {
+        await month.choose('June');
+      });
+
+      it('calendar days have a tabIndex 0 day', () => CalendarDays({ tabIndex: 0 }).exists());
+    });
+
+    describe('changing the year', () => {
+      beforeEach(async () => {
+        await calendar.setYear('2012');
+      });
+
+      it('calendar days have a tabIndex 0 day', () => CalendarDays({ tabIndex: 0 }).exists());
+    });
+  });
+
   describe('exclude functionality', () => {
     let changed;
     beforeEach(async () => {