Keyboard accessibility improvement #245 #260 #290

Author: shahabyazdi

README.md

@@ -621,28 +621,34 @@ export default function Example() {
         </tr>
         <tr>
           <td>mobileButtons</td>
-          <td style="text-align:center"> HTMLButtonElement[]</td>
+          <td style="text-align:center">HTMLButtonElement[]</td>
           <td style="text-align:center">[]</td>
           <td>DatePicker</td>
         </tr>
         <tr>
           <td>dateSeparator</td>
-          <td style="text-align:center"> string</td>
+          <td style="text-align:center">String</td>
           <td style="text-align:center">'~' in range mode, ',' in multiple mode</td>
           <td>DatePicker</td>
         </tr>
         <tr>
           <td>multipleRangeSeparator</td>
-          <td style="text-align:center"> string</td>
+          <td style="text-align:center">String</td>
           <td style="text-align:center">','</td>
           <td>DatePicker</td>
         </tr>
-         <tr>
+        <tr>
           <td>typingTimeout</td>
-          <td style="text-align:center"> string</td>
+          <td style="text-align:center">String</td>
           <td style="text-align:center">700</td>
           <td>DatePicker</td>
         </tr>
+        <tr>
+          <td>autoFocus</td>
+          <td style="text-align:center">Boolean</td>
+          <td style="text-align:center">false</td>
+          <td>Calendar</td>
+        </tr>
       </tbody>
     </table>
 

changelog.md

@@ -1,3 +1,7 @@
+# 4.5.0
+
+- Keyboard accessibility improvement [#290](https://github.com/shahabyazdi/react-multi-date-picker/issues/290), [#245](https://github.com/shahabyazdi/react-multi-date-picker/issues/245), [#260](https://github.com/shahabyazdi/react-multi-date-picker/issues/260)
+
 # 4.4.2
 
 - Added isOpen type to DatePickerRef [#246](https://github.com/shahabyazdi/react-multi-date-picker/issues/246)

index.d.ts

@@ -329,6 +329,7 @@ declare module "react-multi-date-picker" {
     formatYear?: (year: string, month: string) => string;
     highlightToday?: boolean;
     headerOrder?: Array<HeaderItem>;
+    autoFocus?: boolean;
   }
 
   export interface DatePickerProps {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-multi-date-picker",
-  "version": "4.4.2",
+  "version": "4.5.0",
   "description": "A simple React datepicker component for working with gregorian, persian, arabic and indian calendars with the ability to select the date by single, multiple, range and multiple range pickers.",
   "main": "./build/index.js",
   "types": "index.d.ts",

src/components/arrow/arrow.js

@@ -1,13 +1,14 @@
 import React from "react";
 
-export default function Arrow({ direction, onClick, disabled }) {
+export default function Arrow({ direction, onClick, disabled, onKeyDown }) {
   return (
     <button
       type="button"
       className={`rmdp-arrow-container ${direction} ${
         disabled ? "disabled" : ""
       }`}
       onClick={onClick}
+      onKeyDown={onKeyDown}
       aria-roledescription={`button to navigate ${direction.replace(
         "rmdp-",
         ""

src/components/calendar/calendar.css

@@ -73,6 +73,18 @@
   color: black;
 }
 
+.rmdp-calendar *:focus {
+  outline-color: #00539c;
+}
+
+.rmdp-day:not(.rmdp-range):focus {
+  border-radius: 50%;
+}
+
+.rmdp-ym .rmdp-day:not(.rmdp-range):focus {
+  border-radius: 15px;
+}
+
 .rmdp-week-day {
   cursor: default;
   color: var(--rmdp-primary);

src/components/calendar/calendar.js

@@ -17,6 +17,7 @@ import isArray from "../../shared/isArray";
 import check from "../../shared/check";
 import toLocaleDigits from "../../shared/toLocaleDigits";
 import isRTL from "../../shared/isRTL";
+import { findFocusable } from "../../shared/handleFocus";
 import "./calendar.css";
 
 function Calendar(
@@ -75,6 +76,7 @@ function Calendar(
     highlightToday = true,
     headerOrder = ["LEFT_BUTTON", "MONTH_YEAR", "RIGHT_BUTTON"],
     style = {},
+    autoFocus = false,
   },
   outerRef
 ) {
@@ -302,6 +304,14 @@ function Calendar(
     },
     { datePickerProps, DatePicker, ...calendarProps } = arguments[0];
 
+  useEffect(() => {
+    const { Calendar } = ref.current;
+
+    if (!Calendar) return;
+
+    findFocusable(Calendar, undefined, autoFocus && !DatePicker);
+  }, [autoFocus, state.today, DatePicker]);
+
   initPlugins();
 
   return state.today ? (

src/components/day_picker/day_picker.js

@@ -1,19 +1,16 @@
-import React, { useMemo, useRef } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import DateObject from "react-date-object";
 import WeekDays from "../week_days/week_days";
 import selectDate from "../../shared/selectDate";
 import isSameDate from "../../shared/isSameDate";
 import getRangeClass from "../../shared/getRangeClass";
 import getRangeHoverClass from "../../shared/getRangeHoverClass";
-import { useState } from "react";
+import handleFocus from "../../shared/handleFocus";
 
 const ariaLabelFormat = "dddd MMMM DD of YYYY";
 
-let timeout;
-
 export default function DayPicker({
   state,
-  setState,
   onChange,
   showOtherDays = false,
   mapDays,
@@ -44,11 +41,11 @@ export default function DayPicker({
       selectedDate,
       onlyMonthPicker,
       onlyYearPicker,
+      mustShowMonthPicker,
+      mustShowYearPicker,
     } = state,
     mustShowDayPicker = !onlyMonthPicker && !onlyYearPicker,
-    [dateHovered, setDateHovered] = useState(),
-    isDateSelected =
-      multiple || range ? selectedDate?.length > 0 : !!selectedDate;
+    [dateHovered, setDateHovered] = useState();
 
   ref.current.date = date;
 
@@ -80,6 +77,9 @@ export default function DayPicker({
         className={`rmdp-day-picker ${fullYear ? "rmdp-full-year" : ""}`}
         style={{ display: fullYear ? "grid" : "flex" }}
         onMouseLeave={() => rangeHover && setDateHovered()}
+        data-active={
+          mustShowDayPicker && !mustShowMonthPicker && !mustShowYearPicker
+        }
       >
         {months.map((weeks, monthIndex) => (
           <div
@@ -134,23 +134,20 @@ export default function DayPicker({
                     className = className.replace("sd", "");
                   }
 
-                  const hasTabIndex = isDateSelected
-                    ? parentClassName.includes("selected") ||
-                      parentClassName.includes("range")
-                    : parentClassName.includes("today");
-
                   return (
                     <div
                       key={i}
-                      tabIndex={hasTabIndex ? 0 : -1}
+                      tabIndex={-1}
                       aria-label={`Choose ${object.date.format(
                         ariaLabelFormat
                       )}`}
                       className={parentClassName}
                       onMouseEnter={() =>
                         rangeHover && setDateHovered(object.date)
                       }
-                      onKeyDown={(e) => handleKeyDown(e, object)}
+                      onKeyDown={(e) =>
+                        handleFocus(e, object, { format: ariaLabelFormat })
+                      }
                       onClick={() => {
                         if (!mustDisplayDay(object) || object.disabled) {
                           return;
@@ -304,49 +301,6 @@ export default function DayPicker({
 
     return allProps;
   }
-
-  function handleKeyDown(e, object) {
-    const { currentTarget, key, code } = e;
-    const numbers = { ArrowRight: 1, ArrowLeft: -1, ArrowUp: -7, ArrowDown: 7 };
-
-    if (code === "Space" || key === " ") {
-      e.preventDefault();
-      currentTarget.click();
-    } else if (Object.keys(numbers).includes(key)) {
-      e.preventDefault();
-
-      const number = numbers[key];
-      const date = new DateObject(object.date).add(number, "day");
-      const div = getNode(date);
-
-      focus(div);
-
-      function focus(node) {
-        if (!node) return next();
-
-        const classes = node.getAttribute("class");
-
-        if (!classes.includes("hidden") && !classes.includes("disabled")) {
-          node.focus();
-        } else {
-          next();
-        }
-      }
-
-      function next() {
-        setState({ ...state, date });
-        clearTimeout(timeout);
-
-        timeout = setTimeout(() => focus(getNode(date)), 100);
-      }
-    }
-  }
-
-  function getNode(date) {
-    return divRef.current.querySelector(
-      `[aria-label*='${date.format(ariaLabelFormat)}']`
-    );
-  }
 }
 
 function getMonths(date, showOtherDays, numberOfMonths, weekStartDayIndex) {