diff --git a/common/changes/office-ui-fabric-react/pickers-fix-activedescendant_2018-03-12-18-09.json b/common/changes/office-ui-fabric-react/pickers-fix-activedescendant_2018-03-12-18-09.json new file mode 100644 index 00000000000000..704daf3de6b016 --- /dev/null +++ b/common/changes/office-ui-fabric-react/pickers-fix-activedescendant_2018-03-12-18-09.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Pickers: Fix aria bug where activedescendant would be sug--1", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "joschect@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx index 241d0f9f61f2c5..5d45d58d2286d0 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx @@ -176,6 +176,7 @@ export class BasePicker> extends BaseComponent< const currentIndex = this.suggestionStore.currentIndex; const selectedSuggestion = currentIndex > -1 ? this.suggestionStore.getSuggestionAtIndex(this.suggestionStore.currentIndex) : undefined; const selectedSuggestionAlert = selectedSuggestion ? selectedSuggestion.ariaLabel : undefined; + const activeDescendant = currentIndex > -1 ? 'sug-' + currentIndex : undefined; return (
> extends BaseComponent< onBlur={ this.onInputBlur } onInputValueChange={ this.onInputChange } suggestedDisplayValue={ suggestedDisplayValue } - aria-activedescendant={ 'sug-' + this.suggestionStore.currentIndex } + aria-activedescendant={ activeDescendant } aria-owns='suggestion-list' aria-expanded={ !!this.state.suggestionsVisible } aria-haspopup='true' diff --git a/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap index 2b6940311702fc..6ed2487d4f220f 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap @@ -40,7 +40,7 @@ exports[`Pickers BasePicker renders BasePicker correctly 1`] = ` role="list" >