Add aria-describedby prop to Combo Box and Spin Button. Fixes #8045

common/changes/@uifabric/master_2019-02-21-21-13.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "mergeAriaAttributeValues: Trim output string",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "dahajek@microsoft.com"
+}

common/changes/office-ui-fabric-react/master_2019-02-20-22-30.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Add aria-describedby prop to Combo Box and Spin Button",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "dahajek@microsoft.com"
+}

packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.ts

@@ -2903,6 +2903,7 @@ interface IComboBoxOptionStyles extends IButtonStyles {
 // @public (undocumented)
 interface IComboBoxProps extends ISelectableDroppableTextProps<IComboBox> {
   allowFreeform?: boolean;
+  ariaDescribedBy?: string;
   autoComplete?: 'on' | 'off';
   autofill?: IAutofillProps;
   buttonIconProps?: IIconProps;
@@ -10515,6 +10516,7 @@ interface ISpinButton {
 
 // @public (undocumented)
 interface ISpinButtonProps {
+  ariaDescribedBy?: string;
   ariaLabel?: string;
   ariaPositionInSet?: number;
   ariaSetSize?: number;

packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -686,7 +686,7 @@ exports[`Button renders IconButton correctly 1`] = `
 
 exports[`Button renders a DefaultButton with a keytip correctly 1`] = `
 <button
-  aria-describedby=" ktp-layer-id ktp-a"
+  aria-describedby="ktp-layer-id ktp-a"
   className=
       ms-Button
       ms-Button--default

packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx

@@ -489,4 +489,15 @@ describe.only('ComboBox', () => {
 
     expect(onItemClickMock).toHaveBeenCalledTimes(1);
   });
+
+  it('allows adding a custom aria-describedby id to the input', () => {
+    const comboBoxRef = React.createRef<any>();
+    const customId = 'customAriaDescriptionId';
+    wrapper = mount(<ComboBox options={DEFAULT_OPTIONS} componentRef={comboBoxRef} ariaDescribedBy={customId} />);
+
+    const comboBoxRoot = wrapper.find('.ms-ComboBox');
+    const inputElement = comboBoxRoot.find('input').getDOMNode();
+    const ariaDescribedByAttribute = inputElement.getAttribute('aria-describedby');
+    expect(ariaDescribedByAttribute).toMatch(new RegExp('\\b' + customId + '\\b'));
+  });
 });

packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx

@@ -13,7 +13,8 @@ import {
   isIOS,
   isMac,
   KeyCodes,
-  shallowCompare
+  shallowCompare,
+  mergeAriaAttributeValues
 } from '../../Utilities';
 import { Callout } from '../../Callout';
 import { Checkbox } from '../../Checkbox';
@@ -311,6 +312,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
       label,
       disabled,
       ariaLabel,
+      ariaDescribedBy,
       required,
       errorMessage,
       onRenderContainer = this._onRenderContainer,
@@ -383,7 +385,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
                 readOnly={disabled || !allowFreeform}
                 aria-labelledby={label && id + '-label'}
                 aria-label={ariaLabel && !label ? ariaLabel : undefined}
-                aria-describedby={keytipAttributes['aria-describedby']}
+                aria-describedby={mergeAriaAttributeValues(ariaDescribedBy, ' ', keytipAttributes['aria-describedby'])}
                 aria-activedescendant={this._getAriaActiveDescentValue()}
                 aria-disabled={disabled}
                 aria-owns={isOpen ? id + '-list' : undefined}

packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts

@@ -200,6 +200,11 @@ export interface IComboBoxProps extends ISelectableDroppableTextProps<IComboBox>
    */
   isButtonAriaHidden?: boolean;
 
+  /**
+   * Optional prop to add a string id that can be referenced inside the aria-describedby attribute
+   */
+  ariaDescribedBy?: string;
+
   /**
    * Optional keytip for this combo box
    */

packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap

@@ -391,7 +391,7 @@ exports[`ComboBox renders with a Keytip correctly 1`] = `
   >
     <input
       aria-autocomplete="both"
-      aria-describedby=" ktp-layer-id ktp-a"
+      aria-describedby="ktp-layer-id ktp-a"
       aria-expanded={false}
       autoCapitalize="off"
       autoComplete="off"

packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.types.ts

@@ -40,7 +40,8 @@ export interface IProgressIndicatorProps extends React.ClassAttributes<ProgressI
   description?: React.ReactNode;
 
   /**
-   * Percentage of the operation's completeness, numerically between 0 and 1. If this is not set, the indeterminate progress animation will be shown instead.
+   * Percentage of the operation's completeness, numerically between 0 and 1. If this is not set,
+   * the indeterminate progress animation will be shown instead.
    */
   percentComplete?: number;
 

packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.test.tsx

@@ -642,4 +642,14 @@ describe('SpinButton', () => {
     ReactTestUtils.Simulate.keyDown(inputDOM, { which: KeyCodes.enter });
     expect(onValidate).toHaveBeenCalledTimes(2);
   });
+
+  it('allows adding a custom aria-describedby id to the input', () => {
+    const customId = 'customAriaDescriptionId';
+    const renderedDOM: HTMLElement = renderIntoDocument(<SpinButton label="label" ariaDescribedBy={customId} />);
+
+    const inputDOM: HTMLInputElement = renderedDOM.getElementsByTagName('input')[0];
+
+    const ariaDescribedByAttribute = inputDOM.getAttribute('aria-describedby');
+    expect(ariaDescribedByAttribute).toMatch(new RegExp('\\b' + customId + '\\b'));
+  });
 });

packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx

@@ -2,7 +2,15 @@ import * as React from 'react';
 import { IconButton } from '../../Button';
 import { Label } from '../../Label';
 import { Icon } from '../../Icon';
-import { BaseComponent, getId, KeyCodes, customizable, calculatePrecision, precisionRound } from '../../Utilities';
+import {
+  BaseComponent,
+  getId,
+  KeyCodes,
+  customizable,
+  calculatePrecision,
+  precisionRound,
+  mergeAriaAttributeValues
+} from '../../Utilities';
 import { ISpinButton, ISpinButtonProps } from './SpinButton.types';
 import { Position } from '../../utilities/positioning';
 import { getStyles, getArrowButtonStyles } from './SpinButton.styles';
@@ -123,6 +131,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
       decrementButtonAriaLabel,
       title,
       ariaLabel,
+      ariaDescribedBy,
       styles: customStyles,
       upArrowButtonStyles: customUpArrowButtonStyles,
       downArrowButtonStyles: customDownArrowButtonStyles,
@@ -177,7 +186,7 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
                 aria-valuetext={ariaValueText ? ariaValueText : isNaN(Number(value)) ? value : undefined}
                 aria-valuemin={min}
                 aria-valuemax={max}
-                aria-describedby={keytipAttributes['aria-describedby']}
+                aria-describedby={mergeAriaAttributeValues(ariaDescribedBy, ' ', keytipAttributes['aria-describedby'])}
                 onBlur={this._onBlur}
                 ref={this._input}
                 onFocus={this._onFocus}

packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts

@@ -66,6 +66,11 @@ export interface ISpinButtonProps {
    */
   ariaLabel?: string;
 
+  /**
+   * Optional prop to add a string id that can be referenced inside the aria-describedby attribute
+   */
+  ariaDescribedBy?: string;
+
   /**
    * A title for the SpinButton used for a more descriptive name that's also visible on its tooltip.
    */

packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.Basic.Example.tsx.shot

@@ -40,7 +40,7 @@ exports[`Component Examples renders Keytips.Basic.Example.tsx correctly 1`] = `
         role="tablist"
       >
         <button
-          aria-describedby=" ktp-layer-id ktp-a"
+          aria-describedby="ktp-layer-id ktp-a"
           aria-selected={true}
           className=
               ms-Button
@@ -197,7 +197,7 @@ exports[`Component Examples renders Keytips.Basic.Example.tsx correctly 1`] = `
           </div>
         </button>
         <button
-          aria-describedby=" ktp-layer-id ktp-b"
+          aria-describedby="ktp-layer-id ktp-b"
           aria-selected={false}
           className=
               ms-Button
@@ -349,7 +349,7 @@ exports[`Component Examples renders Keytips.Basic.Example.tsx correctly 1`] = `
           </div>
         </button>
         <button
-          aria-describedby=" ktp-layer-id ktp-c"
+          aria-describedby="ktp-layer-id ktp-c"
           aria-selected={false}
           className=
               ms-Button
@@ -587,7 +587,7 @@ exports[`Component Examples renders Keytips.Basic.Example.tsx correctly 1`] = `
             data-ktp-target="ktp-a-3"
           >
             <input
-              aria-describedby=" ktp-layer-id ktp-a-3"
+              aria-describedby="ktp-layer-id ktp-a-3"
               aria-disabled={false}
               aria-labelledby="Label11"
               aria-valuemax={100}
@@ -940,7 +940,7 @@ exports[`Component Examples renders Keytips.Basic.Example.tsx correctly 1`] = `
           >
             <button
               aria-checked={false}
-              aria-describedby=" ktp-layer-id ktp-a-1"
+              aria-describedby="ktp-layer-id ktp-a-1"
               className=
                   ms-Toggle-background
                   {
@@ -1057,7 +1057,7 @@ exports[`Component Examples renders Keytips.Basic.Example.tsx correctly 1`] = `
           Go to
 
           <a
-            aria-describedby=" ktp-layer-id ktp-a-2"
+            aria-describedby="ktp-layer-id ktp-a-2"
             className=
                 ms-Link
                 {

packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.Button.Example.tsx.shot

@@ -6,7 +6,7 @@ exports[`Component Examples renders Keytips.Button.Example.tsx correctly 1`] = `
     When multiple Keytips start with the same character, typing that character will filter the visible keytips.
   </p>
   <button
-    aria-describedby=" ktp-layer-id ktp-1-a"
+    aria-describedby="ktp-layer-id ktp-1-a"
     className=
         ms-Button
         ms-Button--default
@@ -274,7 +274,7 @@ exports[`Component Examples renders Keytips.Button.Example.tsx correctly 1`] = `
     </div>
   </button>
   <button
-    aria-describedby=" ktp-layer-id ktp-2-a"
+    aria-describedby="ktp-layer-id ktp-2-a"
     aria-expanded={false}
     aria-haspopup={true}
     aria-owns={null}
@@ -422,7 +422,7 @@ exports[`Component Examples renders Keytips.Button.Example.tsx correctly 1`] = `
     </div>
   </button>
   <div
-    aria-describedby=" ktp-layer-id ktp-2-b"
+    aria-describedby="ktp-layer-id ktp-2-b"
     aria-expanded={false}
     aria-haspopup={true}
     className=
@@ -807,7 +807,7 @@ exports[`Component Examples renders Keytips.Button.Example.tsx correctly 1`] = `
     The 'offset' prop can be used to position the keytip a set distance from the top-left corner of the element.
   </p>
   <button
-    aria-describedby=" ktp-layer-id ktp-0-0"
+    aria-describedby="ktp-layer-id ktp-0-0"
     className=
         ms-Button
         ms-Button--default
@@ -1069,7 +1069,7 @@ exports[`Component Examples renders Keytips.Button.Example.tsx correctly 1`] = `
     </div>
   </div>
   <button
-    aria-describedby=" ktp-layer-id ktp-0-1"
+    aria-describedby="ktp-layer-id ktp-0-1"
     className=
         ms-Button
         ms-Button--default

packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.CommandBar.Example.tsx.shot

@@ -71,7 +71,7 @@ exports[`Component Examples renders Keytips.CommandBar.Example.tsx correctly 1`]
                   }
             >
               <button
-                aria-describedby=" ktp-layer-id ktp-j"
+                aria-describedby="ktp-layer-id ktp-j"
                 className=
                     ms-Button
                     ms-Button--commandBar
@@ -230,7 +230,7 @@ exports[`Component Examples renders Keytips.CommandBar.Example.tsx correctly 1`]
                   }
             >
               <button
-                aria-describedby=" ktp-layer-id ktp-m"
+                aria-describedby="ktp-layer-id ktp-m"
                 className=
                     ms-Button
                     ms-Button--commandBar
@@ -403,7 +403,7 @@ exports[`Component Examples renders Keytips.CommandBar.Example.tsx correctly 1`]
                   }
             >
               <button
