add aria label to calendar days

Azure · Aug 13, 2018 · 10ab83c · 10ab83c
1 parent 11c62ca
commit 10ab83c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v3.0.3
+### Fixed
+- screen reader support for calendar
+
 ## v3.0.2
 ### Fixed
 - expose callback for clicking calendar icon in date picker. includes next visible state.

diff --git a/lib/components/DateTime/Calendar.tsx b/lib/components/DateTime/Calendar.tsx
@@ -52,8 +52,6 @@ export interface CalendarState {
     currentDate: MethodDate;
     /** Whether or not props.year/month updates update the view */
     detached: boolean;
-    /** Whether accessibility is activated */
-    accessibility: boolean;
 }
 
 /**
@@ -107,8 +105,7 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
         currentDate.date = 1;
         this.state = {
             currentDate: currentDate,
-            detached: false,
-            accessibility: false
+            detached: false
         };
 
         this.monthNames = getLocalMonths(locale);
@@ -121,22 +118,6 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
         this.setContainerRef = this.setContainerRef.bind(this);
     }
 
-    public startAccessibility() {
-        const newDate = this.state.currentDate.copy();
-        newDate.date = 1;
-
-        this.setState({
-            accessibility: true,
-            currentDate: newDate
-        });
-    }
-
-    public stopAccessibility() {
-        this.setState({
-            accessibility: false
-        });
-    }
-
     componentWillReceiveProps(newProps: CalendarProps) {
         const date = this.state.currentDate.copy();
         let update = false;
@@ -182,20 +163,11 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
             this.props.onChange(date.dateObject);
             this.setState({
                 currentDate: MethodDate.fromDate(this.props.localTimezone, date.dateObject),
-                detached: false,
-                accessibility: false
+                detached: false
             });
         }
     }
 
-    onFocus(date: number, event) {
-        if (!this.state.accessibility) {
-            const newDate = this.state.currentDate.copy();
-            newDate.date = date;
-            this.setState({ currentDate: newDate, accessibility: true });
-        }
-    }
-
     onPrevMonth(event) {
         event.preventDefault();
 
@@ -308,6 +280,7 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
 
         const curYear = this.state.currentDate.year;
         const curMonth = this.state.currentDate.month;
+        const locale = navigator['userLanguage'] || (navigator.language || 'en-us');
 
         const weekdays = this.dayNames.map(day => {
             return (
@@ -349,16 +322,17 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
                     event.preventDefault();
                 };
 
-                // TODO aria-label with date
-
                 const date = col.date;
                 const colMonth = col.month;
                 const key = `${colMonth}-${date}`;
+                const ariaLabel = `${date} ${this.monthNames[colMonth]} ${curYear}`;
+
                 /** Grayed out day from another month */
                 if (colMonth !== curMonth) {
                     return (
                         <Attr.button
                             type='button'
+                            aria-label={ariaLabel}
                             data-row={rowIndex}
                             data-col={colIndex}
                             onKeyDown={this.onKeyDown}
@@ -384,13 +358,13 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
                         return (
                             <Attr.button
                                 type='button'
+                                aria-label={ariaLabel}
                                 data-row={rowIndex}
                                 data-col={colIndex}
                                 onKeyDown={this.onKeyDown}
                                 className={css('selected')}
                                 onClick={onClick}
                                 key={key}
-                                onFocus={this.onFocus.bind(this, date)}
                                 attr={this.props.attr.dateButton}
                             >
                                 {date}
@@ -403,12 +377,12 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
                 return (
                     <Attr.button
                         type='button'
+                        aria-label={ariaLabel}
                         data-row={rowIndex}
                         data-col={colIndex}
                         onKeyDown={this.onKeyDown}
                         onClick={onClick}
                         key={key}
-                        onFocus={this.onFocus.bind(this, date)}
                         attr={this.props.attr.dateButton}
                     >
                         {date}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@azure-iot/ux-fluent-controls",
-    "version": "3.0.2",
+    "version": "3.0.3",
     "description": "Azure IoT Fluent React Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",