Improving accessibility

* Improving keyboard navigation. Now works with time picker too.
* Shorthand weekday names are now displayed as `abbr` tags, with full names as title.
* Using a colour with higher contrast for month navigation.
* Adding a WAI-ARIA compatible description.
* The text field now has `aria-live="polite"`, which should update screenreader users as soon as the value changes.
* The date picker popper now has the `aria-hidden` tag, making it invisible to screenreaders and assistive technologies, in order to make navigation more straightforward.

Detailed discussion at WordPress/gutenberg#1311

docs-site/style.css

@@ -190,15 +190,17 @@
   top: 10px;
   width: 0;
   padding: 0;
+  height: 10px;
   border: 0.45rem solid transparent;
   z-index: 1;
+  overflow: hidden;
 }
 .react-datepicker__navigation--previous {
   left: 10px;
-  border-right-color: #ccc;
+  border-right-color: #000;
 }
 .react-datepicker__navigation--previous:hover {
-  border-right-color: #b3b3b3;
+  border-right-color: #545454;
 }
 .react-datepicker__navigation--previous--disabled,
 .react-datepicker__navigation--previous--disabled:hover {
@@ -207,13 +209,13 @@
 }
 .react-datepicker__navigation--next {
   right: 10px;
-  border-left-color: #ccc;
+  border-left-color: #000;
 }
 .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
   right: 80px;
 }
 .react-datepicker__navigation--next:hover {
-  border-left-color: #b3b3b3;
+  border-left-color: #545454;
 }
 .react-datepicker__navigation--next--disabled,
 .react-datepicker__navigation--next--disabled:hover {
@@ -431,6 +433,9 @@
   position: relative;
   display: inline-block;
 }
+.react-datepicker__input-container .keyboard-nav-description {
+  display: none;
+}
 
 .react-datepicker__year-read-view,
 .react-datepicker__month-read-view,
@@ -620,10 +625,10 @@
   border: 0.81rem solid transparent;
 }
 .react-datepicker__portal .react-datepicker__navigation--previous {
-  border-right-color: #ccc;
+  border-right-color: #000;
 }
 .react-datepicker__portal .react-datepicker__navigation--previous:hover {
-  border-right-color: #b3b3b3;
+  border-right-color: #1a1a1a;
 }
 .react-datepicker__portal .react-datepicker__navigation--previous--disabled,
 .react-datepicker__portal
@@ -632,10 +637,10 @@
   cursor: default;
 }
 .react-datepicker__portal .react-datepicker__navigation--next {
-  border-left-color: #ccc;
+  border-left-color: #000;
 }
 .react-datepicker__portal .react-datepicker__navigation--next:hover {
-  border-left-color: #b3b3b3;
+  border-left-color: #1a1a1a;
 }
 .react-datepicker__portal .react-datepicker__navigation--next--disabled,
 .react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {

src/calendar.jsx

@@ -31,7 +31,8 @@ import {
   allDaysDisabledBefore,
   allDaysDisabledAfter,
   getEffectiveMinDate,
-  getEffectiveMaxDate
+  getEffectiveMaxDate,
+  getWeedayLongInLocale
 } from "./date_utils";
 
 const DROPDOWN_FOCUS_CLASSNAMES = [
@@ -117,7 +118,9 @@ export default class Calendar extends React.Component {
       onDropdownFocus: () => {},
       monthsShown: 1,
       forceShowMonthNavigation: false,
-      timeCaption: "Time"
+      timeCaption: "Time",
+      navigationNextText: "Next month",
+      navigationPreviousText: "Previous month"
     };
   }
 
@@ -284,10 +287,11 @@ export default class Calendar extends React.Component {
         const day = addDays(cloneDate(startOfWeek), offset);
         const localeData = getLocaleData(day);
         const weekDayName = this.formatWeekday(localeData, day);
+        const weekDayNameLong = getWeedayLongInLocale(localeData, day);
 
         return (
           <div key={offset} className="react-datepicker__day-name">
-            {weekDayName}
+            <abbr title={weekDayNameLong}>{weekDayName}</abbr>
           </div>
         );
       })
@@ -340,7 +344,9 @@ export default class Calendar extends React.Component {
         type="button"
         className={classes.join(" ")}
         onClick={clickHandler}
-      />
+      >
+        {this.props.navigationPreviousText}
+      </button>
     );
   };
 
@@ -383,7 +389,9 @@ export default class Calendar extends React.Component {
         type="button"
         className={classes.join(" ")}
         onClick={clickHandler}
-      />
+      >
+        {this.props.navigationNextText}
+      </button>
     );
   };
 

src/date_utils.js

@@ -197,6 +197,18 @@ export function addMinutes(date, amount) {
   return add(date, amount, "minutes");
 }
 
+export function increaseMinutes(date, interval) {
+  date = date.seconds(0);
+  var diff = intervalMinutesDiffInc(date, interval);
+  return addMinutes(date, diff);
+}
+
+export function decreaseMinutes(date, interval) {
+  date = date.seconds(0);
+  var diff = intervalMinutesDiffDec(date, interval);
+  return subtractMinutes(date, diff);
+}
+
 export function addHours(date, amount) {
   return add(date, amount, "hours");
 }
@@ -218,6 +230,14 @@ export function addYears(date, amount) {
 }
 
 // *** Subtraction ***
+export function subtractMinutes(date, amount) {
+  return subtract(date, amount, "minutes");
+}
+
+export function subtractHours(date, amount) {
+  return subtract(date, amount, "hours");
+}
+
 export function subtractDays(date, amount) {
   return subtract(date, amount, "days");
 }
@@ -301,6 +321,28 @@ export function getDaysDiff(date1, date2) {
   return getDiff(date1, date2, "days");
 }
 
+export function intervalMinutesDiffInc(date, interval) {
+  var minute = date.minute();
+  var newMinute = Math.ceil(date.minute() / interval) * interval;
+  var diff = Math.abs(newMinute - minute);
+
+  if (diff == 0) {
+    return interval;
+  }
+  return diff;
+}
+
+export function intervalMinutesDiffDec(date, interval) {
+  var minute = date.minute();
+  var newMinute = Math.floor(date.minute() / interval) * interval;
+  var diff = Math.abs(newMinute - minute);
+
+  if (diff == 0) {
+    return interval;
+  }
+  return diff;
+}
+
 // ** Date Localization **
 
 export function localizeDate(date, locale) {
@@ -339,6 +381,10 @@ export function getWeekdayShortInLocale(locale, date) {
   return locale.weekdaysShort(date);
 }
 
+export function getWeedayLongInLocale(locale, date) {
+  return moment.localeData().weekdays(date);
+}
+
 // TODO what is this format exactly?
 export function getMonthInLocale(locale, date, format) {
   return locale.months(date, format);