From d52a52d19ec9caacedc87d3b578b788ce75b9361 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 16 Feb 2018 11:55:45 -0800
Subject: [PATCH 1/3] added support for aria-posinset and aria-setsize

---
 .../src/components/Checkbox/Checkbox.tsx           |  4 ++++
 .../src/components/Checkbox/Checkbox.types.ts      | 10 ++++++++++
 .../src/components/SpinButton/SpinButton.tsx       |  6 +++++-
 .../src/components/SpinButton/SpinButton.types.ts  | 14 ++++++++++++--
 4 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx
index 1062305e0dccb..8a398c119e228 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx
@@ -83,6 +83,8 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
       styles: customStyles,
       onRenderLabel = this._onRenderLabel,
       checkmarkIconProps,
+      ariaPositionInSet,
+      ariaSetSize
     } = this.props;
 
     const isChecked = checked === undefined ? this.state.isChecked : checked;
@@ -118,6 +120,8 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
         aria-label={ ariaLabel }
         aria-labelledby={ ariaLabelledBy }
         aria-describedby={ ariaDescribedBy }
+        aria-posinset={ ariaPositionInSet }
+        aria-setsize={ ariaSetSize }
       >
         <label className={ this._classNames.label } htmlFor={ this._id } >
           <div className={ this._classNames.checkbox }>
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.types.ts b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.types.ts
index 67127151d734e..2a9398d9e36c2 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.types.ts
@@ -91,6 +91,16 @@ export interface ICheckboxProps extends React.ButtonHTMLAttributes<HTMLElement |
    */
   ariaDescribedBy?: string;
 
+  /**
+   * The position in the parent set (if in a set) for aria-posinset.
+   */
+  ariaPositionInSet?: number;
+
+  /**
+  * The total size of the parent set (if in a set) for aria-setsize.
+  */
+  ariaSetSize?: number;
+
   /**
    * Custom styles for this component
    */
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
index 47ee2bfa7d281..ec9dc09973a99 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
@@ -146,7 +146,9 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
       styles: customStyles,
       upArrowButtonStyles: customUpArrowButtonStyles,
       downArrowButtonStyles: customDownArrowButtonStyles,
-      theme
+      theme,
+      ariaPositionInSet,
+      ariaSetSize
     } = this.props;
 
     const {
@@ -188,6 +190,8 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
           className={ classNames.spinButtonWrapper }
           title={ title && title }
           aria-label={ ariaLabel && ariaLabel }
+          aria-posinset={ ariaPositionInSet }
+          aria-setsize={ ariaSetSize }
         >
           <input
             value={ value }
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts
index 2c0aeedd5dede..9320fccd84435 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts
@@ -174,12 +174,12 @@ export interface ISpinButtonProps {
   theme?: ITheme;
 
   /**
-   * Accessibility label text for the increment button for the benefit of the screen reader.
+   * Accessibile label text for the increment button for the benefit of the screen reader.
    */
   incrementButtonAriaLabel?: string;
 
   /**
-   * Accessibility label text for the decrement button for the benefit of the screen reader.
+   * Accessibile label text for the decrement button for the benefit of the screen reader.
    */
   decrementButtonAriaLabel?: string;
 
@@ -189,6 +189,16 @@ export interface ISpinButtonProps {
    * IE: if step = 1, precision = 0. step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.
    */
   precision?: number;
+
+  /**
+   * The position in the parent set (if in a set) for aria-posinset.
+   */
+  ariaPositionInSet?: number;
+
+  /**
+  * The total size of the parent set (if in a set) for aria-setsize.
+  */
+  ariaSetSize?: number;
 }
 
 export interface ISpinButtonStyles {

From 099fa5755fe9c25498ef221c78ad12f806cd90ae Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 16 Feb 2018 11:56:26 -0800
Subject: [PATCH 2/3] added change file

---
 .../accAriaSize_2018-02-16-19-56.json                 | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/accAriaSize_2018-02-16-19-56.json

diff --git a/common/changes/office-ui-fabric-react/accAriaSize_2018-02-16-19-56.json b/common/changes/office-ui-fabric-react/accAriaSize_2018-02-16-19-56.json
new file mode 100644
index 0000000000000..4926123daab9a
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/accAriaSize_2018-02-16-19-56.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "added support for aria-posinset and aria-setsize",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "chiechan@microsoft.com"
+}
\ No newline at end of file

From d18d0e1e63600fc5a3b76a6524240131ed485961 Mon Sep 17 00:00:00 2001
From: "REDMOND\\chiechan" <chiechan@microsoft.com>
Date: Fri, 16 Feb 2018 11:58:21 -0800
Subject: [PATCH 3/3] updated snapshots

---
 .../components/Checkbox/__snapshots__/Checkbox.test.tsx.snap    | 2 ++
 .../SpinButton/__snapshots__/SpinButton.test.tsx.snap           | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index a40e7894da1ed..56ab252f499ae 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -7,6 +7,8 @@ exports[`Checkbox renders Checkbox correctly 1`] = `
   aria-disabled={undefined}
   aria-label={undefined}
   aria-labelledby={undefined}
+  aria-posinset={undefined}
+  aria-setsize={undefined}
   className=
       ms-Checkbox
       is-enabled
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
index 928e00cac02cf..1d61c9ea5b854 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
@@ -52,6 +52,8 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
   </div>
   <div
     aria-label={undefined}
+    aria-posinset={undefined}
+    aria-setsize={undefined}
     className=
 
         {