Fixes suggestions not being read out in IE

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": "[email protected]"
+}

packages/office-ui-fabric-react/src/components/pickers/BasePicker.scss

@@ -26,3 +26,7 @@
   padding: 0 6px 0px;
   margin: 1px;
 }
+
+.screenReaderOnly {
+  @include ms-screenReaderOnly;
+}

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;

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 }

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;
   }