diff --git a/common/changes/office-ui-fabric-react/joem-suggestion-reading_2017-09-26-17-17.json b/common/changes/office-ui-fabric-react/joem-suggestion-reading_2017-09-26-17-17.json new file mode 100644 index 00000000000000..4e1f2ad19cb00a --- /dev/null +++ b/common/changes/office-ui-fabric-react/joem-suggestion-reading_2017-09-26-17-17.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "PeoplePicker: adjusting aria/role attributes to improve the Narrator experience when reading out suggestions.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "joem@microsoft.com" +} diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.scss b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.scss index a175b699c2dfd3..67a0129c3510e0 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.scss +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.scss @@ -26,3 +26,7 @@ padding: 0 6px 0px; margin: 1px; } + +.screenReaderOnly { + @include ms-screenReaderOnly; +} \ 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 0d573d6ade46dc..7dc82db548f428 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx @@ -142,6 +142,11 @@ export class BasePicker> extends BaseComponent< inputProps, disabled } = this.props; + + const currentIndex = this.suggestionStore.currentIndex; + const selectedSuggestion = currentIndex > -1 ? this.suggestionStore.getSuggestionAtIndex(this.suggestionStore.currentIndex) : undefined; + const selectedSuggestionAlert = selectedSuggestion ? selectedSuggestion.ariaLabel : undefined; + return (
> extends BaseComponent< direction={ FocusZoneDirection.bidirectional } isInnerZoneKeystroke={ this._isFocusZoneInnerKeystroke } > +
{ this.renderItems() } @@ -173,6 +179,7 @@ export class BasePicker> extends BaseComponent< autoComplete='off' role='combobox' disabled={ disabled } + aria-controls='selected-suggestion-alert' />) }
@@ -421,22 +428,22 @@ export class BasePicker> extends BaseComponent< case KeyCodes.backspace: if (!this.props.disabled) { - this.onBackspace(ev); + this.onBackspace(ev); } ev.stopPropagation(); break; case KeyCodes.del: if (!this.props.disabled) { - if (this.input && ev.target === this.input.inputElement && this.state.suggestionsVisible && this.suggestionStore.currentIndex !== -1) { - if (this.props.onRemoveSuggestion) { - (this.props.onRemoveSuggestion as any)(this.suggestionStore.currentSuggestion!.item); - } - this.suggestionStore.removeSuggestion(this.suggestionStore.currentIndex); - this.forceUpdate(); - } else { - this.onBackspace(ev); + if (this.input && ev.target === this.input.inputElement && this.state.suggestionsVisible && this.suggestionStore.currentIndex !== -1) { + if (this.props.onRemoveSuggestion) { + (this.props.onRemoveSuggestion as any)(this.suggestionStore.currentSuggestion!.item); } + this.suggestionStore.removeSuggestion(this.suggestionStore.currentIndex); + this.forceUpdate(); + } else { + this.onBackspace(ev); + } } ev.stopPropagation(); break; diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx index 1971e85c8a594e..b259025637259e 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx @@ -186,7 +186,7 @@ export class Suggestions extends BaseComponent, {}> {