diff --git a/common/changes/office-ui-fabric-react/rebeba-aria-owns-invalid_2018-04-13-21-39.json b/common/changes/office-ui-fabric-react/rebeba-aria-owns-invalid_2018-04-13-21-39.json new file mode 100644 index 00000000000000..d668487332ce25 --- /dev/null +++ b/common/changes/office-ui-fabric-react/rebeba-aria-owns-invalid_2018-04-13-21-39.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Updates aria-owns on BasePicker (and snapshot tests) so its only set when suggestions are rendered", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "rebeba@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 271599cfc9c4ef..1a8956f3a3b486 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx @@ -205,7 +205,7 @@ export class BasePicker> extends BaseComponent< onInputValueChange={ this.onInputChange } suggestedDisplayValue={ suggestedDisplayValue } aria-activedescendant={ activeDescendant } - aria-owns='suggestion-list' + aria-owns={ this.state.suggestionsVisible ? 'suggestion-list' : undefined } aria-expanded={ !!this.state.suggestionsVisible } aria-haspopup='true' autoCapitalize='off' @@ -745,8 +745,8 @@ export class BasePickerListBelow> extends BaseP onBlur={ this.onInputBlur } onInputValueChange={ this.onInputChange } suggestedDisplayValue={ suggestedDisplayValue } - aria-activedescendant={ 'sug-' + this.suggestionStore.currentIndex } - aria-owns='suggestion-list' + aria-activedescendant={ this.state.suggestionsVisible ? 'sug-' + this.suggestionStore.currentIndex : undefined } + aria-owns={ this.state.suggestionsVisible ? 'suggestion-list' : undefined } aria-expanded={ !!this.state.suggestionsVisible } aria-haspopup='true' autoCapitalize='off' 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 6ba81af3ad968b..5e99c63948b9db 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 @@ -45,7 +45,7 @@ exports[`Pickers BasePicker renders BasePicker correctly 1`] = ` aria-controls="selected-suggestion-alert" aria-expanded={false} aria-haspopup="true" - aria-owns="suggestion-list" + aria-owns={undefined} autoCapitalize="off" autoComplete="off" className="ms-BasePicker-input" @@ -113,7 +113,7 @@ exports[`Pickers TagPicker renders TagPicker correctly 1`] = ` aria-controls="selected-suggestion-alert" aria-expanded={false} aria-haspopup="true" - aria-owns="suggestion-list" + aria-owns={undefined} autoCapitalize="off" autoComplete="off" className="ms-BasePicker-input"