microsoft · jspurlin · Feb 20, 2018 · Feb 16, 2018 · Feb 16, 2018 · Feb 16, 2018
@@ -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"
+}
@@ -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 }>

@@ -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
    */

@@ -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

@@ -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 }

@@ -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 {

@@ -52,6 +52,8 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
   </div>
   <div
     aria-label={undefined}
+    aria-posinset={undefined}
+    aria-setsize={undefined}
     className=
 
         {