From 4e284519206ed7f392f7c76c8925de9d9d1d0ca6 Mon Sep 17 00:00:00 2001 From: Teenie Su Date: Tue, 19 Oct 2021 04:12:17 -0700 Subject: [PATCH 1/2] Apply commit 05b637939efd48a53391dac8587ec527aaee8891 Pickers: Improving picker tag selection accessibility to 7.0 --- .../etc/office-ui-fabric-react.api.md | 9 +- .../components/pickers/BasePicker.test.tsx | 87 + .../src/components/pickers/BasePicker.tsx | 142 +- .../components/pickers/BasePicker.types.ts | 14 + .../PeoplePickerItems/PeoplePickerItem.tsx | 12 +- .../__snapshots__/PeoplePicker.test.tsx.snap | 1190 ++++---- .../components/pickers/TagPicker/TagItem.tsx | 27 +- .../__snapshots__/TagItem.test.tsx.snap | 21 +- .../__snapshots__/TagPicker.test.tsx.snap | 1102 ++++---- .../__snapshots__/BasePicker.test.tsx.snap | 164 +- .../Announced.SearchResults.Example.tsx | 2 + .../PeoplePicker.Compact.Example.tsx | 2 + .../PeoplePicker.Controlled.Example.tsx | 3 + .../PeoplePicker.LimitedSearch.Example.tsx | 2 + .../PeoplePicker.List.Example.tsx | 2 + .../PeoplePicker.Normal.Example.tsx | 1 + .../PeoplePicker.PreselectedItems.Example.tsx | 2 + .../PeoplePicker.ProcessSelection.Example.tsx | 1 + .../Pickers/Picker.CustomResult.Example.tsx | 2 + .../Pickers/TagPicker.Basic.Example.tsx | 2 + .../Announced.SearchResults.Example.tsx.shot | 223 +- .../PeoplePicker.Compact.Example.tsx.shot | 233 +- .../PeoplePicker.Controlled.Example.tsx.shot | 232 +- ...eoplePicker.LimitedSearch.Example.tsx.shot | 233 +- .../PeoplePicker.List.Example.tsx.shot | 22 +- .../PeoplePicker.Normal.Example.tsx.shot | 233 +- ...lePicker.PreselectedItems.Example.tsx.shot | 2423 ++++++++--------- ...lePicker.ProcessSelection.Example.tsx.shot | 233 +- .../TagPicker.Basic.Example.tsx.shot | 446 ++- 29 files changed, 3564 insertions(+), 3501 deletions(-) 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 cd70fce58f9f4..3e39fb57d68ca 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 16da120125e91..7c1278b96fd7c 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 904fae8573a87..ffe7442fa1fb9 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 205e76479cadb..1f20898296cf6 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 9dfcfc927f3e9..996b536d7947c 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 c224096f66135..591dadc4e065d 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 68c97fe49240f..5f3470ece8ccb 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 8ef6b18b7b057..95deaa33b3f94 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 97d75ca898e39..3bdb65e9c98e1 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 89f05530929ad..f6894a373a54c 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 c9d17a76e6140..867835d0bdd36 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 551a5490e369f..a827255e0db2c 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 f3f7f52fc139d..2ea57b399148a 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 9028c2e6943f9..fbfc0c4031a6f 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 6c7d175fa16f1..6d0cf0c9e79ba 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 699ff15292421..5d49417fadcb4 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 79e147dc380cc..428b5216c4e79 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" >