From 2797c1d6a2050679e08da3097ff30c7391f7b006 Mon Sep 17 00:00:00 2001 From: Rebecca Ballantyne Date: Thu, 3 May 2018 15:39:24 -0700 Subject: [PATCH 1/8] Fixes for suggestions being read twice --- .../src/components/pickers/BasePicker.tsx | 11 ++++++++--- .../src/components/pickers/BasePicker.types.ts | 6 ++++++ 2 files changed, 14 insertions(+), 3 deletions(-) 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 120de802b6286d..4fbf43e2458d63 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 bd30168ae581cd..86f5b801371069 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,12 @@ 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. It should not be set for modern browsers (Edge, Chrome). + * @default false + */ + enableSelectedSuggestionAlert?: boolean; } export interface IBasePickerSuggestionsProps { From 451279a3114e8117e72a017d8bcc9a87bf9a2b8c Mon Sep 17 00:00:00 2001 From: Rebecca Ballantyne Date: Thu, 3 May 2018 15:40:20 -0700 Subject: [PATCH 2/8] Rush change file --- .../rebeba-suggestions-alert_2018-05-03-22-40.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/rebeba-suggestions-alert_2018-05-03-22-40.json 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 00000000000000..f62f28b4992d6b --- /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": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "rebeba@microsoft.com" +} \ No newline at end of file From d88c2809b9698149044adb2add0c2865f913f19b Mon Sep 17 00:00:00 2001 From: Rebecca Ballantyne Date: Mon, 7 May 2018 14:20:58 -0700 Subject: [PATCH 3/8] Changes to minor --- .../rebeba-suggestions-alert_2018-05-03-22-40.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index f62f28b4992d6b..fc7f93cbad38b1 100644 --- 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 @@ -3,7 +3,7 @@ { "packageName": "office-ui-fabric-react", "comment": "Puts additional alert on selected suggestions behind a prop", - "type": "patch" + "type": "minor" } ], "packageName": "office-ui-fabric-react", From 083aacf97b51cbb39105ea131ec9318d09b87f95 Mon Sep 17 00:00:00 2001 From: Rebecca Ballantyne Date: Mon, 7 May 2018 17:41:47 -0700 Subject: [PATCH 4/8] Updating snapshot --- .../__snapshots__/BasePicker.test.tsx.snap | 16 ---------------- 1 file changed, 16 deletions(-) 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 999cb7667e9d9f..8d67968f45ebc3 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" > -
-
Date: Thu, 10 May 2018 11:18:10 -0700 Subject: [PATCH 5/8] Updating comment to reflect aria-activedescendant --- .../src/components/pickers/BasePicker.types.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 86f5b801371069..82439afa06addb 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 @@ -137,7 +137,8 @@ export interface IBasePickerProps extends React.Props { 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. It should not be set for modern browsers (Edge, Chrome). + * 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; From 44d046a14656e311dd4f52b223557313c5592d1f Mon Sep 17 00:00:00 2001 From: Rebecca Ballantyne Date: Thu, 10 May 2018 11:55:36 -0700 Subject: [PATCH 6/8] Making suggestions available live region, dynamically adding text when available so it reads --- .../components/pickers/Suggestions/Suggestions.tsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) 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 e3b67d766656c2..d15d964296eeaa 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,14 @@ 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 + } + ) }
); From 18e8c63e91640b8852d9cd65aae1d0f86ee1cb47 Mon Sep 17 00:00:00 2001 From: Rebecca Ballantyne Date: Thu, 10 May 2018 13:34:45 -0700 Subject: [PATCH 7/8] Updating snapshot again --- .../__snapshots__/Suggestions.test.tsx.snap | 10 ++++++++++ 1 file changed, 10 insertions(+) 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 8693ae63381035..6747509a28ecde 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`] = ` + `; From 06d93916bd734bd0522b2bac0316ccf4879bf40c Mon Sep 17 00:00:00 2001 From: Rebecca Ballantyne Date: Thu, 10 May 2018 14:20:56 -0700 Subject: [PATCH 8/8] Fixing formatting issues --- .../src/components/pickers/Suggestions/Suggestions.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 d15d964296eeaa..63f43a9fb4f345 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 @@ -194,7 +194,9 @@ export class Suggestions extends BaseComponent, ISuggest ) : (null) } { - ( { (!isLoading && !isSearching && suggestions && suggestions.length > 0 && suggestionsAvailableAlertText) ?