Pickers: Improving picker tag selection accessibility

change/@fluentui-react-39740eb8-4b3a-42eb-8c4c-6938f59d123e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Accessibility update for picker selected item semantics and focus behavior\"",
+  "packageName": "@fluentui/react",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-examples-43ed2ad1-99ec-4200-a9c8-b4ee31b5e0c8.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Update picker examples with labels\"",
+  "packageName": "@fluentui/react-examples",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-examples/src/react/Announced/Announced.SearchResults.Example.tsx

@@ -65,6 +65,8 @@ export const AnnouncedSearchResultsExample: React.FunctionComponent = () => {
       </Text>
       {hasFilterText && <Announced message={`${suggestionCount} color tag${suggestionCount === 1 ? '' : 's'} found`} />}
       <TagPicker
+        removeButtonAriaLabel="Remove"
+        selectionAriaLabel="Selected colors"
         onResolveSuggestions={onFilterChanged}
         getTextFromItem={getTextFromItem}
         pickerSuggestionsProps={pickerSuggestionsProps}

packages/react-examples/src/react/PeoplePicker/PeoplePicker.Compact.Example.tsx

@@ -96,6 +96,8 @@ export const PeoplePickerCompactExample: React.FunctionComponent = () => {
         onEmptyInputFocus={returnMostRecentlyUsed}
         getTextFromItem={getTextFromItem}
         pickerSuggestionsProps={suggestionProps}
+        selectionAriaLabel={'Selected contacts'}
+        removeButtonAriaLabel={'Remove'}
         className={'ms-PeoplePicker'}
         // eslint-disable-next-line react/jsx-no-bind
         onRemoveSuggestion={onRemoveSuggestion}

packages/react-examples/src/react/PeoplePicker/PeoplePicker.Controlled.Example.tsx

@@ -89,12 +89,15 @@ export const PeoplePickerControlledExample: React.FunctionComponent = () => {
           pickerSuggestionsProps={suggestionProps}
           className={'ms-PeoplePicker'}
           key={'controlled'}
+          selectionAriaLabel={'Selected contacts'}
+          removeButtonAriaLabel={'Remove'}
           selectedItems={currentSelectedItems}
           // eslint-disable-next-line react/jsx-no-bind
           onChange={onItemsChange}
           inputProps={{
             onBlur: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onBlur called'),
             onFocus: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onFocus called'),
+            'aria-label': 'Contacts',
           }}
           componentRef={picker}
           resolveDelay={300}

packages/react-examples/src/react/PeoplePicker/PeoplePicker.LimitedSearch.Example.tsx

@@ -116,6 +116,8 @@ export const PeoplePickerLimitedSearchExample: React.FunctionComponent = () => {
         className={'ms-PeoplePicker'}
         onGetMoreResults={onFilterChanged}
         pickerSuggestionsProps={limitedSearchSuggestionProps}
+        selectionAriaLabel={'Selected contacts'}
+        removeButtonAriaLabel={'Remove'}
         onRemoveSuggestion={onRemoveSuggestion}
         /* eslint-enable react/jsx-no-bind */
         inputProps={{

packages/react-examples/src/react/PeoplePicker/PeoplePicker.List.Example.tsx

@@ -98,6 +98,8 @@ export const PeoplePickerListExample: React.FunctionComponent = () => {
         className={'ms-PeoplePicker'}
         pickerSuggestionsProps={suggestionProps}
         key={'list'}
+        selectionAriaLabel={'Selected contacts'}
+        removeButtonAriaLabel={'Remove'}
         // eslint-disable-next-line react/jsx-no-bind
         onRemoveSuggestion={onRemoveSuggestion}
         onValidateInput={validateInput}

packages/react-examples/src/react/PeoplePicker/PeoplePicker.Normal.Example.tsx

@@ -101,6 +101,7 @@ export const PeoplePickerNormalExample: React.FunctionComponent = () => {
         // eslint-disable-next-line react/jsx-no-bind
         onRemoveSuggestion={onRemoveSuggestion}
         onValidateInput={validateInput}
+        selectionAriaLabel={'Selected contacts'}
         removeButtonAriaLabel={'Remove'}
         inputProps={{
           onBlur: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onBlur called'),

packages/react-examples/src/react/PeoplePicker/PeoplePicker.PreselectedItems.Example.tsx

@@ -98,6 +98,8 @@ export const PeoplePickerPreselectedItemsExample: React.FunctionComponent = () =
         className={'ms-PeoplePicker'}
         defaultSelectedItems={peopleList.slice(0, 3)}
         key={'list'}
+        selectionAriaLabel={'Selected contacts'}
+        removeButtonAriaLabel={'Remove'}
         pickerSuggestionsProps={suggestionProps}
         // eslint-disable-next-line react/jsx-no-bind
         onRemoveSuggestion={onRemoveSuggestion}

packages/react-examples/src/react/PeoplePicker/PeoplePicker.ProcessSelection.Example.tsx

@@ -100,6 +100,7 @@ export const PeoplePickerProcessSelectionExample: React.FunctionComponent = () =
         // eslint-disable-next-line react/jsx-no-bind
         onRemoveSuggestion={onRemoveSuggestion}
         onValidateInput={validateInput}
+        selectionAriaLabel={'Selected contacts'}
         removeButtonAriaLabel={'Remove'}
         onItemSelected={onItemSelected}
         inputProps={{

packages/react-examples/src/react/Pickers/Picker.CustomResult.Example.tsx

@@ -384,6 +384,8 @@ export const PickerCustomResultExample: React.FunctionComponent = () => {
         onRenderItem={SelectedDocumentItem}
         getTextFromItem={getTextFromItem}
         pickerSuggestionsProps={pickerSuggestionsProps}
+        selectionAriaLabel="Selected documents"
+        selectionRole="group"
         disabled={isPickerDisabled}
         inputProps={inputProps}
       />

packages/react-examples/src/react/Pickers/TagPicker.Basic.Example.tsx

@@ -85,6 +85,7 @@ export const TagPickerBasicExample: React.FunctionComponent = () => {
       </label>
       <TagPicker
         removeButtonAriaLabel="Remove"
+        selectionAriaLabel="Selected colors"
         onResolveSuggestions={filterSuggestedTags}
         getTextFromItem={getTextFromItem}
         pickerSuggestionsProps={pickerSuggestionsProps}
@@ -101,6 +102,7 @@ export const TagPickerBasicExample: React.FunctionComponent = () => {
       </label>
       <TagPicker
         removeButtonAriaLabel="Remove"
+        selectionAriaLabel="Selected colors"
         componentRef={picker}
         onResolveSuggestions={filterSelectedTags}
         onItemSelected={onItemSelected}

packages/react-examples/src/react/__snapshots__/Announced.SearchResults.Example.tsx.shot

@@ -42,102 +42,97 @@ exports[`Component Examples renders Announced.SearchResults.Example.tsx correctl
   <div
     className="ms-BasePicker"
     onBlur={[Function]}
+    onFocus={[Function]}
     onKeyDown={[Function]}
   >
+    <span
+      hidden={true}
+      id="selected-items-id__0-label"
+    >
+      Selected colors
+    </span>
     <div
-      className=
-          ms-FocusZone
-          &:focus {
-            outline: none;
-          }
-      data-focuszone-id="FocusZone1"
-      onFocus={[Function]}
+      className="ms-SelectionZone"
+      onClick={[Function]}
+      onContextMenu={[Function]}
+      onDoubleClick={[Function]}
+      onFocusCapture={[Function]}
       onKeyDown={[Function]}
+      onKeyDownCapture={[Function]}
+      onMouseDown={[Function]}
       onMouseDownCapture={[Function]}
+      role="presentation"
     >
       <div
-        className="ms-SelectionZone"
-        onClick={[Function]}
-        onContextMenu={[Function]}
-        onDoubleClick={[Function]}
-        onFocusCapture={[Function]}
-        onKeyDown={[Function]}
-        onKeyDownCapture={[Function]}
-        onMouseDown={[Function]}
-        onMouseDownCapture={[Function]}
-        role="presentation"
+        className=
+            ms-BasePicker-text
+            {
+              align-items: center;
+              border-radius: 2px;
+              border: 1px solid #605e5c;
+              box-sizing: border-box;
+              display: flex;
+              flex-wrap: wrap;
+              min-height: 30px;
+              min-width: 180px;
+              position: relative;
+            }
+            &:hover {
+              border-color: #323130;
+            }
       >
-        <div
+        <input
+          aria-autocomplete="both"
+          aria-controls=""
+          aria-expanded={false}
+          aria-haspopup="listbox"
+          aria-label="Tag Picker"
+          autoCapitalize="off"
+          autoComplete="off"
           className=
-              ms-BasePicker-text
+              ms-BasePicker-input
               {
-                align-items: center;
+                -moz-osx-font-smoothing: grayscale;
+                -webkit-font-smoothing: antialiased;
+                align-self: flex-end;
+                background-color: transparent;
                 border-radius: 2px;
-                border: 1px solid #605e5c;
-                box-sizing: border-box;
-                display: flex;
-                flex-wrap: wrap;
-                min-height: 30px;
-                min-width: 180px;
-                position: relative;
-              }
-              &:hover {
-                border-color: #323130;
+                border: none;
+                color: #323130;
+                flex-grow: 1;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-size: 14px;
+                font-weight: 400;
+                height: 30px;
+                outline: none;
+                padding-bottom: 0;
+                padding-left: 6px;
+                padding-right: 6px;
+                padding-top: 0;
               }
-        >
-          <input
-            aria-autocomplete="both"
-            aria-controls=""
-            aria-expanded={false}
-            aria-haspopup="listbox"
-            aria-label="Tag Picker"
-            autoCapitalize="off"
-            autoComplete="off"
-            className=
-                ms-BasePicker-input
-                {
-                  -moz-osx-font-smoothing: grayscale;
-                  -webkit-font-smoothing: antialiased;
-                  align-self: flex-end;
-                  background-color: transparent;
-                  border-radius: 2px;
-                  border: none;
-                  color: #323130;
-                  flex-grow: 1;
-                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-                  font-size: 14px;
-                  font-weight: 400;
-                  height: 30px;
-                  outline: none;
-                  padding-bottom: 0;
-                  padding-left: 6px;
-                  padding-right: 6px;
-                  padding-top: 0;
-                }
-                &::-ms-clear {
-                  display: none;
-                }
-            data-lpignore={true}
-            id="combobox-id__0"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onClick={[Function]}
-            onCompositionEnd={[Function]}
-            onCompositionStart={[Function]}
-            onCompositionUpdate={[Function]}
-            onFocus={[Function]}
-            onInput={[Function]}
-            onKeyDown={[Function]}
-            role="combobox"
-            spellCheck={false}
-            style={
-              Object {
-                "fontFamily": "inherit",
+              &::-ms-clear {
+                display: none;
               }
+          data-lpignore={true}
+          id="combobox-id__0"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onClick={[Function]}
+          onCompositionEnd={[Function]}
+          onCompositionStart={[Function]}
+          onCompositionUpdate={[Function]}
+          onFocus={[Function]}
+          onInput={[Function]}
+          onKeyDown={[Function]}
+          role="combobox"
+          spellCheck={false}
+          style={
+            Object {
+              "fontFamily": "inherit",
             }
-            value=""
-          />
-        </div>
+          }
+          value=""
+        />
       </div>
     </div>
   </div>