fix(DatePicker): Make date picker accessible

momentum-design · Sep 16, 2019 · 5446a0b · 5446a0b
1 parent 262a5d1
commit 5446a0b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git 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
@@ -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>
     );
   }