Combo Box - Adding title and Improved aria-activedescendant for accessibility

common/changes/office-ui-fabric-react/chiechan-checkboxAcc_2018-01-17-19-40.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Combox box: added accessibility changes added a title and changed activedescendant to use focused element",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "chiechan@microsoft.com"
+}

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

@@ -295,7 +295,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     return (
       <div {...divProps } ref='root' className={ this._classNames.container }>
         { label && (
-          <Label id={ id + '-label' } disabled={ disabled } required={ required } htmlFor={ id } className={ this._classNames.label }>{ label }</Label>
+          <Label id={ id + '-label' } disabled={ disabled } required={ required } htmlFor={ id + '-input' } className={ this._classNames.label }>{ label }</Label>
         ) }
         <div
           ref={ this._resolveRef('_comboBoxWrapper') }
@@ -315,21 +315,22 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
             onClick={ this._onBaseAutofillClick }
             onInputValueChange={ this._onInputChange }
             aria-expanded={ isOpen }
-            aria-autocomplete={ (!disabled && autoComplete === 'on') }
+            aria-autocomplete={ this._getAriaAutoCompleteValue() }
             role='combobox'
             aria-readonly={ ((allowFreeform || disabled) ? null : 'true') }
             readOnly={ disabled || !allowFreeform }
             aria-labelledby={ (label && (id + '-label')) }
             aria-label={ ((ariaLabel && !label) && ariaLabel) }
             aria-describedby={ (id + '-option') }
-            aria-activedescendant={ (isOpen && (selectedIndex as number) >= 0 ? (id + '-list' + selectedIndex) : null) }
+            aria-activedescendant={ this._getAriaActiveDescentValue() }
             aria-disabled={ disabled }
             aria-owns={ (id + '-list') }
             spellCheck={ false }
             defaultVisibleValue={ this._currentVisibleValue }
             suggestedDisplayValue={ suggestedDisplayValue }
             updateValueInWillReceiveProps={ this._onUpdateValueInAutoFillWillReceiveProps }
             shouldSelectFullInputValueInComponentDidUpdate={ this._onShouldSelectFullInputValueInAutoFillComponentDidUpdate }
+            title={ this._getTitle() }
           />
           <IconButton
             className={ 'ms-ComboBox-CaretDown-button' }
@@ -1540,4 +1541,46 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
 
     return getOptionStyles(this.props.theme!, customStylesForAllOptions, customStylesForCurrentOption);
   }
+
+  /**
+   * Get the aria-activedescendant value for the comboxbox.
+   * @returns the id of the current focused combo item, otherwise the id of the currently selected element, null otherwise
+   */
+  private _getAriaActiveDescentValue(): string | null {
+    let descendantText = (this.state.isOpen && (this.state.selectedIndex as number) >= 0 ? (this._id + '-list' + this.state.selectedIndex) : null);
+    if (this.state.isOpen && this.state.focused && this.state.currentPendingValueValidIndex !== -1) {
+      descendantText = (this._id + '-list' + this.state.currentPendingValueValidIndex);
+    }
+    return descendantText;
+  }
+
+  /**
+  * Get the aria autocomplete value for the Combobox
+  * @returns 'inline' if auto-complete automatically dynamic, 'both' if we have a list of possible values to pick from and can
+  * dynamically populate input, and 'none' if auto-complete is not enabled as we can't give user inputs.
+  */
+  private _getAriaAutoCompleteValue(): string {
+    let autoComplete = !this.props.disabled && this.props.autoComplete === 'on';
+    return autoComplete ? (this.props.allowFreeform ? 'inline' : 'both') : 'none';
+  }
+
+  /**
+   * Get the string we would use for the title.
+   * @returns in order of priority:
+   * 1. The provided title
+   * 2. The label value that will be used by aria-labelled
+   * 3. The aria-label value
+   * 4. Else empty string
+   */
+  private _getTitle(): string {
+    let title = '';
+    if (this.props.title) {
+      title = this.props.title;
+    } else if (this.props.label) {
+      title = this.props.label;
+    } else if (this.props.ariaLabel) {
+      title = this.props.ariaLabel;
+    }
+    return title;
+  }
 }

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

@@ -71,7 +71,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
   >
     <input
       aria-activedescendant={null}
-      aria-autocomplete={true}
+      aria-autocomplete="both"
       aria-describedby="ComboBox0-option"
       aria-disabled={undefined}
       aria-expanded={false}
@@ -112,6 +112,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
       readOnly={true}
       role="combobox"
       spellCheck={false}
+      title=""
       type="text"
       value=""
     />