From 03a0e2017803519512de05127f7e78541191d6cb Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 6 Apr 2021 03:47:14 -0700 Subject: [PATCH 1/9] remove picker focuszone, fix selection naming --- .../PeoplePicker.Compact.Example.tsx | 2 + .../Pickers/Picker.CustomResult.Example.tsx | 2 + packages/react/etc/react.api.md | 2 + .../src/components/pickers/BasePicker.tsx | 107 +++++++++--------- .../components/pickers/BasePicker.types.ts | 14 +++ .../PeoplePickerItems/PeoplePickerItem.tsx | 12 +- .../components/pickers/TagPicker/TagItem.tsx | 28 +++-- 7 files changed, 97 insertions(+), 70 deletions(-) diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Compact.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Compact.Example.tsx index a24bd2e3a6440e..f2e0dea1b946b1 100644 --- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Compact.Example.tsx +++ b/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} diff --git a/packages/react-examples/src/react/Pickers/Picker.CustomResult.Example.tsx b/packages/react-examples/src/react/Pickers/Picker.CustomResult.Example.tsx index e310be807d2376..8794f36ca46b46 100644 --- a/packages/react-examples/src/react/Pickers/Picker.CustomResult.Example.tsx +++ b/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} /> diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md index 95e8234b83bac4..5e090898f6d024 100644 --- a/packages/react/etc/react.api.md +++ b/packages/react/etc/react.api.md @@ -1587,6 +1587,8 @@ export interface IBasePickerProps extends React.Props { input: string; }) => string) | string; selectedItems?: T[]; + selectionAriaLabel?: string; + selectionRole?: string; styles?: IStyleFunctionOrObject; theme?: ITheme; } diff --git a/packages/react/src/components/pickers/BasePicker.tsx b/packages/react/src/components/pickers/BasePicker.tsx index ffd04593e156ec..040e6a6a5c5ea7 100644 --- a/packages/react/src/components/pickers/BasePicker.tsx +++ b/packages/react/src/components/pickers/BasePicker.tsx @@ -10,7 +10,7 @@ import { initializeComponentRef, } from '../../Utilities'; import { IProcessedStyleSet } from '../../Styling'; -import { IFocusZone, FocusZone, FocusZoneDirection } from '../../FocusZone'; +import { IFocusZone } from '../../FocusZone'; import { Callout } from '../../Callout'; import { Selection, SelectionZone, SelectionMode } from '../../utilities/selection/index'; import { DirectionalHint } from '../../common/DirectionalHint'; @@ -179,8 +179,8 @@ export class BasePicker> extends React.Componen } public focus() { - if (this.focusZone.current) { - this.focusZone.current.focus(); + if (this.input.current) { + this.input.current.focus(); } } @@ -243,7 +243,7 @@ export class BasePicker> extends React.Componen public render(): JSX.Element { const { suggestedDisplayValue, isFocused, items } = this.state; - const { className, inputProps, disabled, theme, styles } = this.props; + const { className, inputProps, disabled, selectionAriaLabel, selectionRole = 'list', theme, styles } = this.props; const suggestionsAvailable = this.state.suggestionsVisible ? this._ariaMap.suggestionList : ''; // TODO // Clean this up by leaving only the first part after removing support for SASS. @@ -270,47 +270,48 @@ export class BasePicker> extends React.Componen screenReaderText: legacyStyles.screenReaderOnly, }; + const comboLabel = this.props['aria-label'] || inputProps?.['aria-label']; + return (
- - {this.getSuggestionsAlert(classNames.screenReaderText)} - -
- {items.length > 0 && ( - - {this.renderItems()} - - )} - {this.canAddItems() && ( - 0 ? this._ariaMap.selectedItems : undefined} - aria-expanded={!!this.state.suggestionsVisible} - aria-haspopup="listbox" - aria-label={this.props['aria-label'] || inputProps?.['aria-label']} - role="combobox" - disabled={disabled} - onInputChange={this.props.onInputChange} - /> - )} -
- - + {this.getSuggestionsAlert(classNames.screenReaderText)} + +
+ {items.length > 0 && ( + + {this.renderItems()} + + )} + {this.canAddItems() && ( + 0 ? this._ariaMap.selectedItems : undefined} + aria-expanded={!!this.state.suggestionsVisible} + aria-haspopup="listbox" + aria-label={comboLabel} + role="combobox" + disabled={disabled} + onInputChange={this.props.onInputChange} + /> + )} +
+ {this.renderSuggestions()}
); @@ -987,7 +988,7 @@ export class BasePicker> extends React.Componen export class BasePickerListBelow> extends BasePicker { public render(): JSX.Element { const { suggestedDisplayValue, isFocused } = this.state; - const { className, inputProps, disabled, theme, styles } = this.props; + const { className, inputProps, disabled, selectionAriaLabel, selectionRole = 'list', theme, styles } = this.props; const suggestionsAvailable: string | undefined = this.state.suggestionsVisible ? this._ariaMap.suggestionList : ''; // TODO @@ -1018,6 +1019,9 @@ export class BasePickerListBelow> extends BaseP input: css('ms-BasePicker-input', legacyStyles.pickerInput, inputProps && inputProps.className), screenReaderText: legacyStyles.screenReaderOnly, }; + + const comboLabel = this.props['aria-label'] || inputProps?.['aria-label']; + return (
@@ -1036,7 +1040,9 @@ export class BasePickerListBelow> extends BaseP aria-controls={suggestionsAvailable || undefined} aria-expanded={!!this.state.suggestionsVisible} aria-haspopup="listbox" + aria-label={comboLabel} role="combobox" + id={inputProps?.id ? inputProps.id : this._ariaMap.combobox} disabled={disabled} onInputChange={this.props.onInputChange} /> @@ -1044,17 +1050,14 @@ export class BasePickerListBelow> extends BaseP
{this.renderSuggestions()} - {this.renderItems()} - +
); diff --git a/packages/react/src/components/pickers/BasePicker.types.ts b/packages/react/src/components/pickers/BasePicker.types.ts index 8675614050a0cc..7c938fa3460df7 100644 --- a/packages/react/src/components/pickers/BasePicker.types.ts +++ b/packages/react/src/components/pickers/BasePicker.types.ts @@ -192,6 +192,20 @@ export interface IBasePickerProps extends React.Props { */ selectedItems?: T[]; + /** + * Aria label for the displayed selection. A good value would be something like "Selected Contacts" + * @defaultvalue '' + */ + selectionAriaLabel?: string; + + /** + * Override the role used for the element containing selected items. + * Update this if onRenderItem does not return elements with role="listitem". + * A good alternative would be 'group'. + * @defaultvalue 'list' + */ + selectionRole?: string; + /** * A callback used to modify the input string. */ diff --git a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.tsx b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.tsx index 9dfcfc927f3e9a..996b536d7947c1 100644 --- a/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.tsx +++ b/packages/react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.tsx @@ -42,23 +42,19 @@ export const PeoplePickerItemBase = (props: IPeoplePickerItemSelectedProps) => { : undefined; return ( -
+
); diff --git a/packages/react/src/components/pickers/TagPicker/TagItem.tsx b/packages/react/src/components/pickers/TagPicker/TagItem.tsx index 13d3fbd81a3320..b4dceaf4be5021 100644 --- a/packages/react/src/components/pickers/TagPicker/TagItem.tsx +++ b/packages/react/src/components/pickers/TagPicker/TagItem.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { styled, classNamesFunction } from '../../../Utilities'; +import { getId, styled, classNamesFunction } from '../../../Utilities'; import { IconButton } from '../../../Button'; import { ITagItemProps, ITagItemStyleProps, ITagItemStyles } from './TagPicker.types'; @@ -33,23 +33,31 @@ export const TagItemBase = (props: ITagItemProps) => { disabled, }); + const itemId = getId(); + + const disabledAttrs = enableTagFocusInDisabledPicker + ? { + 'aria-disabled': disabled, + tabindex: 0, + } + : { + disabled: disabled, + }; + return ( -
- +
+ {children}
); From 5124cb77f324c08f733c592878cac257b19af274 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 6 Apr 2021 09:55:23 -0700 Subject: [PATCH 2/9] update example labels and fix lost focus --- .../PeoplePicker.Controlled.Example.tsx | 3 +++ .../PeoplePicker.LimitedSearch.Example.tsx | 2 ++ .../PeoplePicker/PeoplePicker.List.Example.tsx | 2 ++ .../PeoplePicker.Normal.Example.tsx | 1 + .../PeoplePicker.PreselectedItems.Example.tsx | 2 ++ .../PeoplePicker.ProcessSelection.Example.tsx | 1 + .../react/Pickers/TagPicker.Basic.Example.tsx | 2 ++ .../src/components/pickers/BasePicker.tsx | 18 +++++++++++++----- 8 files changed, 26 insertions(+), 5 deletions(-) diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Controlled.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Controlled.Example.tsx index f30ed3d68c66dd..a7e30c6b21f88a 100644 --- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Controlled.Example.tsx +++ b/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) => console.log('onBlur called'), onFocus: (ev: React.FocusEvent) => console.log('onFocus called'), + 'aria-label': 'Contacts', }} componentRef={picker} resolveDelay={300} diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.LimitedSearch.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.LimitedSearch.Example.tsx index 7493ab455af002..1b33f9d6fbbb5e 100644 --- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.LimitedSearch.Example.tsx +++ b/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={{ diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.List.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.List.Example.tsx index 30ca271e4bce38..845e4c886abc39 100644 --- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.List.Example.tsx +++ b/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} diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Normal.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Normal.Example.tsx index c07a04e85e3f7d..b606191b599c82 100644 --- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Normal.Example.tsx +++ b/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) => console.log('onBlur called'), diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.PreselectedItems.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.PreselectedItems.Example.tsx index c1b7b2260eb018..e2cdce009be622 100644 --- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.PreselectedItems.Example.tsx +++ b/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} diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.ProcessSelection.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.ProcessSelection.Example.tsx index e3fa60d7af81e6..5c5e65aeb2bf2e 100644 --- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.ProcessSelection.Example.tsx +++ b/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={{ diff --git a/packages/react-examples/src/react/Pickers/TagPicker.Basic.Example.tsx b/packages/react-examples/src/react/Pickers/TagPicker.Basic.Example.tsx index 9e7952deadf724..1ea82ddbb08f8c 100644 --- a/packages/react-examples/src/react/Pickers/TagPicker.Basic.Example.tsx +++ b/packages/react-examples/src/react/Pickers/TagPicker.Basic.Example.tsx @@ -85,6 +85,7 @@ export const TagPickerBasicExample: React.FunctionComponent = () => { { > extends React.Componen // Refs protected root = React.createRef(); protected input = React.createRef(); - protected focusZone = React.createRef(); protected suggestionElement = React.createRef>(); protected selection: Selection; @@ -167,6 +165,10 @@ export class BasePicker> extends React.Componen this.selection.setIndexSelected(currentSelectedIndex, false, true); this.resetFocus(currentSelectedIndex); } + // Reset focus to last item if the input is removed + else if (this.state.items.length > oldState.items.length && !this.canAddItems()) { + this.resetFocus(this.state.items.length - 1); + } } } } @@ -275,6 +277,9 @@ export class BasePicker> extends React.Componen return (
{this.getSuggestionsAlert(classNames.screenReaderText)} +
{items.length > 0 && ( @@ -282,7 +287,7 @@ export class BasePicker> extends React.Componen id={this._ariaMap.selectedItems} className={classNames.itemsWrapper} role={selectionRole} - aria-label={selectionAriaLabel || comboLabel} + aria-labelledby={`${this._ariaMap.selectedItems}-label`} > {this.renderItems()} @@ -387,8 +392,8 @@ export class BasePicker> extends React.Componen (this.root.current.querySelectorAll('[data-selection-index]')[ Math.min(index!, items.length - 1) ] as HTMLElement | null); - if (newEl && this.focusZone.current) { - this.focusZone.current.focusElement(newEl); + if (newEl) { + newEl.focus(); } } else if (!this.canAddItems()) { this.resetFocus(items.length - 1); @@ -827,6 +832,9 @@ export class BasePicker> extends React.Componen } } + /** + * @deprecated this is no longer necessary as focuszone has been removed + */ protected _shouldFocusZoneEnterInnerZone = (ev: React.KeyboardEvent): boolean => { // If suggestions are shown const up/down keys control them, otherwise allow them through to control the focusZone. if (this.state.suggestionsVisible) { From 9840c6f8c0a02cb35e8189ed55de45fb60af2a31 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Tue, 6 Apr 2021 10:13:01 -0700 Subject: [PATCH 3/9] add comment explanation for suggestions name --- packages/react/src/components/pickers/BasePicker.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react/src/components/pickers/BasePicker.tsx b/packages/react/src/components/pickers/BasePicker.tsx index e59c58749a5077..b86f9545b7eb0d 100644 --- a/packages/react/src/components/pickers/BasePicker.tsx +++ b/packages/react/src/components/pickers/BasePicker.tsx @@ -274,6 +274,10 @@ export class BasePicker> extends React.Componen const comboLabel = this.props['aria-label'] || inputProps?.['aria-label']; + // selectionAriaLabel is contained in a separate rather than an aria-label on the items list + // because if the items list has an aria-label, the aria-describedby on the input will only read + // that label instead of all the selected items. Using aria-labelledby instead fixes this, since + // aria-describedby and aria-labelledby will not follow a second aria-labelledby return (
{this.getSuggestionsAlert(classNames.screenReaderText)} From a5b456ec5c4bd9d9c691bd40649d851e6bdf7b89 Mon Sep 17 00:00:00 2001 From: Sarah Higley Date: Wed, 7 Apr 2021 15:36:44 -0700 Subject: [PATCH 4/9] update tests, handle focus state when focus enters any picker item --- .../Announced.SearchResults.Example.tsx.shot | 158 +- .../PeoplePicker.Compact.Example.tsx.shot | 168 +- .../PeoplePicker.Controlled.Example.tsx.shot | 167 +- ...eoplePicker.LimitedSearch.Example.tsx.shot | 168 +- .../PeoplePicker.List.Example.tsx.shot | 21 +- .../PeoplePicker.Normal.Example.tsx.shot | 168 +- ...lePicker.PreselectedItems.Example.tsx.shot | 2341 ++++++++--------- ...lePicker.ProcessSelection.Example.tsx.shot | 168 +- .../TagPicker.Basic.Example.tsx.shot | 316 ++- packages/react/etc/react.api.md | 5 +- .../components/pickers/BasePicker.test.tsx | 87 + .../src/components/pickers/BasePicker.tsx | 18 +- .../__snapshots__/PeoplePicker.test.tsx.snap | 1054 ++++---- .../components/pickers/TagPicker/TagItem.tsx | 5 +- .../__snapshots__/TagItem.test.tsx.snap | 21 +- .../__snapshots__/TagPicker.test.tsx.snap | 970 ++++--- .../__snapshots__/BasePicker.test.tsx.snap | 180 +- 17 files changed, 3008 insertions(+), 3007 deletions(-) diff --git a/packages/react-examples/src/react/__snapshots__/Announced.SearchResults.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Announced.SearchResults.Example.tsx.shot index 3b298ac3e7d355..f9a63b4285d827 100644 --- a/packages/react-examples/src/react/__snapshots__/Announced.SearchResults.Example.tsx.shot +++ b/packages/react-examples/src/react/__snapshots__/Announced.SearchResults.Example.tsx.shot @@ -44,100 +44,94 @@ exports[`Component Examples renders Announced.SearchResults.Example.tsx correctl onBlur={[Function]} onKeyDown={[Function]} > +
-
- -
+ } + value="" + />
diff --git a/packages/react-examples/src/react/__snapshots__/PeoplePicker.Compact.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/PeoplePicker.Compact.Example.tsx.shot index b35d667731b9a5..4ad33c056268b1 100644 --- a/packages/react-examples/src/react/__snapshots__/PeoplePicker.Compact.Example.tsx.shot +++ b/packages/react-examples/src/react/__snapshots__/PeoplePicker.Compact.Example.tsx.shot @@ -7,101 +7,95 @@ exports[`Component Examples renders PeoplePicker.Compact.Example.tsx correctly 1 onBlur={[Function]} onKeyDown={[Function]} > +
-
- -
+ } + value="" + />
@@ -162,7 +156,7 @@ exports[`Component Examples renders PeoplePicker.Compact.Example.tsx correctly 1 outline: 1px solid WindowText; } data-ktp-execute-target={true} - id="checkbox-2" + id="checkbox-1" onChange={[Function]} type="checkbox" /> @@ -190,7 +184,7 @@ exports[`Component Examples renders PeoplePicker.Compact.Example.tsx correctly 1 right: 0px; top: 0px; } - htmlFor="checkbox-2" + htmlFor="checkbox-1" >
@@ -349,7 +343,7 @@ exports[`Component Examples renders PeoplePicker.Compact.Example.tsx correctly 1 right: 0px; top: 0px; } - htmlFor="checkbox-3" + htmlFor="checkbox-2" >
+
-
- -
+ } + value="" + />
@@ -2093,7 +2088,7 @@ exports[`Component Examples renders PeoplePicker.Controlled.Example.tsx correctl outline: 1px solid WindowText; } data-ktp-execute-target={true} - id="checkbox-37" + id="checkbox-36" onChange={[Function]} type="checkbox" /> @@ -2121,7 +2116,7 @@ exports[`Component Examples renders PeoplePicker.Controlled.Example.tsx correctl right: 0px; top: 0px; } - htmlFor="checkbox-37" + htmlFor="checkbox-36" >
@@ -2280,7 +2275,7 @@ exports[`Component Examples renders PeoplePicker.Controlled.Example.tsx correctl right: 0px; top: 0px; } - htmlFor="checkbox-38" + htmlFor="checkbox-37" >
+
-
- -
+ } + value="" + />
@@ -162,7 +156,7 @@ exports[`Component Examples renders PeoplePicker.LimitedSearch.Example.tsx corre outline: 1px solid WindowText; } data-ktp-execute-target={true} - id="checkbox-2" + id="checkbox-1" onChange={[Function]} type="checkbox" /> @@ -190,7 +184,7 @@ exports[`Component Examples renders PeoplePicker.LimitedSearch.Example.tsx corre right: 0px; top: 0px; } - htmlFor="checkbox-2" + htmlFor="checkbox-1" >
@@ -349,7 +343,7 @@ exports[`Component Examples renders PeoplePicker.LimitedSearch.Example.tsx corre right: 0px; top: 0px; } - htmlFor="checkbox-3" + htmlFor="checkbox-2" >