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

fix: correct focus visible outline on accent button and anchor styles #16833

Merged
merged 2 commits into from
Feb 5, 2021
Merged

fix: correct focus visible outline on accent button and anchor styles #16833

merged 2 commits into from
Feb 5, 2021

Conversation

SethDonohue
Copy link
Contributor

@SethDonohue SethDonohue commented Feb 4, 2021 •
edited
Loading

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

The outline on buttons and anchors with accent appearance are incorrect, and should have a thicker outline for accessibility contrast purposes.
This adds an additional box-shadow to the focus-visible accent styles to correct it.

before:
Screen Shot 2021-02-04 at 3 28 32 PM

after:
Screen Shot 2021-02-04 at 2 51 56 PM

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 4, 2021 •
edited
Loading

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 c32167a:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@size-auditor
Copy link

size-auditor bot commented Feb 4, 2021 •
edited
Loading

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: be06520e897dda6bf3df27624dd1946996924305 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Feb 5, 2021 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 839 837 5000
BaseButtonCompat mount 899 924 5000
Breadcrumb mount 40006 41004 5000
Checkbox mount 1541 1512 5000
CheckboxBase mount 1292 1278 5000
ChoiceGroup mount 4846 4808 5000
ComboBox mount 956 948 1000
CommandBar mount 9645 9753 1000
ContextualMenu mount 5893 5780 1000
DefaultButtonCompat mount 1139 1138 5000
DetailsRow mount 3600 3566 5000
DetailsRowFast mount 3539 3535 5000
DetailsRowNoStyles mount 3410 3448 5000
Dialog mount 1483 1440 1000
DocumentCardTitle mount 1739 1747 1000
Dropdown mount 3321 3310 5000
FocusTrapZone mount 1777 1713 5000
FocusZone mount 1751 1724 5000
IconButtonCompat mount 1796 1797 5000
Label mount 317 331 5000
Layer mount 1804 1752 5000
Link mount 460 471 5000
MakeStyles mount 1871 1853 50000
MenuButtonCompat mount 1538 1485 5000
MessageBar mount 1933 1922 5000
Nav mount 3275 3281 1000
OverflowSet mount 1024 983 5000
Panel mount 1497 1324 1000
Persona mount 836 865 1000
Pivot mount 1406 1391 1000
PrimaryButtonCompat mount 1274 1296 5000
Rating mount 7673 7535 5000
SearchBox mount 1376 1360 5000
Shimmer mount 2611 2565 5000
Slider mount 1912 1866 5000
SpinButton mount 4927 4936 5000
Spinner mount 392 394 5000
SplitButtonCompat mount 3163 3100 5000
Stack mount 515 499 5000
StackWithIntrinsicChildren mount 1511 1515 5000
StackWithTextChildren mount 4577 4629 5000
SwatchColorPicker mount 11094 10145 5000
Tabs mount 1425 1439 1000
TagPicker mount 2975 2831 5000
TeachingBubble mount 11826 11596 5000
Text mount 460 455 5000
TextField mount 1551 1479 5000
ThemeProvider mount 1467 1508 5000
ThemeProvider virtual-rerender 596 612 5000
ThemeProviderNext mount 2233 2169 5000
Toggle mount 837 840 5000
button mount 708 724 5000
buttonNative mount 101 107 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.18 0.5 0.36:1 2000 369
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 624
🔧 Checkbox.Fluent 0.65 0.36 1.81:1 1000 648
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 817
🔧 Dropdown.Fluent 3.01 0.44 6.84:1 1000 3012
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 720
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 448
🔧 Slider.Fluent 1.5 0.44 3.41:1 1000 1503
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 383
🦄 Tooltip.Fluent 0.11 0.88 0.13:1 5000 571

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
GridMinimalPerf.default 404 362 1.12:1
PortalMinimalPerf.default 163 150 1.09:1
AttachmentMinimalPerf.default 196 181 1.08:1
AnimationMinimalPerf.default 451 423 1.07:1
ButtonMinimalPerf.default 205 192 1.07:1
FormMinimalPerf.default 489 456 1.07:1
HeaderMinimalPerf.default 422 394 1.07:1
AvatarMinimalPerf.default 231 217 1.06:1
ChatDuplicateMessagesPerf.default 408 386 1.06:1
HeaderSlotsPerf.default 901 850 1.06:1
RefMinimalPerf.default 246 232 1.06:1
ChatMinimalPerf.default 700 665 1.05:1
ListMinimalPerf.default 558 531 1.05:1
LoaderMinimalPerf.default 759 723 1.05:1
VideoMinimalPerf.default 713 682 1.05:1
Image.Fluent 448 425 1.05:1
ListNestedPerf.default 614 590 1.04:1
PopupMinimalPerf.default 714 687 1.04:1
StatusMinimalPerf.default 803 773 1.04:1
TreeWith60ListItems.default 199 191 1.04:1
ButtonUseCssNestingPerf.default 1157 1124 1.03:1
DatepickerMinimalPerf.default 48264 47084 1.03:1
LayoutMinimalPerf.default 456 441 1.03:1
RadioGroupMinimalPerf.default 495 479 1.03:1
SegmentMinimalPerf.default 410 397 1.03:1
IconMinimalPerf.default 748 728 1.03:1
TextMinimalPerf.default 403 392 1.03:1
BoxMinimalPerf.default 414 406 1.02:1
FlexMinimalPerf.default 328 323 1.02:1
ListCommonPerf.default 710 693 1.02:1
ListWith60ListItems.default 676 660 1.02:1
CustomToolbarPrototype.default 3611 3551 1.02:1
ToolbarMinimalPerf.default 1053 1030 1.02:1
TooltipMinimalPerf.default 844 825 1.02:1
Checkbox.Fluent 648 633 1.02:1
Tooltip.Fluent 571 560 1.02:1
ChatWithPopoverPerf.default 470 465 1.01:1
EmbedMinimalPerf.default 4285 4255 1.01:1
ItemLayoutMinimalPerf.default 1305 1297 1.01:1
ProviderMinimalPerf.default 924 915 1.01:1
SplitButtonMinimalPerf.default 3918 3863 1.01:1
TableMinimalPerf.default 446 441 1.01:1
Avatar.Fluent 369 364 1.01:1
Button.Fluent 624 617 1.01:1
Dropdown.Fluent 3012 2970 1.01:1
Icon.Fluent 720 710 1.01:1
ButtonSlotsPerf.default 641 638 1:1
ButtonUseCssPerf.default 870 868 1:1
DialogMinimalPerf.default 833 829 1:1
DropdownMinimalPerf.default 2992 2993 1:1
MenuButtonMinimalPerf.default 1629 1632 1:1
ReactionMinimalPerf.default 449 450 1:1
SliderMinimalPerf.default 1555 1548 1:1
TableManyItemsPerf.default 2211 2209 1:1
Dialog.Fluent 817 819 1:1
AttachmentSlotsPerf.default 1272 1283 0.99:1
CarouselMinimalPerf.default 519 525 0.99:1
CheckboxMinimalPerf.default 2922 2947 0.99:1
DropdownManyItemsPerf.default 781 785 0.99:1
InputMinimalPerf.default 1285 1303 0.99:1
SkeletonMinimalPerf.default 405 408 0.99:1
TreeMinimalPerf.default 816 827 0.99:1
Text.Fluent 383 386 0.99:1
ButtonOverridesMissPerf.default 1717 1750 0.98:1
CardMinimalPerf.default 627 638 0.98:1
DividerMinimalPerf.default 398 408 0.98:1
ImageMinimalPerf.default 428 435 0.98:1
LabelMinimalPerf.default 452 460 0.98:1
MenuMinimalPerf.default 925 942 0.98:1
TextAreaMinimalPerf.default 535 548 0.98:1
AlertMinimalPerf.default 334 343 0.97:1
RosterPerf.default 1204 1235 0.97:1
ProviderMergeThemesPerf.default 1477 1516 0.97:1
Slider.Fluent 1503 1551 0.97:1
AccordionMinimalPerf.default 178 188 0.95:1

@SethDonohue SethDonohue force-pushed the users/v-sedono/fix-accent-focus-visible-width branch from cf65886 to c32167a Compare February 5, 2021 00:46
@eljefe223
Copy link
Contributor

Smoked and verified its fixed.

Edge:
image

Firefox:
image

Safari Is currently crashing on my machine.

@chrisdholt chrisdholt merged commit 7e1723e into microsoft:master Feb 5, 2021
khamudom
khamudom reviewed Feb 5, 2021
View reviewed changes
Copy link
Contributor

@khamudom khamudom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

reviewed

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/web-components@v0.12.1 has been released which incorporates this pull request.:tada:

Handy links:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@khamudom khamudom khamudom left review comments

@chrisdholt chrisdholt chrisdholt approved these changes

@eljefe223 eljefe223 eljefe223 approved these changes

Assignees

@joschect joschect

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
7 participants
@SethDonohue @fabricteam @eljefe223 @msft-fluent-ui-bot @chrisdholt @khamudom @joschect