diff --git a/common/changes/office-ui-fabric-react/chiechan-checkboxAcc_2018-01-17-19-40.json b/common/changes/office-ui-fabric-react/chiechan-checkboxAcc_2018-01-17-19-40.json new file mode 100644 index 00000000000000..b0685324f8ef1e --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index 22d0875891a1f0..7f3d9dea9c3ab9 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -273,6 +273,7 @@ export class ComboBox extends BaseComponent { buttonIconProps, styles: customStyles, theme, + title } = this.props; let { isOpen, selectedIndex, focused, suggestedDisplayValue } = this.state; this._currentVisibleValue = this._getVisibleValue(); @@ -295,7 +296,7 @@ export class ComboBox extends BaseComponent { return (
{ label && ( - + ) }
{ 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 } @@ -330,6 +331,7 @@ export class ComboBox extends BaseComponent { suggestedDisplayValue={ suggestedDisplayValue } updateValueInWillReceiveProps={ this._onUpdateValueInAutoFillWillReceiveProps } shouldSelectFullInputValueInComponentDidUpdate={ this._onShouldSelectFullInputValueInAutoFillComponentDidUpdate } + title={ title } /> { 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'; + } } diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap index c3fb997882aeee..bc866d0bab9dbb 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap @@ -71,7 +71,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = ` >