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

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;
@@ -10516,6 +10517,7 @@ interface ISpinButton {
 
 // @public (undocumented)
 interface ISpinButtonProps {
+  ariaDescribedBy?: string;
   ariaLabel?: string;
   ariaPositionInSet?: number;
   ariaSetSize?: number;

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).toContain(customId);
+  });
 });

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/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).toContain(customId);
+  });
 });

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