Merge pull request Hacker0x01#3086 from pedraja/fix/accessibility-year

Support keyboard navigation on Year picker.

Author: martijnrusschen

src/year.jsx

@@ -10,6 +10,7 @@ export default class Year extends React.Component {
     disabledKeyboardNavigation: PropTypes.bool,
     onDayClick: PropTypes.func,
     preSelection: PropTypes.instanceOf(Date),
+    setPreSelection: PropTypes.func,
     selected: PropTypes.object,
     inline: PropTypes.bool,
     maxDate: PropTypes.instanceOf(Date),
@@ -21,12 +22,42 @@ export default class Year extends React.Component {
     super(props);
   }
 
+  YEAR_REFS = [...Array(this.props.yearItemNumber)].map(() =>
+    React.createRef()
+  );
+
+  isDisabled = (date) => utils.isDayDisabled(date, this.props);
+
+  isExcluded = (date) => utils.isDayExcluded(date, this.props);
+
+  updateFocusOnPaginate = (refIndex) => {
+    const waitForReRender = function () {
+      this.YEAR_REFS[refIndex].current.focus();
+    }.bind(this);
+
+    window.requestAnimationFrame(waitForReRender);
+  };
+
   handleYearClick = (day, event) => {
     if (this.props.onDayClick) {
       this.props.onDayClick(day, event);
     }
   };
 
+  handleYearNavigation = (newYear, newDate) => {
+    const { date, yearItemNumber } = this.props;
+    const { startPeriod } = utils.getYearsPeriod(date, yearItemNumber);
+
+    if (this.isDisabled(newDate) || this.isExcluded(newDate)) return;
+    this.props.setPreSelection(newDate);
+
+    if (newYear - startPeriod === -1) {
+      this.updateFocusOnPaginate(yearItemNumber - 1);
+    } else if (newYear - startPeriod === yearItemNumber) {
+      this.updateFocusOnPaginate(0);
+    } else this.YEAR_REFS[newYear - startPeriod].current.focus();
+  };
+
   isSameDay = (y, other) => utils.isSameDay(y, other);
 
   isKeyboardSelected = (y) => {
@@ -44,6 +75,30 @@ export default class Year extends React.Component {
     this.handleYearClick(utils.getStartOfYear(utils.setYear(date, y)), e);
   };
 
+  onYearKeyDown = (e, y) => {
+    const { key } = e;
+    if (!this.props.disabledKeyboardNavigation) {
+      switch (key) {
+        case "Enter":
+          this.onYearClick(e, y);
+          this.props.setPreSelection(this.props.selected);
+          break;
+        case "ArrowRight":
+          this.handleYearNavigation(
+            y + 1,
+            utils.addYears(this.props.preSelection, 1)
+          );
+          break;
+        case "ArrowLeft":
+          this.handleYearNavigation(
+            y - 1,
+            utils.subYears(this.props.preSelection, 1)
+          );
+          break;
+      }
+    }
+  };
+
   getYearClassNames = (y) => {
     const { minDate, maxDate, selected } = this.props;
     return classnames("react-datepicker__year-text", {
@@ -56,6 +111,13 @@ export default class Year extends React.Component {
     });
   };
 
+  getYearTabIndex = (y) => {
+    if (this.props.disabledKeyboardNavigation) return "-1";
+    const preSelected = utils.getYear(this.props.preSelection);
+
+    return y === preSelected ? "0" : "-1";
+  };
+
   render() {
     const yearsList = [];
     const { date, yearItemNumber } = this.props;
@@ -67,16 +129,22 @@ export default class Year extends React.Component {
     for (let y = startPeriod; y <= endPeriod; y++) {
       yearsList.push(
         <div
+          ref={this.YEAR_REFS[y - startPeriod]}
           onClick={(ev) => {
             this.onYearClick(ev, y);
           }}
+          onKeyDown={(ev) => {
+            this.onYearKeyDown(ev, y);
+          }}
+          tabIndex={this.getYearTabIndex(y)}
           className={this.getYearClassNames(y)}
           key={y}
         >
           {y}
         </div>
       );
     }
+
     return (
       <div className="react-datepicker__year">
         <div className="react-datepicker__year-wrapper">{yearsList}</div>

test/year_picker_test.js

@@ -3,6 +3,7 @@ import { mount } from "enzyme";
 import DatePicker from "../src/index.jsx";
 import Year from "../src/year";
 import TestUtils from "react-dom/test-utils";
+import { create } from "react-test-renderer";
 import ReactDOM from "react-dom";
 import * as utils from "../src/date_utils";
 import Calendar from "../src/calendar";
@@ -166,4 +167,111 @@ describe("YearPicker", () => {
       expect(allPreselectedYears.length).to.equal(1);
     });
   });
+
+  describe("Keyboard navigation", () => {
+    let preSelected;
+    const setPreSelection = (preSelection) => {
+      preSelected = preSelection;
+    };
+
+    let selectedDay;
+    const onDayClick = (day) => {
+      selectedDay = day;
+    };
+
+    const getPicker = (initialDate, props) =>
+      TestUtils.renderIntoDocument(
+        <Year
+          selected={utils.newDate(initialDate)}
+          date={utils.newDate(initialDate)}
+          setPreSelection={setPreSelection}
+          preSelection={utils.newDate(initialDate)}
+          onDayClick={onDayClick}
+          yearItemNumber={12}
+          {...props}
+        />
+      );
+
+    const simulateLeft = (target) =>
+      TestUtils.Simulate.keyDown(target, {
+        key: "ArrowLeft",
+        keyCode: 37,
+        which: 37,
+      });
+    const simulateRight = (target) =>
+      TestUtils.Simulate.keyDown(target, {
+        key: "ArrowRight",
+        keyCode: 39,
+        which: 39,
+      });
+
+    it("should preSelect and set 2020 on left arrow press", () => {
+      const yearPicker = getPicker("2021-01-01");
+
+      const target = TestUtils.findRenderedDOMComponentWithClass(
+        yearPicker,
+        "react-datepicker__year-text--selected"
+      );
+      simulateLeft(target);
+
+      expect(utils.getYear(preSelected)).to.equal(2020);
+    });
+    it("should preSelect and set 2022 on left arrow press", () => {
+      const yearPicker = getPicker("2021-01-01");
+
+      const target = TestUtils.findRenderedDOMComponentWithClass(
+        yearPicker,
+        "react-datepicker__year-text--selected"
+      );
+      simulateRight(target);
+
+      expect(utils.getYear(preSelected)).to.equal(2022);
+    });
+    it("should paginate from 2017 to 2016", () => {
+      const yearPicker = getPicker("2017-01-01");
+
+      const target = TestUtils.findRenderedDOMComponentWithClass(
+        yearPicker,
+        "react-datepicker__year-text--selected"
+      );
+      simulateLeft(target);
+
+      expect(utils.getYear(preSelected)).to.equal(2016);
+    });
+    it("should paginate from 2028 to 2029", () => {
+      const yearPicker = getPicker("2028-01-01");
+
+      const target = TestUtils.findRenderedDOMComponentWithClass(
+        yearPicker,
+        "react-datepicker__year-text--selected"
+      );
+      simulateRight(target);
+
+      expect(utils.getYear(preSelected)).to.equal(2029);
+    });
+    it("should select 2021 when Enter key is pressed", () => {
+      const yearPicker = getPicker("2021-01-01");
+
+      const target = TestUtils.findRenderedDOMComponentWithClass(
+        yearPicker,
+        "react-datepicker__year-text--selected"
+      );
+
+      TestUtils.Simulate.keyDown(target, { key: "Enter", code: 13, which: 13 });
+      expect(utils.getYear(selectedDay)).to.equal(2021);
+    });
+    it("should disable keyboard navigation", () => {
+      const yearPicker = getPicker("2021-01-01", {
+        disabledKeyboardNavigation: true,
+      });
+
+      const target = TestUtils.findRenderedDOMComponentWithClass(
+        yearPicker,
+        "react-datepicker__year-text--selected"
+      );
+      simulateRight(target);
+
+      expect(utils.getYear(preSelected)).to.equal(2021);
+    });
+  });
 });