From 8ee30c89701000895d75c19cdd4bfe7c370630dc Mon Sep 17 00:00:00 2001
From: Joe Martella <joem@microsoft.com>
Date: Mon, 25 Sep 2017 16:06:56 -0700
Subject: [PATCH 1/3] Fixes suggestions not being read out in IE

---
 .../src/components/pickers/BasePicker.scss    |  4 +++
 .../src/components/pickers/BasePicker.tsx     | 25 ++++++++++++-------
 .../pickers/Suggestions/Suggestions.tsx       |  5 ++--
 .../Suggestions/SuggestionsController.ts      |  3 ++-
 4 files changed, 25 insertions(+), 12 deletions(-)

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<T, P extends IBasePickerProps<T>> 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 (
       <div
         ref={ this._resolveRef('root') }
@@ -155,6 +160,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
           direction={ FocusZoneDirection.bidirectional }
           isInnerZoneKeystroke={ this._isFocusZoneInnerKeystroke }
         >
+          <div className={ styles.screenReaderOnly } role='alert' id='selected-suggestion-alert' aria-live='assertive'>{ selectedSuggestionAlert } </div>
           <SelectionZone selection={ this.selection } selectionMode={ SelectionMode.multiple }>
             <div className={ css('ms-BasePicker-text', styles.pickerText) } role={ 'list' }>
               { this.renderItems() }
@@ -173,6 +179,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
                 autoComplete='off'
                 role='combobox'
                 disabled={ disabled }
+                aria-controls='selected-suggestion-alert'
               />) }
             </div>
           </SelectionZone>
@@ -421,22 +428,22 @@ export class BasePicker<T, P extends IBasePickerProps<T>> 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<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
       <div
         className={ css('ms-Suggestions-container', styles.suggestionsContainer) }
         id='suggestion-list'
-        role='menu'
+        role='list'
         aria-label={ suggestionsContainerAriaLabel }
       >
         { suggestions.map((suggestion, index) =>
@@ -195,7 +195,8 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
             // tslint:disable-next-line:no-string-literal
             key={ (suggestion.item as any)['key'] ? (suggestion.item as any)['key'] : index }
             id={ 'sug-' + index }
-            role='menuitem'
+            role='listitem'
+            aria-label={ suggestion.ariaLabel }
           >
             <TypedSuggestionsItem
               id={ 'sug-item' + index }
diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts
index f8d6ba4738a155..0379e9b041fb1f 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts
+++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts
@@ -1,6 +1,7 @@
 export interface ISuggestionModel<T> {
   item: T;
   selected: boolean;
+  ariaLabel?: string;
 }
 
 export class SuggestionsController<T> {
@@ -89,7 +90,7 @@ export class SuggestionsController<T> {
 
   public convertSuggestionsToSuggestionItems(suggestions: any[]): ISuggestionModel<T>[] {
     let converted: ISuggestionModel<T>[] = [];
-    suggestions.forEach((suggestion: any) => converted.push({ item: suggestion, selected: false }));
+    suggestions.forEach((suggestion: any) => converted.push({ item: suggestion, selected: false, ariaLabel: suggestion.name || suggestion.primaryText }));
     return converted;
   }
 

From 5bd7373c60a21dd10a9eec7aa29b5814a67b921c Mon Sep 17 00:00:00 2001
From: Joe Martella <joem@microsoft.com>
Date: Tue, 26 Sep 2017 10:17:47 -0700
Subject: [PATCH 2/3] Adds change file

---
 .../joem-suggestion-reading_2017-09-26-17-17.json     | 11 +++++++++++
 1 file changed, 11 insertions(+)
 create mode 100644 common/changes/office-ui-fabric-react/joem-suggestion-reading_2017-09-26-17-17.json

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..425caaa12e7404
--- /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": "Fixes Narrator reading of people picker suggestions",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "joem@microsoft.com"
+}
\ No newline at end of file

From d22971fa33f83884b73ee9f01e53206b3063c31d Mon Sep 17 00:00:00 2001
From: David Zearing <dzearing@microsoft.com>
Date: Tue, 26 Sep 2017 10:32:52 -0700
Subject: [PATCH 3/3] Update joem-suggestion-reading_2017-09-26-17-17.json

---
 .../joem-suggestion-reading_2017-09-26-17-17.json             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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
index 425caaa12e7404..4e1f2ad19cb00a 100644
--- 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
@@ -2,10 +2,10 @@
   "changes": [
     {
       "packageName": "office-ui-fabric-react",
-      "comment": "Fixes Narrator reading of people picker suggestions",
+      "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"
-}
\ No newline at end of file
+}