-                aria-describedby=" ktp-layer-id ktp-l-k"
+                aria-describedby="ktp-layer-id ktp-l-k"
                 aria-expanded={false}
                 aria-haspopup={true}
                 aria-owns={null}

packages/office-ui-fabric-react/src/components/__snapshots__/Keytips.Overflow.Example.tsx.shot

@@ -30,7 +30,7 @@ exports[`Component Examples renders Keytips.Overflow.Example.tsx correctly 1`] =
           }
     >
       <button
-        aria-describedby=" ktp-layer-id ktp-q"
+        aria-describedby="ktp-layer-id ktp-q"
         className=
             ms-Button
             ms-Button--commandBar
@@ -158,7 +158,7 @@ exports[`Component Examples renders Keytips.Overflow.Example.tsx correctly 1`] =
           }
     >
       <button
-        aria-describedby=" ktp-layer-id ktp-w"
+        aria-describedby="ktp-layer-id ktp-w"
         className=
             ms-Button
             ms-Button--commandBar
@@ -286,7 +286,7 @@ exports[`Component Examples renders Keytips.Overflow.Example.tsx correctly 1`] =
           }
     >
       <button
-        aria-describedby=" ktp-layer-id ktp-e"
+        aria-describedby="ktp-layer-id ktp-e"
         className=
             ms-Button
             ms-Button--commandBar
@@ -414,7 +414,7 @@ exports[`Component Examples renders Keytips.Overflow.Example.tsx correctly 1`] =
           }
     >
       <button
-        aria-describedby=" ktp-layer-id ktp-r"
+        aria-describedby="ktp-layer-id ktp-r"
         aria-expanded={false}
         aria-haspopup={true}
         aria-owns={null}

packages/utilities/src/aria.test.ts

@@ -85,7 +85,7 @@ describe('aria utils tests', () => {
           },
           {
             args: ['', 'arg1 ', 'arg2 '],
-            expected: 'arg1 arg2 '
+            expected: 'arg1 arg2'
           }
         ]
       }

packages/utilities/src/aria.ts

@@ -7,6 +7,9 @@
  * @param ariaAttributes - ARIA attributes to merge
  */
 export function mergeAriaAttributeValues(...ariaAttributes: (string | undefined)[]): string | undefined {
-  const mergedAttribute = ariaAttributes.filter((arg: string | undefined) => arg !== undefined && arg !== null).join('');
+  const mergedAttribute = ariaAttributes
+    .filter((arg: string | undefined) => arg !== undefined && arg !== null)
+    .join('')
+    .trim();
   return mergedAttribute === '' ? undefined : mergedAttribute;
 }