From ef2336c6500c624ca080c8e6090708f77635d77b Mon Sep 17 00:00:00 2001
From: John Coburn <jcoburn@ebsco.com>
Date: Tue, 7 Jan 2025 15:59:35 -0600
Subject: [PATCH] STCOM-1395 Datepicker - update Calendar cursorDate when year
 is changed (#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                            |  1 +
 lib/Datepicker/Calendar.js              | 14 +++++++++++--
 lib/Datepicker/tests/Datepicker-test.js | 26 +++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3caacedad..3db7236b7 100644
--- a/CHANGELOG.md
+++ b/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.
 
diff --git a/lib/Datepicker/Calendar.js b/lib/Datepicker/Calendar.js
index e013d392d..720369962 100644
--- a/lib/Datepicker/Calendar.js
+++ b/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,
+        };
+      }
+      );
       }
     }
   }
diff --git a/lib/Datepicker/tests/Datepicker-test.js b/lib/Datepicker/tests/Datepicker-test.js
index b4bd12878..0bbde5ce6 100644
--- a/lib/Datepicker/tests/Datepicker-test.js
+++ b/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 () => {