From 10ab83ccc0b3856513f370dcc12bd1a14321861d Mon Sep 17 00:00:00 2001
From: Michael Steinberg <misteinb@microsoft.com>
Date: Mon, 13 Aug 2018 15:45:21 -0700
Subject: [PATCH 1/2] add aria label to calendar days

---
 CHANGELOG.md                         |  4 +++
 lib/components/DateTime/Calendar.tsx | 42 ++++++----------------------
 package.json                         |  2 +-
 3 files changed, 13 insertions(+), 35 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 544575d..b42145d 100644
--- 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
index ebe6e38..0fa3d52 100644
--- 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
index a5abc9b..1c66c9e 100644
--- 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",

From 7b28f58d8c4db056a99f55ef4a708d6f90b0f3d6 Mon Sep 17 00:00:00 2001
From: Michael Steinberg <misteinb@microsoft.com>
Date: Mon, 13 Aug 2018 18:36:48 -0700
Subject: [PATCH 2/2] pass locale via props.  use js toLocaleDateString()

---
 CHANGELOG.md                              |  1 +
 lib/components/DateTime/Calendar.tsx      | 10 +++++-----
 lib/components/DateTime/DateField.tsx     |  3 +++
 lib/components/DateTime/DatePicker.tsx    |  4 ++++
 lib/components/DateTime/DateTimeField.tsx |  3 +++
 5 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b42145d..12aaf7c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## v3.0.3
 ### Fixed
 - screen reader support for calendar
+- take in props to override browser locale for calendar
 
 ## v3.0.2
 ### Fixed
diff --git a/lib/components/DateTime/Calendar.tsx b/lib/components/DateTime/Calendar.tsx
index 0fa3d52..c075423 100644
--- a/lib/components/DateTime/Calendar.tsx
+++ b/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;
@@ -84,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') {
@@ -108,9 +109,9 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
             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);
@@ -280,7 +281,6 @@ 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 (
@@ -325,7 +325,7 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
                 const date = col.date;
                 const colMonth = col.month;
                 const key = `${colMonth}-${date}`;
-                const ariaLabel = `${date} ${this.monthNames[colMonth]} ${curYear}`;
+                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) {
diff --git a/lib/components/DateTime/DateField.tsx b/lib/components/DateTime/DateField.tsx
index ce7932c..3f3b82d 100644
--- a/lib/components/DateTime/DateField.tsx
+++ b/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}
diff --git a/lib/components/DateTime/DatePicker.tsx b/lib/components/DateTime/DatePicker.tsx
index 82744ba..4c9fcb3 100644
--- a/lib/components/DateTime/DatePicker.tsx
+++ b/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>
diff --git a/lib/components/DateTime/DateTimeField.tsx b/lib/components/DateTime/DateTimeField.tsx
index 007dee7..90af6ff 100644
--- a/lib/components/DateTime/DateTimeField.tsx
+++ b/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}