diff --git a/change/@fluentui-react-examples-d97403f6-ce72-46ef-8858-848fbdb70f47.json b/change/@fluentui-react-examples-d97403f6-ce72-46ef-8858-848fbdb70f47.json new file mode 100644 index 00000000000000..624186229fc074 --- /dev/null +++ b/change/@fluentui-react-examples-d97403f6-ce72-46ef-8858-848fbdb70f47.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Apply picker accessibility improvement to version 7.0", + "packageName": "@fluentui/react-examples", + "email": "suti@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/office-ui-fabric-react-a2c597b5-6702-43be-b918-a20af9667b4b.json b/change/office-ui-fabric-react-a2c597b5-6702-43be-b918-a20af9667b4b.json new file mode 100644 index 00000000000000..539ed35262d507 --- /dev/null +++ b/change/office-ui-fabric-react-a2c597b5-6702-43be-b918-a20af9667b4b.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Apply picker accessibility improvement to version 7.0", + "packageName": "office-ui-fabric-react", + "email": "suti@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md index cd70fce58f9f48..3e39fb57d68ca2 100644 --- a/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md +++ b/packages/office-ui-fabric-react/etc/office-ui-fabric-react.api.md @@ -14,7 +14,6 @@ import { IComponentAs } from '@uifabric/utilities'; import { IComponentStyles } from '@uifabric/foundation'; import { ICSSPixelUnitRule } from '@uifabric/merge-styles/lib/IRawStyleBase'; import { ICSSRule } from '@uifabric/merge-styles/lib/IRawStyleBase'; -import { IFocusZone } from '@fluentui/react-focus'; import { IFocusZoneProps } from '@fluentui/react-focus'; import { IFontStyles } from '@uifabric/styling'; import { IHTMLSlot } from '@uifabric/foundation'; @@ -304,8 +303,6 @@ export class BasePicker> extends React.Componen // (undocumented) focusInput(): void; // (undocumented) - protected focusZone: React.RefObject; - // (undocumented) protected getActiveDescendant(): string | undefined; // (undocumented) static getDerivedStateFromProps(newProps: IBasePickerProps): { @@ -326,6 +323,8 @@ export class BasePicker> extends React.Componen protected onClick: (ev: React.MouseEvent) => void; protected onEmptyInputFocus(): void; // (undocumented) + protected onFocus: () => void; + // (undocumented) protected onGetMoreResults: () => void; // (undocumented) protected onInputBlur: (ev: React.FocusEvent) => void; @@ -365,7 +364,7 @@ export class BasePicker> extends React.Componen protected root: React.RefObject; // (undocumented) protected selection: Selection; - // (undocumented) + // @deprecated (undocumented) protected _shouldFocusZoneEnterInnerZone: (ev: React.KeyboardEvent) => boolean; // (undocumented) protected suggestionElement: React.RefObject>; @@ -1770,6 +1769,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/office-ui-fabric-react/src/components/pickers/BasePicker.test.tsx b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.test.tsx index 16da120125e91d..7c1278b96fd7c3 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.test.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.test.tsx @@ -517,4 +517,91 @@ describe('BasePicker', () => { expect(moreButton.id).toEqual('sug-selectedAction'); expect(input.getAttribute('aria-activedescendant')).toEqual('sug-selectedAction'); }); + + it('focuses the input when the focus method is called', () => { + document.body.appendChild(root); + + const picker = React.createRef>(); + + ReactDOM.render( + , + root, + ); + + const input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement; + picker.current?.focus(); + + expect(document.activeElement).toBe(input); + }); + + it('focuses the last selected item after removing input', () => { + jest.useFakeTimers(); + document.body.appendChild(root); + + const onRenderFocusableItem = (props: IPickerItemProps): JSX.Element => ( + + ); + ReactDOM.render( + , + root, + ); + + const input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement; + input.focus(); + input.value = 'bl'; + ReactTestUtils.Simulate.input(input); + jest.runAllTimers(); + + const suggestionOptions = document.querySelectorAll('.ms-Suggestions-itemButton'); + ReactTestUtils.Simulate.click(suggestionOptions[0]); + + const selectedItem = document.querySelector('button[data-selection-index]'); + + expect(document.activeElement).toBe(selectedItem); + }); + + it('focuses the next selected item after removing a selection', () => { + jest.useFakeTimers(); + document.body.appendChild(root); + + const onRenderFocusableItem = (props: IPickerItemProps): JSX.Element => { + return ( + + ); + }; + ReactDOM.render( + , + root, + ); + + const selectedEls = document.querySelectorAll('button[data-selection-index]'); + (selectedEls[0] as HTMLButtonElement).focus(); + ReactTestUtils.Simulate.click(selectedEls[0]); + + jest.runAllTimers(); + + expect(document.activeElement).toBe(selectedEls[1]); + }); }); 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 904fae8573a87d..ffe7442fa1fb96 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx @@ -10,7 +10,6 @@ import { initializeComponentRef, } from '../../Utilities'; import { IProcessedStyleSet } from '../../Styling'; -import { IFocusZone, FocusZone, FocusZoneDirection } from '../../FocusZone'; import { Callout, DirectionalHint } from '../../Callout'; import { Selection, SelectionZone, SelectionMode } from '../../utilities/selection/index'; import { Suggestions } from './Suggestions/Suggestions'; @@ -94,7 +93,6 @@ export class BasePicker> extends React.Componen // Refs protected root = React.createRef(); protected input = React.createRef(); - protected focusZone = React.createRef(); protected suggestionElement = React.createRef>(); protected selection: Selection; @@ -166,6 +164,10 @@ export class BasePicker> extends React.Componen this.selection.setIndexSelected(currentSelectedIndex, true, 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); + } } } } @@ -178,8 +180,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(); } } @@ -242,7 +244,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. @@ -269,47 +271,61 @@ export class BasePicker> extends React.Componen screenReaderText: legacyStyles.screenReaderOnly, }; + 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)} - -
- {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()}
); @@ -385,8 +401,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); @@ -532,8 +548,6 @@ export class BasePicker> extends React.Componen // For example when an item is selected or removed from the selected list it should be treated // as though the input is still focused. if (!this.state.isFocused) { - this.setState({ isFocused: true }); - this._userTriggeredSuggestions(); if (this.props.inputProps && this.props.inputProps.onFocus) { @@ -589,6 +603,12 @@ export class BasePicker> extends React.Componen } }; + protected onFocus = () => { + if (!this.state.isFocused) { + this.setState({ isFocused: true }); + } + }; + protected onKeyDown = (ev: React.KeyboardEvent): void => { const keyCode = ev.which; switch (keyCode) { @@ -824,6 +844,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) { @@ -983,7 +1006,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 : ''; @@ -1015,8 +1038,10 @@ export class BasePickerListBelow> extends BaseP screenReaderText: legacyStyles.screenReaderOnly, }; + const comboLabel = this.props['aria-label'] || inputProps?.['aria-label']; + return ( -
+
{this.getSuggestionsAlert(classNames.screenReaderText)}
@@ -1033,7 +1058,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} /> @@ -1041,17 +1068,14 @@ export class BasePickerListBelow> extends BaseP
{this.renderSuggestions()} - {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 205e76479cadbc..1f20898296cf6f 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 @@ -193,6 +193,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/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.tsx index 9dfcfc927f3e9a..996b536d7947c1 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.tsx @@ -42,23 +42,19 @@ export const PeoplePickerItemBase = (props: IPeoplePickerItemSelectedProps) => { : undefined; return ( -
+
); diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/__snapshots__/PeoplePicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/__snapshots__/PeoplePicker.test.tsx.snap index c224096f661351..591dadc4e065dc 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/__snapshots__/PeoplePicker.test.tsx.snap +++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/__snapshots__/PeoplePicker.test.tsx.snap @@ -4,132 +4,125 @@ exports[`PeoplePicker renders correctly 1`] = `
+
@@ -139,595 +132,588 @@ exports[`PeoplePicker renders correctly with preselected items 1`] = `
+ - -
+  + + + +
+ +
@@ -347,340 +342,335 @@ exports[`TagPicker renders picker with selected item correctly 1`] = `
+
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 68c97fe49240f6..5f3470ece8ccb6 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 @@ -4,58 +4,51 @@ exports[`BasePicker renders correctly 1`] = `
+
@@ -65,59 +58,52 @@ exports[`BasePicker renders with inputProps supply classnames correctly 1`] = `
+
diff --git a/packages/react-examples/src/office-ui-fabric-react/Announced/Announced.SearchResults.Example.tsx b/packages/react-examples/src/office-ui-fabric-react/Announced/Announced.SearchResults.Example.tsx index 8ef6b18b7b0573..95deaa33b3f94e 100644 --- a/packages/react-examples/src/office-ui-fabric-react/Announced/Announced.SearchResults.Example.tsx +++ b/packages/react-examples/src/office-ui-fabric-react/Announced/Announced.SearchResults.Example.tsx @@ -65,6 +65,8 @@ export const AnnouncedSearchResultsExample: React.FunctionComponent = () => { {hasFilterText && } { 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/office-ui-fabric-react/PeoplePicker/PeoplePicker.Controlled.Example.tsx b/packages/react-examples/src/office-ui-fabric-react/PeoplePicker/PeoplePicker.Controlled.Example.tsx index 97d75ca898e397..3bdb65e9c98e1d 100644 --- a/packages/react-examples/src/office-ui-fabric-react/PeoplePicker/PeoplePicker.Controlled.Example.tsx +++ b/packages/react-examples/src/office-ui-fabric-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/office-ui-fabric-react/PeoplePicker/PeoplePicker.LimitedSearch.Example.tsx b/packages/react-examples/src/office-ui-fabric-react/PeoplePicker/PeoplePicker.LimitedSearch.Example.tsx index 89f05530929add..f6894a373a54cc 100644 --- a/packages/react-examples/src/office-ui-fabric-react/PeoplePicker/PeoplePicker.LimitedSearch.Example.tsx +++ b/packages/react-examples/src/office-ui-fabric-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/office-ui-fabric-react/PeoplePicker/PeoplePicker.List.Example.tsx b/packages/react-examples/src/office-ui-fabric-react/PeoplePicker/PeoplePicker.List.Example.tsx index c9d17a76e6140e..867835d0bdd36a 100644 --- a/packages/react-examples/src/office-ui-fabric-react/PeoplePicker/PeoplePicker.List.Example.tsx +++ b/packages/react-examples/src/office-ui-fabric-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/office-ui-fabric-react/PeoplePicker/PeoplePicker.Normal.Example.tsx b/packages/react-examples/src/office-ui-fabric-react/PeoplePicker/PeoplePicker.Normal.Example.tsx index 551a5490e369f3..a827255e0db2c8 100644 --- a/packages/react-examples/src/office-ui-fabric-react/PeoplePicker/PeoplePicker.Normal.Example.tsx +++ b/packages/react-examples/src/office-ui-fabric-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/office-ui-fabric-react/PeoplePicker/PeoplePicker.PreselectedItems.Example.tsx b/packages/react-examples/src/office-ui-fabric-react/PeoplePicker/PeoplePicker.PreselectedItems.Example.tsx index f3f7f52fc139d9..2ea57b399148a1 100644 --- a/packages/react-examples/src/office-ui-fabric-react/PeoplePicker/PeoplePicker.PreselectedItems.Example.tsx +++ b/packages/react-examples/src/office-ui-fabric-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/office-ui-fabric-react/PeoplePicker/PeoplePicker.ProcessSelection.Example.tsx b/packages/react-examples/src/office-ui-fabric-react/PeoplePicker/PeoplePicker.ProcessSelection.Example.tsx index 9028c2e6943f92..fbfc0c4031a6f9 100644 --- a/packages/react-examples/src/office-ui-fabric-react/PeoplePicker/PeoplePicker.ProcessSelection.Example.tsx +++ b/packages/react-examples/src/office-ui-fabric-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/office-ui-fabric-react/Pickers/Picker.CustomResult.Example.tsx b/packages/react-examples/src/office-ui-fabric-react/Pickers/Picker.CustomResult.Example.tsx index 6c7d175fa16f19..6d0cf0c9e79ba6 100644 --- a/packages/react-examples/src/office-ui-fabric-react/Pickers/Picker.CustomResult.Example.tsx +++ b/packages/react-examples/src/office-ui-fabric-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-examples/src/office-ui-fabric-react/Pickers/TagPicker.Basic.Example.tsx b/packages/react-examples/src/office-ui-fabric-react/Pickers/TagPicker.Basic.Example.tsx index 699ff152924215..5d49417fadcb4b 100644 --- a/packages/react-examples/src/office-ui-fabric-react/Pickers/TagPicker.Basic.Example.tsx +++ b/packages/react-examples/src/office-ui-fabric-react/Pickers/TagPicker.Basic.Example.tsx @@ -91,6 +91,7 @@ export const TagPickerBasicExample: React.FunctionComponent = () => { { +
-
- -
+ 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} + value="" + />
diff --git a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/PeoplePicker.Compact.Example.tsx.shot b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/PeoplePicker.Compact.Example.tsx.shot index 79e147dc380cc9..428b5216c4e79e 100644 --- a/packages/react-examples/src/office-ui-fabric-react/__snapshots__/PeoplePicker.Compact.Example.tsx.shot +++ b/packages/react-examples/src/office-ui-fabric-react/__snapshots__/PeoplePicker.Compact.Example.tsx.shot @@ -5,134 +5,129 @@ exports[`Component Examples renders PeoplePicker.Compact.Example.tsx correctly 1
+
-
- -
+ &::placeholder { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #605e5c; + 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; + opacity: 1; + } + @media screen and (-ms-high-contrast: active), (forced-colors: active){&::placeholder { + color: GrayText; + } + &:-ms-input-placeholder { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #605e5c; + 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; + opacity: 1; + } + @media screen and (-ms-high-contrast: active), (forced-colors: active){&:-ms-input-placeholder { + color: GrayText; + } + &::-ms-input-placeholder { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #605e5c; + 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; + opacity: 1; + } + @media screen and (-ms-high-contrast: active), (forced-colors: active){&::-ms-input-placeholder { + color: GrayText; + } + data-lpignore={true} + disabled={false} + 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} + value="" + />
@@ -192,7 +187,7 @@ exports[`Component Examples renders PeoplePicker.Compact.Example.tsx correctly 1 @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before { outline: 1px solid WindowText; } - id="checkbox-2" + id="checkbox-1" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} @@ -222,7 +217,7 @@ exports[`Component Examples renders PeoplePicker.Compact.Example.tsx correctly 1 right: 0px; top: 0px; } - htmlFor="checkbox-2" + htmlFor="checkbox-1" >
+
-
- -
+ &::placeholder { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #605e5c; + 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; + opacity: 1; + } + @media screen and (-ms-high-contrast: active), (forced-colors: active){&::placeholder { + color: GrayText; + } + &:-ms-input-placeholder { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #605e5c; + 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; + opacity: 1; + } + @media screen and (-ms-high-contrast: active), (forced-colors: active){&:-ms-input-placeholder { + color: GrayText; + } + &::-ms-input-placeholder { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #605e5c; + 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; + opacity: 1; + } + @media screen and (-ms-high-contrast: active), (forced-colors: active){&::-ms-input-placeholder { + color: GrayText; + } + data-lpignore={true} + disabled={false} + 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} + value="" + />
@@ -2143,7 +2139,7 @@ exports[`Component Examples renders PeoplePicker.Controlled.Example.tsx correctl @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before { outline: 1px solid WindowText; } - id="checkbox-37" + id="checkbox-36" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} @@ -2173,7 +2169,7 @@ exports[`Component Examples renders PeoplePicker.Controlled.Example.tsx correctl right: 0px; top: 0px; } - htmlFor="checkbox-37" + htmlFor="checkbox-36" >
+
-
- -
+ &::placeholder { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #605e5c; + 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; + opacity: 1; + } + @media screen and (-ms-high-contrast: active), (forced-colors: active){&::placeholder { + color: GrayText; + } + &:-ms-input-placeholder { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #605e5c; + 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; + opacity: 1; + } + @media screen and (-ms-high-contrast: active), (forced-colors: active){&:-ms-input-placeholder { + color: GrayText; + } + &::-ms-input-placeholder { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #605e5c; + 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; + opacity: 1; + } + @media screen and (-ms-high-contrast: active), (forced-colors: active){&::-ms-input-placeholder { + color: GrayText; + } + data-lpignore={true} + disabled={false} + 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} + value="" + />
@@ -192,7 +187,7 @@ exports[`Component Examples renders PeoplePicker.LimitedSearch.Example.tsx corre @media screen and (-ms-high-contrast: active), (forced-colors: active){.ms-Fabric--isFocusVisible &:focus + label::before { outline: 1px solid WindowText; } - id="checkbox-2" + id="checkbox-1" onBlur={[Function]} onChange={[Function]} onFocus={[Function]} @@ -222,7 +217,7 @@ exports[`Component Examples renders PeoplePicker.LimitedSearch.Example.tsx corre right: 0px; top: 0px; } - htmlFor="checkbox-2" + htmlFor="checkbox-1" >