From 0485e593275a73ba8a59a0fa6b963fe2f345dd93 Mon Sep 17 00:00:00 2001
From: Jordan Janzen <jordancjanzen@gmail.com>
Date: Thu, 18 Jan 2018 10:38:28 -0800
Subject: [PATCH 1/5] Change clickable spans to buttons.

---
 .../src/components/Calendar/Calendar.tsx           |  4 ++--
 .../src/components/Calendar/CalendarDay.tsx        |  8 ++++----
 .../src/components/Calendar/CalendarMonth.tsx      | 14 +++++++-------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
index 637d6cd4da0944..7705e3f1b6b82e 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
@@ -180,7 +180,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
                 /> }
 
                 { showGoToToday &&
-                  <span
+                  <button
                     role='button'
                     className={ css('ms-DatePicker-goToday js-goToday', styles.goToday) }
                     onClick={ this._onGotoToday }
@@ -188,7 +188,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
                     tabIndex={ 0 }
                   >
                     { strings!.goToToday }
-                  </span>
+                  </button>
                 }
               </div>
             </div>
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
index 20202e81a073ad..462b38a62fc8dc 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
@@ -129,7 +129,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
       >
         <div className={ css('ms-DatePicker-monthComponents', styles.monthComponents) }>
           <div className={ css('ms-DatePicker-navContainer', styles.navContainer) }>
