diff --git a/common/changes/office-ui-fabric-react/rebeba-suggestions-alert_2018-05-03-22-40.json b/common/changes/office-ui-fabric-react/rebeba-suggestions-alert_2018-05-03-22-40.json new file mode 100644 index 0000000000000..fc7f93cbad38b --- /dev/null +++ b/common/changes/office-ui-fabric-react/rebeba-suggestions-alert_2018-05-03-22-40.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Puts additional alert on selected suggestions behind a prop", + "type": "minor" + } + ], + "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 120de802b6286..4fbf43e2458d6 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx @@ -175,10 +175,15 @@ export class BasePicker> extends BaseComponent< } = this.props; 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; + let selectedSuggestionAlert = undefined; + if (this.props.enableSelectedSuggestionAlert) { + const selectedSuggestion = currentIndex > -1 ? this.suggestionStore.getSuggestionAtIndex(this.suggestionStore.currentIndex) : undefined; + const selectedSuggestionAlertText = selectedSuggestion ? selectedSuggestion.ariaLabel : undefined; + selectedSuggestionAlert = (); + } + return (
> extends BaseComponent< direction={ FocusZoneDirection.bidirectional } isInnerZoneKeystroke={ this._isFocusZoneInnerKeystroke } > - + { selectedSuggestionAlert }
{ this.renderItems() } diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts index bd30168ae581c..82439afa06add 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts @@ -135,6 +135,13 @@ export interface IBasePickerProps extends React.Props { * A callback to override the default behavior of adding the selected suggestion on dismiss. */ onDismiss?: (ev?: any, selectedItem?: T) => void; + /** + * Adds an additional alert for the currently selected suggestion. This prop should be set to true for IE11 and below, as it + * enables proper screen reader behavior for each suggestion (since aria-activedescendant does not work with IE11). + * It should not be set for modern browsers (Edge, Chrome). + * @default false + */ + enableSelectedSuggestionAlert?: boolean; } export interface IBasePickerSuggestionsProps { 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 e3b67d766656c..63f43a9fb4f34 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 @@ -193,13 +193,16 @@ export class Suggestions extends BaseComponent, ISuggest { footerTitle(this.props) }
) : (null) } - { (!isLoading && !isSearching && suggestions && suggestions.length > 0 && suggestionsAvailableAlertText) ? + { ( - { suggestionsAvailableAlertText } - ) : (null) + { (!isLoading && !isSearching && suggestions && suggestions.length > 0 && suggestionsAvailableAlertText) ? + suggestionsAvailableAlertText : null + } + ) }
); diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap index 8693ae6338103..6747509a28ecd 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/__snapshots__/Suggestions.test.tsx.snap @@ -1601,6 +1601,11 @@ exports[`Suggestions renders a list properly 1`] = ` + `; @@ -3205,5 +3210,10 @@ exports[`Suggestions scrolls to selected index properly 1`] = ` + `; 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 999cb7667e9d9..8d67968f45ebc 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 @@ -15,14 +15,6 @@ exports[`Pickers BasePicker renders BasePicker correctly 1`] = ` onMouseDownCapture={[Function]} role="presentation" > -
-