Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

PeoplePicker keyboard focus state: Add styles to PeoplePicker to fix keyboard focus state ratio #14124

Merged
merged 9 commits into from
Jul 21, 2020
Merged

PeoplePicker keyboard focus state: Add styles to PeoplePicker to fix keyboard focus state ratio #14124

merged 9 commits into from
Jul 21, 2020

Conversation

tomi-msft
Copy link
Contributor

Pull request checklist

Description of changes

  • Fix styles of PeoplePicker to fix keyboard focus state ratio.

The keyboard focus state for the message bar in PeoplePicker is currently below 3:1

Before
image

The fix is to add a neutralSecondary 1px border, similar to dropdownItems

After
image

Focus areas to test

(optional)

@tomi-msft tomi-msft requested review from xugao and khmakoto July 20, 2020 21:28
@tomi-msft tomi-msft requested a review from joschect as a code owner July 20, 2020 21:28
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jul 20, 2020 •
edited

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 83acd3b:

Sandbox Source
Fluent UI Button Configuration
microsoft/fluentui: codesandbox-react-template Configuration
microsoft/fluentui: codesandbox-react-next-template Configuration
microsoft/fluentui: codesandbox-react-northstar-template Configuration

@size-auditor
Copy link

size-auditor bot commented Jul 20, 2020 •
edited

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react office-ui-fabric-react-Pickers 273.087 kB 273.248 kB ExceedsBaseline     161 bytes
office-ui-fabric-react fluentui-react-next-Pickers 273.087 kB 273.248 kB ExceedsBaseline     161 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: f7feb25732b3c959b6da4abd5a6c1dcb020c16a3 (build)

@xugao
Copy link
Contributor

xugao commented Jul 20, 2020

Hm this doesn't look quite right: (when it has focus and on hover)
image

