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(react-examples): Improved information for screen readers on Facepile examples #16479

Merged
merged 2 commits into from
Jan 20, 2021
Merged

fix(react-examples): Improved information for screen readers on Facepile examples #16479

merged 2 commits into from
Jan 20, 2021

Conversation

andrefcdias
Copy link
Contributor

@andrefcdias andrefcdias commented Jan 14, 2021 •
edited
Loading

Pull request checklist

  • Addresses an existing issue: Fixes microsoftdesign/fluentui#10275
  • Include a change request file using $ yarn change: No change files are needed

Description of changes

Added Announced for the adding person action
Changed button label to improve clarity

@andrefcdias
fix(react-examples): Improved information for screen readers
e592815 
(microsoftdesign/fluentui#10254)
Added Announced for the adding person action
Changed button label to improve clarity
@codesandbox-ci
Copy link

codesandbox-ci bot commented Jan 14, 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 1d41a9c:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Jan 14, 2021 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 854 833 5000
BaseButtonCompat mount 954 926 5000
Breadcrumb mount 40585 41018 5000
Checkbox mount 1574 1539 5000
CheckboxBase mount 1292 1335 5000
ChoiceGroup mount 4886 4950 5000
ComboBox mount 1041 979 1000
CommandBar mount 9855 9922 1000
ContextualMenu mount 6015 6044 1000
DefaultButtonCompat mount 1129 1152 5000
DetailsRow mount 3657 3730 5000
DetailsRowFast mount 3704 3826 5000
DetailsRowNoStyles mount 3487 3472 5000
Dialog mount 1467 1477 1000
DocumentCardTitle mount 1728 1706 1000
Dropdown mount 3390 3364 5000
FocusTrapZone mount 1757 1814 5000
FocusZone mount 1793 1747 5000
IconButtonCompat mount 1811 1816 5000
Label mount 332 347 5000
Layer mount 1814 1766 5000
Link mount 444 463 5000
MakeStyles mount 1966 1992 50000
MenuButtonCompat mount 1515 1514 5000
MessageBar mount 1984 1997 5000
Nav mount 3330 3298 1000
OverflowSet mount 1020 1028 5000
Panel mount 1408 1373 1000
Persona mount 839 887 1000
Pivot mount 1455 1392 1000
PrimaryButtonCompat mount 1314 1312 5000
Rating mount 7769 7691 5000
SearchBox mount 1354 1396 5000
Shimmer mount 2674 2594 5000
Slider mount 1900 1923 5000
SpinButton mount 5023 5029 5000
Spinner mount 418 403 5000
SplitButtonCompat mount 3201 3225 5000
Stack mount 506 515 5000
StackWithIntrinsicChildren mount 1561 1503 5000
StackWithTextChildren mount 4665 4632 5000
SwatchColorPicker mount 10257 10239 5000
Tabs mount 1381 1398 1000
TagPicker mount 2868 2868 5000
TeachingBubble mount 11525 11501 5000
Text mount 437 414 5000
TextField mount 1400 1430 5000
ThemeProvider mount 2077 2123 5000
ThemeProvider virtual-rerender 635 640 5000
Toggle mount 790 820 5000
button mount 715 685 5000
buttonNative mount 117 101 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.18 0.52 0.35:1 2000 353
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 619
🔧 Checkbox.Fluent 0.66 0.34 1.94:1 1000 659
🎯 Dialog.Fluent 0.17 0.23 0.74:1 5000 857
🔧 Dropdown.Fluent 2.93 0.41 7.15:1 1000 2934
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 721
🎯 Image.Fluent 0.09 0.12 0.75:1 5000 426
🔧 Slider.Fluent 1.54 0.43 3.58:1 1000 1544
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 407
🦄 Tooltip.Fluent 0.11 0.88 0.13:1 5000 563

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AnimationMinimalPerf.default 457 416 1.1:1
AvatarMinimalPerf.default 234 214 1.09:1
PortalMinimalPerf.default 169 155 1.09:1
VideoMinimalPerf.default 715 665 1.08:1
ListNestedPerf.default 656 620 1.06:1
RefMinimalPerf.default 249 236 1.06:1
TableMinimalPerf.default 466 439 1.06:1
Dialog.Fluent 857 808 1.06:1
Text.Fluent 407 384 1.06:1
AttachmentSlotsPerf.default 1274 1219 1.05:1
BoxMinimalPerf.default 418 397 1.05:1
CarouselMinimalPerf.default 529 506 1.05:1
HeaderSlotsPerf.default 873 830 1.05:1
ImageMinimalPerf.default 440 418 1.05:1
LabelMinimalPerf.default 468 451 1.04:1
ListMinimalPerf.default 549 526 1.04:1
ProviderMinimalPerf.default 940 905 1.04:1
TreeMinimalPerf.default 864 828 1.04:1
TreeWith60ListItems.default 191 184 1.04:1
AttachmentMinimalPerf.default 179 173 1.03:1
ButtonSlotsPerf.default 632 612 1.03:1
ButtonUseCssNestingPerf.default 1106 1074 1.03:1
CardMinimalPerf.default 631 614 1.03:1
ChatMinimalPerf.default 676 656 1.03:1
ListWith60ListItems.default 677 657 1.03:1
PopupMinimalPerf.default 716 692 1.03:1
SkeletonMinimalPerf.default 407 395 1.03:1
IconMinimalPerf.default 728 707 1.03:1
Checkbox.Fluent 659 637 1.03:1
Image.Fluent 426 413 1.03:1
ButtonUseCssPerf.default 850 832 1.02:1
DividerMinimalPerf.default 418 409 1.02:1
FlexMinimalPerf.default 322 316 1.02:1
MenuMinimalPerf.default 929 907 1.02:1
StatusMinimalPerf.default 787 769 1.02:1
Dropdown.Fluent 2934 2882 1.02:1
Slider.Fluent 1544 1507 1.02:1
AccordionMinimalPerf.default 162 161 1.01:1
DialogMinimalPerf.default 837 827 1.01:1
HeaderMinimalPerf.default 416 410 1.01:1
InputMinimalPerf.default 1318 1301 1.01:1
LoaderMinimalPerf.default 730 721 1.01:1
MenuButtonMinimalPerf.default 1658 1640 1.01:1
SplitButtonMinimalPerf.default 3883 3828 1.01:1
TableManyItemsPerf.default 2204 2186 1.01:1
CustomToolbarPrototype.default 3598 3563 1.01:1
TooltipMinimalPerf.default 832 824 1.01:1
DatepickerMinimalPerf.default 48215 48242 1:1
DropdownManyItemsPerf.default 756 759 1:1
DropdownMinimalPerf.default 2902 2905 1:1
FormMinimalPerf.default 464 463 1:1
GridMinimalPerf.default 393 393 1:1
LayoutMinimalPerf.default 435 433 1:1
ProviderMergeThemesPerf.default 1519 1525 1:1
RadioGroupMinimalPerf.default 490 491 1:1
ReactionMinimalPerf.default 445 443 1:1
SliderMinimalPerf.default 1519 1522 1:1
Button.Fluent 619 620 1:1
Icon.Fluent 721 721 1:1
AlertMinimalPerf.default 324 326 0.99:1
ButtonOverridesMissPerf.default 1694 1707 0.99:1
ChatDuplicateMessagesPerf.default 362 364 0.99:1
CheckboxMinimalPerf.default 2844 2868 0.99:1
EmbedMinimalPerf.default 4067 4106 0.99:1
RosterPerf.default 1232 1250 0.99:1
TextMinimalPerf.default 387 392 0.99:1
TextAreaMinimalPerf.default 555 562 0.99:1
Avatar.Fluent 353 355 0.99:1
Tooltip.Fluent 563 568 0.99:1
ChatWithPopoverPerf.default 449 456 0.98:1
ItemLayoutMinimalPerf.default 1301 1323 0.98:1
ListCommonPerf.default 705 718 0.98:1
SegmentMinimalPerf.default 393 401 0.98:1
ButtonMinimalPerf.default 190 195 0.97:1
ToolbarMinimalPerf.default 996 1027 0.97:1

@size-auditor
Copy link

size-auditor bot commented Jan 14, 2021 •
edited
Loading

Asset size changes

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

Baseline commit: 4ad32be65728af8b75daa8386112349a636d1b14 (build)

@andrefcdias andrefcdias changed the title fix(react-examples): Improved information for screen readers fix(react-examples): Improved information for screen readers on Facepile examples Jan 14, 2021
@andrefcdias andrefcdias requested a review from khmakoto January 20, 2021 10:56
@msft-fluent-ui-bot
Copy link
Collaborator

Hello @khmakoto!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-fluent-ui-bot) and give me an instruction to get started! Learn more here.

@msft-fluent-ui-bot msft-fluent-ui-bot merged commit d820d6e into microsoft:master Jan 20, 2021
@andrefcdias andrefcdias mentioned this pull request Jan 27, 2021
Merged
10 tasks
msft-fluent-ui-bot pushed a commit that referenced this pull request Feb 2, 2021
@andrefcdias
Batch cherry-pick of react-example fixes (#16677)
e404ed7 
#### Pull request checklist

- [x] Include a change request file using `$ yarn change`

#### Description of changes

Aggregate cherry-picking for all my contributions for the `react-examples` package

#### Focus areas to test

- [x] #16497
- [x] #16496
- [x] #16494
- [x] #16479
- [x] #16430
- [x] #16475
- [x] #16463
- [x] #16495
- [x] #16481
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@khmakoto khmakoto khmakoto approved these changes

Assignees

@layershifter layershifter

Labels
Area: Website AutoMerge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@andrefcdias @fabricteam @msft-fluent-ui-bot @khmakoto @layershifter