Merge pull request #26 from misteinb/bugfix/screen-reader-support-for-calendar

add aria label to calendar days

Author: misteinb

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## v3.0.3
+### Fixed
+- screen reader support for calendar
+- take in props to override browser locale for calendar
+
 ## v3.0.2
 ### Fixed
 - expose callback for clicking calendar icon in date picker. includes next visible state.

lib/components/DateTime/Calendar.tsx

@@ -23,6 +23,8 @@ export interface CalendarAttributes {
 export interface CalendarProps extends React.Props<CalendarComponentType> {
     /** Current selected date */
     value?: Date | string;
+    /** i18n locale */
+    locale?: string;
 
     /** Year to display (otherwise shows the year from value) */
     year?: number;
@@ -52,8 +54,6 @@ export interface CalendarState {
     currentDate: MethodDate;
     /** Whether or not props.year/month updates update the view */
     detached: boolean;
-    /** Whether accessibility is activated */
-    accessibility: boolean;
 }
 
 /**
@@ -86,7 +86,6 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
 
 
     constructor(props: CalendarProps) {
-        const locale = navigator['userLanguage'] || (navigator.language || 'en-us');
         super(props);
 
         if (typeof (this.props.value) === 'string') {
@@ -107,36 +106,19 @@ 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);
+        this.monthNames = getLocalMonths(this.props.locale);
 
-        this.dayNames = getLocalWeekdays(locale);
+        this.dayNames = getLocalWeekdays(this.props.locale);
 
         this.onPrevMonth = this.onPrevMonth.bind(this);
         this.onNextMonth = this.onNextMonth.bind(this);
         this.onKeyDown = this.onKeyDown.bind(this);
         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 +164,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();
 
@@ -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 = new Date(`${curYear}-${colMonth + 1}-${date}`).toLocaleDateString(this.props.locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
+
                 /** 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}

lib/components/DateTime/DateField.tsx

@@ -24,6 +24,8 @@ export interface DateFieldProps extends React.Props<DateFieldType> {
      * Default: true
      */
     localTimezone?: boolean;
+    /** i18n locale */
+    locale?: string;
     /**
      * Show Calendar below date picker input
      */
@@ -114,6 +116,7 @@ export const DateField: React.StatelessComponent<DateFieldProps> = (props: DateF
             <DatePicker
                 name={props.name}
                 initialValue={props.initialValue}
+                locale={props.locale}
                 localTimezone={props.localTimezone}
                 tabIndex={props.tabIndex}
                 showAbove={props.showAbove}

lib/components/DateTime/DatePicker.tsx

@@ -42,6 +42,9 @@ export interface DatePickerProps extends React.Props<DatePickerType> {
      * Default: true
      */
     localTimezone?: boolean;
+
+    /** i18n locale */
+    locale?: string;
     /**
      * Show Calendar below date picker input
      */
@@ -446,6 +449,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
                             className={css('date-picker-calendar')}
                             year={parsed.year || null}
                             month={parsed.month - 1}
+                            locale={this.props.locale}
                             attr={this.props.attr.calendar}
                         />
                         <div className={css('date-picker-dropdown-triangle')}></div>

lib/components/DateTime/DateTimeField.tsx

@@ -46,6 +46,8 @@ export interface DateTimeFieldProps extends React.Props<DateTimeFieldType> {
      * Default: true
      */
     localTimezone?: boolean;
+    /** i18n locale */
+    locale?: string;
     /**
      * Show Calendar below date picker input
      */
@@ -370,6 +372,7 @@ export class DateTimeField extends React.Component<DateTimeFieldProps, Partial<D
                             tabIndex={this.props.tabIndex}
                             error={!!this.props.error}
                             disabled={this.props.disabled}
+                            locale={this.props.locale}
                             localTimezone={this.props.localTimezone}
                             showAbove={this.props.showAbove}
                             format={this.props.format}

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",