-            <span
+            <button
               className={ css('ms-DatePicker-prevMonth js-prevMonth', styles.prevMonth,
                 {
                   ['ms-DatePicker-prevMonth--disabled ' + styles.prevMonthIsDisabled]: !prevMonthInBounds
@@ -143,8 +143,8 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
               tabIndex={ 0 }
             >
               <Icon iconName={ getRTL() ? rightNavigationIcon : leftNavigationIcon } />
-            </span >
-            <span
+            </button >
+            <button
               className={ css('ms-DatePicker-nextMonth js-nextMonth', styles.nextMonth,
                 {
                   ['ms-DatePicker-nextMonth--disabled ' + styles.nextMonthIsDisabled]: !nextMonthInBounds
@@ -157,7 +157,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
               tabIndex={ 0 }
             >
               <Icon iconName={ getRTL() ? leftNavigationIcon : rightNavigationIcon } />
-            </span >
+            </button >
           </div >
         </div >
         <div className={ css('ms-DatePicker-header', styles.header) } >
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
index 23fb4e59609dde..93d5e361d78bed 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
@@ -33,7 +33,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
     navigatedMonth: HTMLElement;
   };
 
-  private _selectMonthCallbacks: (() => void)[];
+  private _selectMonthCallbacks: (() => void) [];
 
   public constructor(props: ICalendarMonthProps) {
     super(props);
@@ -63,7 +63,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
       <div className={ css('ms-DatePicker-monthPicker', styles.monthPicker) }>
         <div className={ css('ms-DatePicker-yearComponents', styles.yearComponents) }>
           <div className={ css('ms-DatePicker-navContainer', styles.navContainer) }>
-            <span
+            <button
               className={ css('ms-DatePicker-prevYear js-prevYear', styles.prevYear, {
                 ['ms-DatePicker-prevYear--disabled ' + styles.prevYearIsDisabled]: !isPrevYearInBounds
               }) }
@@ -74,8 +74,8 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
               tabIndex={ 0 }
             >
               <Icon iconName={ getRTL() ? rightNavigationIcon : leftNavigationIcon } />
-            </span>
-            <span
+            </button>
+            <button
               className={ css('ms-DatePicker-nextYear js-nextYear', styles.nextYear, {
                 ['ms-DatePicker-nextYear--disabled ' + styles.nextYearIsDisabled]: !isNextYearInBounds
               }) }
@@ -86,7 +86,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
               tabIndex={ 0 }
             >
               <Icon iconName={ getRTL() ? leftNavigationIcon : rightNavigationIcon } />
-            </span>
+            </button>
           </div>
         </div>
         <div className={ css('ms-DatePicker-header', styles.header) }>
@@ -120,7 +120,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
               const isInBounds = (minDate ? compareDatePart(minDate, getMonthEnd(indexedMonth)) < 1 : true) &&
                 (maxDate ? compareDatePart(getMonthStart(indexedMonth), maxDate) < 1 : true);
 
-              return <span
+              return <button
                 role={ 'gridcell' }
                 className={
                   css('ms-DatePicker-monthOption', styles.monthOption,
@@ -138,7 +138,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
                 ref={ isNavigatedMonth ? 'navigatedMonth' : undefined }
               >
                 { month }
-              </span>;
+              </button>;
             }
             ) }
           </div>

From 77db7e8eace15e3d750738a0ada0e399da036ccb Mon Sep 17 00:00:00 2001
From: Jordan Janzen <jordancjanzen@gmail.com>
Date: Thu, 18 Jan 2018 11:00:52 -0800
Subject: [PATCH 2/5] Add button resets to classes used by buttons that were
 spans

---
 .../src/components/Calendar/Calendar.scss                 | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss
index 14ea137ae4bf67..0d0d0ddf1aa364 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss
+++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.scss
@@ -251,6 +251,9 @@ $Calendar-dayPicker-margin: 10px;
   color: $ms-color-neutralDark;
   position: relative;
   top: 2px;
+  background-color: transparent;
+  border: none;
+  padding: 0;
   &:hover {
     color: $ms-color-neutralDark;
     cursor: pointer;
@@ -308,6 +311,9 @@ $Calendar-dayPicker-margin: 10px;
   @include ms-font-s-plus;
   color: $ms-color-neutralPrimary;
   text-align: center; // border-radius: 2px;
+  border: none;
+  padding: 0;
+  background-color: transparent;
   &:hover {
     color: $ms-color-black;
     background-color: $ms-color-neutralTertiaryAlt;
@@ -336,6 +342,8 @@ $Calendar-dayPicker-margin: 10px;
   height: 30px;
   line-height: 30px;
   padding: 0 10px;
+  background-color: transparent;
+  border: none;
   position: absolute !important;
   @include ms-right(13px);
   &:hover {

From 34e381f7689dd43dd432072a61a4c84d0479950b Mon Sep 17 00:00:00 2001
From: Jordan Janzen <jordancjanzen@gmail.com>
Date: Thu, 18 Jan 2018 11:22:10 -0800
Subject: [PATCH 3/5] npm run changes output

---
 ...endar-change-clickable-spans_2018-01-18-19-16.json | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/-1535-calendar-change-clickable-spans_2018-01-18-19-16.json

diff --git a/common/changes/office-ui-fabric-react/-1535-calendar-change-clickable-spans_2018-01-18-19-16.json b/common/changes/office-ui-fabric-react/-1535-calendar-change-clickable-spans_2018-01-18-19-16.json
new file mode 100644
index 00000000000000..ab63edec96c859
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/-1535-calendar-change-clickable-spans_2018-01-18-19-16.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Address issue #1535 - Calendar: Change clickable spans to buttons.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "jordancjanzen@gmail.com"
+}
\ No newline at end of file

From b966e040471a11871733788afb93057968fdaa05 Mon Sep 17 00:00:00 2001
From: Jordan Janzen <v-jojanz@microsoft.com>
Date: Thu, 18 Jan 2018 13:14:17 -0800
Subject: [PATCH 4/5] Correct email to microsoft alias

---
 .../-1535-calendar-change-clickable-spans_2018-01-18-19-16.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common/changes/office-ui-fabric-react/-1535-calendar-change-clickable-spans_2018-01-18-19-16.json b/common/changes/office-ui-fabric-react/-1535-calendar-change-clickable-spans_2018-01-18-19-16.json
index ab63edec96c859..023705d3627ed5 100644
--- a/common/changes/office-ui-fabric-react/-1535-calendar-change-clickable-spans_2018-01-18-19-16.json
+++ b/common/changes/office-ui-fabric-react/-1535-calendar-change-clickable-spans_2018-01-18-19-16.json
@@ -7,5 +7,5 @@
     }
   ],
   "packageName": "office-ui-fabric-react",
-  "email": "jordancjanzen@gmail.com"
+  "email": "v-jojanz@microsoft.com"
 }
\ No newline at end of file

From 481e470d602a21414adb2705886fa05402091f35 Mon Sep 17 00:00:00 2001
From: Jordan Janzen <jordanjanzen@jordanjanzen.com>
Date: Thu, 18 Jan 2018 22:32:41 -0800
Subject: [PATCH 5/5] Update snapshot

---
 .../__snapshots__/Calendar.test.tsx.snap      | 68 +++++++++----------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
index 31df7ed33f3a16..40b7bdc33374e7 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
               <div
                 className="ms-DatePicker-navContainer"
               >
-                <span
+                <button
                   aria-controls="DatePickerDay-dayPicker10"
                   aria-label={undefined}
                   className="ms-DatePicker-prevMonth js-prevMonth"
@@ -48,8 +48,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                     data-icon-name="Up"
                     role="presentation"
                   />
-                </span>
-                <span
+                </button>
+                <button
                   aria-controls="DatePickerDay-dayPicker10"
                   aria-label={undefined}
                   className="ms-DatePicker-nextMonth js-nextMonth"
@@ -69,7 +69,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                     data-icon-name="Down"
                     role="presentation"
                   />
-                </span>
+                </button>
               </div>
             </div>
             <div
@@ -906,7 +906,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
               <div
                 className="ms-DatePicker-navContainer"
               >
-                <span
+                <button
                   aria-label={undefined}
                   className="ms-DatePicker-prevYear js-prevYear"
                   onClick={[Function]}
@@ -925,8 +925,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                     data-icon-name="Up"
                     role="presentation"
                   />
-                </span>
-                <span
+                </button>
+                <button
                   aria-label={undefined}
                   className="ms-DatePicker-nextYear js-nextYear"
                   onClick={[Function]}
@@ -945,7 +945,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                     data-icon-name="Down"
                     role="presentation"
                   />
-                </span>
+                </button>
               </div>
             </div>
             <div
@@ -971,7 +971,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                 className="ms-DatePicker-optionGrid"
                 role="grid"
               >
-                <span
+                <button
                   aria-label="January 2000"
                   aria-selected={false}
                   className="ms-DatePicker-monthOption"
@@ -980,8 +980,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                   role="gridcell"
                 >
                   Jan
-                </span>
-                <span
+                </button>
+                <button
                   aria-label="February 2000"
                   aria-selected={true}
                   className="ms-DatePicker-monthOption"
@@ -990,8 +990,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                   role="gridcell"
                 >
                   Feb
-                </span>
-                <span
+                </button>
+                <button
                   aria-label="March 2000"
                   aria-selected={false}
                   className="ms-DatePicker-monthOption"
@@ -1000,8 +1000,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                   role="gridcell"
                 >
                   Mar
-                </span>
-                <span
+                </button>
+                <button
                   aria-label="April 2000"
                   aria-selected={false}
                   className="ms-DatePicker-monthOption"
@@ -1010,8 +1010,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                   role="gridcell"
                 >
                   Apr
-                </span>
-                <span
+                </button>
+                <button
                   aria-label="May 2000"
                   aria-selected={false}
                   className="ms-DatePicker-monthOption"
@@ -1020,8 +1020,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                   role="gridcell"
                 >
                   May
-                </span>
-                <span
+                </button>
+                <button
                   aria-label="June 2000"
                   aria-selected={false}
                   className="ms-DatePicker-monthOption"
@@ -1030,8 +1030,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                   role="gridcell"
                 >
                   Jun
-                </span>
-                <span
+                </button>
+                <button
                   aria-label="July 2000"
                   aria-selected={false}
                   className="ms-DatePicker-monthOption"
@@ -1040,8 +1040,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                   role="gridcell"
                 >
                   Jul
-                </span>
-                <span
+                </button>
+                <button
                   aria-label="August 2000"
                   aria-selected={false}
                   className="ms-DatePicker-monthOption"
@@ -1050,8 +1050,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                   role="gridcell"
                 >
                   Aug
-                </span>
-                <span
+                </button>
+                <button
                   aria-label="September 2000"
                   aria-selected={false}
                   className="ms-DatePicker-monthOption"
@@ -1060,8 +1060,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                   role="gridcell"
                 >
                   Sep
-                </span>
-                <span
+                </button>
+                <button
                   aria-label="October 2000"
                   aria-selected={false}
                   className="ms-DatePicker-monthOption"
@@ -1070,8 +1070,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                   role="gridcell"
                 >
                   Oct
-                </span>
-                <span
+                </button>
+                <button
                   aria-label="November 2000"
                   aria-selected={false}
                   className="ms-DatePicker-monthOption"
@@ -1080,8 +1080,8 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                   role="gridcell"
                 >
                   Nov
-                </span>
-                <span
+                </button>
+                <button
                   aria-label="December 2000"
                   aria-selected={false}
                   className="ms-DatePicker-monthOption"
@@ -1090,11 +1090,11 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                   role="gridcell"
                 >
                   Dec
-                </span>
+                </button>
               </div>
             </div>
           </div>
-          <span
+          <button
             className="ms-DatePicker-goToday js-goToday"
             onClick={[Function]}
             onKeyDown={[Function]}
@@ -1102,7 +1102,7 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
             tabIndex={0}
           >
             Go to today
-          </span>
+          </button>
         </div>
       </div>
     </div>