From 5446a0bbadf37888e26b10865170fd280488474f Mon Sep 17 00:00:00 2001
From: Jeff Personal <jeffbirori@gmail.com>
Date: Thu, 12 Sep 2019 10:33:50 -0700
Subject: [PATCH] fix(DatePicker): Make date picker accessible

---
 react/src/lib/DatePicker/DatePickerCalendar/index.js | 5 ++---
 react/src/lib/DatePicker/DatePickerDay/index.js      | 6 ++++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/react/src/lib/DatePicker/DatePickerCalendar/index.js b/react/src/lib/DatePicker/DatePickerCalendar/index.js
index 9fb5823250..b216f48e68 100644
--- a/react/src/lib/DatePicker/DatePickerCalendar/index.js
+++ b/react/src/lib/DatePicker/DatePickerCalendar/index.js
@@ -87,7 +87,7 @@ class DatePickerCalendar extends React.Component {
       const allPrevDaysDisabled = shouldPrevMonthDisable(date, minDate);
       return (
         <Icon
-          ariaLabel={previousArialLabel}
+          ariaLabel={`${previousArialLabel} month, ${subtractMonths(date.clone(), 1).format("MMMM")}`}
           disabled={allPrevDaysDisabled}
           onClick={this.decreaseMonth}
           name='arrow-left_16'
@@ -98,10 +98,9 @@ class DatePickerCalendar extends React.Component {
     const renderNextMonthButton = () => {
       const { maxDate } = this.props;
       const allNextDaysDisabled = shouldNextMonthDisable(date, maxDate);
-
       return (
         <Icon
-          ariaLabel={nextArialLabel}
+          ariaLabel={`${nextArialLabel} month, ${addMonths(date.clone(), 1).format("MMMM")}`}
           disabled={allNextDaysDisabled}
           onClick={this.increaseMonth}
           name='arrow-right_16'
diff --git a/react/src/lib/DatePicker/DatePickerDay/index.js b/react/src/lib/DatePicker/DatePickerDay/index.js
index 677a2730c6..5bcb59c241 100644
--- a/react/src/lib/DatePicker/DatePickerDay/index.js
+++ b/react/src/lib/DatePicker/DatePickerDay/index.js
@@ -45,11 +45,13 @@ class DatePickerDay extends React.Component {
           `${(isOutsideMonth && ` md-datepicker__day--outside-month`) || ''}`
         }
         onClick={this.handleClick}
-        ariaLabel={`${getDate(day)}`}
+        ariaLabel={`${day.format("dddd, MMMM Do YYYY")}`}
         aria-selected={isSelected}
         tabIndex={-1}
       >
-        {getDate(day)}
+        <div aria-label={day.format("dddd, MMMM Do YYYY")}>
+          {getDate(day)}
+        </div>
       </Button>
     );
   }