@betrue-final-final , can you advice what the expected behavior should be in the hovered case?

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Jul 20, 2020 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 947 889 5000
ButtonNext mount 584 597 5000
Checkbox mount 1580 1590 5000
CheckboxBase mount 1305 1274 5000
CheckboxNext mount 1637 1623 5000
ChoiceGroup mount 5041 4908 5000
ComboBox mount 913 932 1000
CommandBar mount 7889 7959 1000
ContextualMenu mount 15955 15313 1000
DefaultButton mount 1126 1134 5000
DetailsRow mount 3663 3627 5000
DetailsRowFast mount 3663 3669 5000
DetailsRowNoStyles mount 3429 3552 5000
Dialog mount 1533 1501 1000
DocumentCardTitle mount 1872 1856 1000
Dropdown mount 2526 2561 5000
FocusZone mount 1890 1845 5000
IconButton mount 1756 1758 5000
Label mount 337 354 5000
Link mount 450 473 5000
LinkNext mount 485 493 5000
MenuButton mount 1496 1495 5000
Nav mount 3316 3272 1000
Panel mount 1465 1475 1000
Persona mount 850 852 1000
Pivot mount 1484 1423 1000
PivotNext mount 1365 1419 1000
PrimaryButton mount 1255 1299 5000
SearchBox mount 1335 1282 5000
SearchBoxNext mount 1331 1346 5000
Slider mount 1507 1561 5000
SliderNext mount 1973 1979 5000
SpinButton mount 5067 5042 5000
SpinButtonNext mount 5163 5117 5000
Spinner mount 432 431 5000
SplitButton mount 3193 3229 5000
Stack mount 533 540 5000
StackWithIntrinsicChildren mount 2046 2003 5000
StackWithTextChildren mount 5081 5118 5000
TagPicker mount 2764 2729 5000
Text mount 439 453 5000
TextField mount 1403 1380 5000
ThemeProvider mount 2978 3039 5000
ThemeProvider virtual-rerender 525 520 5000
Toggle mount 840 845 5000
ToggleNext mount 835 846 5000
button mount 117 119 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.44 0.48 0.92:1 2000 877
🦄 Button.Fluent 0.1 0.19 0.53:1 5000 523
🔧 Checkbox.Fluent 0.62 0.34 1.82:1 1000 621
🦄 Dialog.Fluent 0.15 0.22 0.68:1 5000 768
🔧 Dropdown.Fluent 3.02 0.48 6.29:1 1000 3016
🔧 Icon.Fluent 0.14 0.05 2.8:1 5000 702
🦄 Image.Fluent 0.07 0.11 0.64:1 5000 365
🔧 Slider.Fluent 1.64 0.35 4.69:1 1000 1635
🔧 Text.Fluent 0.06 0.02 3:1 5000 322
🦄 Tooltip.Fluent 0.1 20.34 0:1 5000 513

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 156 142 1.1:1
AttachmentMinimalPerf.default 157 144 1.09:1
AlertMinimalPerf.default 298 279 1.07:1
SegmentMinimalPerf.default 343 322 1.07:1
ButtonMinimalPerf.default 177 167 1.06:1
ChatDuplicateMessagesPerf.default 448 424 1.06:1
FormMinimalPerf.default 392 373 1.05:1
ToolbarMinimalPerf.default 992 946 1.05:1
ListNestedPerf.default 903 869 1.04:1
PortalMinimalPerf.default 128 123 1.04:1
TableMinimalPerf.default 405 388 1.04:1
FlexMinimalPerf.default 280 272 1.03:1
ProviderMinimalPerf.default 931 908 1.03:1
ReactionMinimalPerf.default 386 375 1.03:1
IconMinimalPerf.default 651 634 1.03:1
AvatarMinimalPerf.default 476 466 1.02:1
ButtonSlotsPerf.default 605 594 1.02:1
ChatWithPopoverPerf.default 480 469 1.02:1
EmbedMinimalPerf.default 1941 1901 1.02:1
MenuButtonMinimalPerf.default 1568 1543 1.02:1
RadioGroupMinimalPerf.default 419 412 1.02:1
VideoMinimalPerf.default 632 619 1.02:1
Dropdown.Fluent 3016 2970 1.02:1
CarouselMinimalPerf.default 465 460 1.01:1
ChatMinimalPerf.default 597 594 1.01:1
DropdownMinimalPerf.default 3029 2987 1.01:1
ListCommonPerf.default 966 961 1.01:1
SliderMinimalPerf.default 1654 1632 1.01:1
StatusMinimalPerf.default 690 683 1.01:1
TextMinimalPerf.default 334 331 1.01:1
CustomToolbarPrototype.default 3892 3844 1.01:1
TreeWith60ListItems.default 221 219 1.01:1
Dialog.Fluent 768 762 1.01:1
Slider.Fluent 1635 1622 1.01:1
AnimationMinimalPerf.default 382 381 1:1
AttachmentSlotsPerf.default 1159 1164 1:1
BoxMinimalPerf.default 338 337 1:1
CheckboxMinimalPerf.default 2887 2878 1:1
GridMinimalPerf.default 336 337 1:1
ItemLayoutMinimalPerf.default 1258 1255 1:1
LayoutMinimalPerf.default 383 383 1:1
LoaderMinimalPerf.default 739 736 1:1
PopupMinimalPerf.default 698 695 1:1
TableManyItemsPerf.default 2206 2212 1:1
TooltipMinimalPerf.default 792 793 1:1
Image.Fluent 365 365 1:1
DialogMinimalPerf.default 765 769 0.99:1
HierarchicalTreeMinimalPerf.default 424 427 0.99:1
ListWith60ListItems.default 1090 1105 0.99:1
ProviderMergeThemesPerf.default 1998 2013 0.99:1
SplitButtonMinimalPerf.default 3767 3798 0.99:1
Icon.Fluent 702 711 0.99:1
HeaderMinimalPerf.default 367 376 0.98:1
InputMinimalPerf.default 1326 1354 0.98:1
TextAreaMinimalPerf.default 455 465 0.98:1
Button.Fluent 523 534 0.98:1
CardMinimalPerf.default 533 549 0.97:1
DropdownManyItemsPerf.default 775 797 0.97:1
ImageMinimalPerf.default 355 365 0.97:1
LabelMinimalPerf.default 394 405 0.97:1
ListMinimalPerf.default 475 490 0.97:1
MenuMinimalPerf.default 855 885 0.97:1
TreeMinimalPerf.default 858 886 0.97:1
Avatar.Fluent 877 900 0.97:1
Tooltip.Fluent 513 531 0.97:1
DividerMinimalPerf.default 323 338 0.96:1
HeaderSlotsPerf.default 753 785 0.96:1
Text.Fluent 322 338 0.95:1
Checkbox.Fluent 621 663 0.94:1
RefMinimalPerf.default 200 232 0.86:1

@tomi-msft tomi-msft merged commit 4dac03b into microsoft:master Jul 21, 2020
@msft-github-bot
Copy link
Contributor

🎉office-ui-fabric-react@v7.123.7 has been released which incorporates this pull request.:tada:

Handy links:

@msft-github-bot msft-github-bot mentioned this pull request Jul 22, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@xugao xugao xugao approved these changes

@joschect joschect joschect approved these changes

@khmakoto khmakoto Awaiting requested review from khmakoto

Assignees

@xugao xugao

Labels
Area: Accessibility Component: PeoplePicker Component: Pickers
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

PeoplePicker selected suggestion background color contrast ratio is less than 3:1
4 participants
@tomi-msft @xugao @msft-github-bot @joschect