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

feat(UI builder): Add ability to compute screen reader narration of focused element in … …use mode #15464

Merged
merged 40 commits into from
Oct 12, 2020
Merged

feat(UI builder): Add ability to compute screen reader narration of focused element in … …use mode #15464

merged 40 commits into from
Oct 12, 2020

Conversation

adamsamec
Copy link
Contributor

@adamsamec adamsamec commented Oct 12, 2020 •
edited
Loading

Description of changes

  • Adds the ability to compute screen reader narration of focused element in the use mode of UI builder.
  • Also fixes the bug with narration path dropdown not being able to select an item other than the first one.

adamsamec and others added 30 commits September 4, 2020 16:17
@adamsamec
Integrated the message computation script by Adam into UI Builder
37afedc
@adamsamec
Rename and reformat changes
b464da0
@adamsamec
Merge branch 'master' into narration-computation
9e8f8f2
@adamsamec
Fix type errors
dd0fdfd
@adamsamec
Implement suggestions from PR for better readability of the code
d6d371b
@adamsamec
Refactorring of the code. Mainly rewritten the large computeMessage()…
b56ca8e 
… function into smaller ones.
@adamsamec
Fix narration computation for elements with checked DOM property as s…
03de7e5 
…tate. Fix textarea not to narrate value. Refactoring and comment edit and addition.
@adamsamec
Rename to screen reader narration computation
0e77c3f
@adamsamec
Merge branch 'master' into narration-computation
63df501
@adamsamec @assuncaocharles
Refactor getDefinitionName() method in NarrationComputer.tsx for conc…
69b3abf 
…iseness

Co-authored-by: Charles Assunção <junioassuncaocharles@gmail.com>
@adamsamec
Replace default exports with named exports.
5228b78
@adamsamec
Remove private modifier
6d66188
@adamsamec
Change to a more readable type
a495f92
@adamsamec
Rewrite the code not to use label for the for-loop and refactoring
20e58b8
@adamsamec @assuncaocharles
Update packages/fluentui/react-builder/src/components/NarrationComput…
dadfa36 
…er.tsx

Co-authored-by: Charles Assunção <junioassuncaocharles@gmail.com>
@adamsamec
Reverting the last commit,
a13abc7
@adamsamec
Merge branch 'narration-computation' of https://github.com/adamsamec/…
5a4ff5e 
…fluentui into narration-computation
@adamsamec
Comment change
cb47801
@adamsamec
Replace for loop with Array.forEach().
3cd647c
@adamsamec
Resolve lint errors
dae82f1
@adamsamec
Remove empty file northstar. Have no idea how it was created-
742ddff
@adamsamec
Remove showNarration condition
9ec256d
@adamsamec
Replace condition with ternary operator.
ae51ced
@adamsamec @assuncaocharles
Add missing quotes in a CSS definition.
8b3a33f 
Co-authored-by: Charles Assunção <junioassuncaocharles@gmail.com>
@adamsamec
Replace condition with ternary operator
d9c23ee
@adamsamec
Rename parameter and add type"
70149fa
@adamsamec
Merge branch 'master' into narration-computation
146c5dd
@adamsamec
Integrate descendant element screen reader narration computation into…
8a6d454 
… the UI Builder
@adamsamec
Refactoring and handle the case where there are no elements for the s…
79b8d4a 
…elected component.
@adamsamec
Refactoring, narration now computes for all focusable elements, and p…
d59e7e1 
…ath shows computed name of element.
@msft-github-bot msft-github-bot added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label Oct 12, 2020
@codesandbox-ci
Copy link

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

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

@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 835 866 5000
BaseButton mount 934 978 5000
Breadcrumb mount 151450 151916 5000
ButtonNext mount 568 589 5000
Checkbox mount 1679 1610 5000
CheckboxBase mount 1341 1368 5000
CheckboxNext mount 1587 1590 5000
ChoiceGroup mount 4847 4889 5000
ComboBox mount 921 990 1000
CommandBar mount 20953 21075 1000
ContextualMenu mount 5671 5639 1000
DefaultButton mount 1171 1177 5000
DetailsRow mount 3677 3697 5000
DetailsRowFast mount 3701 3693 5000
DetailsRowNoStyles mount 3512 3541 5000
Dialog mount 1493 1545 1000
DocumentCardTitle mount 1744 1739 1000
Dropdown mount 2639 2626 5000
FocusTrapZone mount 1716 1733 5000
FocusTrapZoneNext mount 1753 1788 5000
FocusZone mount 1732 1734 5000
IconButton mount 1851 1814 5000
Label mount 319 352 5000
Layer mount 1936 1917 5000
LayerNext mount 1854 1842 5000
Link mount 473 494 5000
LinkNext mount 470 467 5000
MenuButton mount 1519 1497 5000
MessageBar mount 2016 2014 5000
Nav mount 3306 3329 1000
OverflowSet mount 1006 1031 5000
Panel mount 1532 1513 1000
Persona mount 912 865 1000
Pivot mount 1386 1402 1000
PivotNext mount 1427 1404 1000
PrimaryButton mount 1297 1336 5000
Rating mount 7931 7876 5000
SearchBox mount 1402 1358 5000
Shimmer mount 2621 2582 5000
Slider mount 1982 1890 5000
SliderNext mount 1953 1922 5000
SpinButton mount 5217 5133 5000
Spinner mount 408 424 5000
SplitButton mount 3211 3206 5000
Stack mount 534 540 5000
StackWithIntrinsicChildren mount 2086 2031 5000
StackWithTextChildren mount 5244 5189 5000
SwatchColorPicker mount 10320 10361 5000
TagPicker mount 2748 2784 5000
TeachingBubble mount 48661 48321 5000
Text mount 428 445 5000
TextField mount 1418 1388 5000
ThemeProvider mount 1921 1873 5000
ThemeProvider virtual-rerender 600 601 5000
Toggle mount 813 831 5000
ToggleNext mount 813 836 5000
button mount 111 107 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.47 0.51 0.92:1 2000 940
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 618
🔧 Checkbox.Fluent 0.64 0.34 1.88:1 1000 643
🎯 Dialog.Fluent 0.16 0.23 0.7:1 5000 824
🔧 Dropdown.Fluent 2.93 0.48 6.1:1 1000 2931
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 761
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 434
🔧 Slider.Fluent 1.61 0.44 3.66:1 1000 1612
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 391
🦄 Tooltip.Fluent 0.12 8.79 0.01:1 5000 599

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 189 171 1.11:1
LoaderMinimalPerf.default 811 752 1.08:1
Tooltip.Fluent 599 557 1.08:1
LayoutMinimalPerf.default 472 440 1.07:1
CardMinimalPerf.default 624 590 1.06:1
PopupMinimalPerf.default 767 722 1.06:1
AvatarMinimalPerf.default 546 518 1.05:1
BoxMinimalPerf.default 412 391 1.05:1
ChatDuplicateMessagesPerf.default 451 431 1.05:1
ButtonSlotsPerf.default 643 616 1.04:1
ChatWithPopoverPerf.default 508 487 1.04:1
PortalMinimalPerf.default 172 165 1.04:1
TextMinimalPerf.default 409 392 1.04:1
ToolbarMinimalPerf.default 1030 992 1.04:1
TreeMinimalPerf.default 960 920 1.04:1
AlertMinimalPerf.default 336 326 1.03:1
AnimationMinimalPerf.default 448 437 1.03:1
ButtonUseCssNestingPerf.default 1136 1106 1.03:1
ChatMinimalPerf.default 692 675 1.03:1
ItemLayoutMinimalPerf.default 1416 1374 1.03:1
RefMinimalPerf.default 239 232 1.03:1
SliderMinimalPerf.default 1660 1607 1.03:1
SplitButtonMinimalPerf.default 3970 3851 1.03:1
TableMinimalPerf.default 462 449 1.03:1
AttachmentSlotsPerf.default 1215 1195 1.02:1
DividerMinimalPerf.default 413 406 1.02:1
FlexMinimalPerf.default 334 329 1.02:1
HeaderSlotsPerf.default 874 853 1.02:1
ListMinimalPerf.default 527 519 1.02:1
MenuMinimalPerf.default 945 929 1.02:1
SkeletonMinimalPerf.default 467 458 1.02:1
StatusMinimalPerf.default 795 779 1.02:1
CustomToolbarPrototype.default 3928 3854 1.02:1
AccordionMinimalPerf.default 158 156 1.01:1
ButtonOverridesMissPerf.default 1780 1766 1.01:1
CarouselMinimalPerf.default 476 469 1.01:1
DialogMinimalPerf.default 836 829 1.01:1
DropdownManyItemsPerf.default 795 787 1.01:1
IconMinimalPerf.default 729 724 1.01:1
TextAreaMinimalPerf.default 558 551 1.01:1
VideoMinimalPerf.default 676 667 1.01:1
Dropdown.Fluent 2931 2888 1.01:1
Image.Fluent 434 429 1.01:1
DropdownMinimalPerf.default 2970 2981 1:1
EmbedMinimalPerf.default 2036 2038 1:1
HeaderMinimalPerf.default 410 409 1:1
ProviderMinimalPerf.default 1064 1060 1:1
TooltipMinimalPerf.default 845 848 1:1
Dialog.Fluent 824 823 1:1
ButtonMinimalPerf.default 195 197 0.99:1
CheckboxMinimalPerf.default 2924 2948 0.99:1
ImageMinimalPerf.default 422 425 0.99:1
LabelMinimalPerf.default 457 461 0.99:1
ListCommonPerf.default 707 711 0.99:1
ListNestedPerf.default 623 630 0.99:1
MenuButtonMinimalPerf.default 1673 1694 0.99:1
Button.Fluent 618 623 0.99:1
Icon.Fluent 761 767 0.99:1
Slider.Fluent 1612 1629 0.99:1
ButtonUseCssPerf.default 865 880 0.98:1
GridMinimalPerf.default 376 383 0.98:1
InputMinimalPerf.default 1363 1392 0.98:1
ListWith60ListItems.default 960 980 0.98:1
RadioGroupMinimalPerf.default 479 488 0.98:1
TableManyItemsPerf.default 2337 2383 0.98:1
TreeWith60ListItems.default 206 210 0.98:1
Checkbox.Fluent 643 655 0.98:1
ProviderMergeThemesPerf.default 1997 2060 0.97:1
SegmentMinimalPerf.default 374 385 0.97:1
Avatar.Fluent 940 969 0.97:1
FormMinimalPerf.default 455 476 0.96:1
ReactionMinimalPerf.default 437 454 0.96:1
Text.Fluent 391 407 0.96:1

@size-auditor
Copy link

size-auditor bot commented Oct 12, 2020

Asset size changes

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

Baseline commit: bab280655bb01250c3382b050de71c3803e6fd9e (build)

@adamsamec adamsamec merged commit e915a19 into microsoft:master Oct 12, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jurokapsiar jurokapsiar jurokapsiar approved these changes

@assuncaocharles assuncaocharles Awaiting requested review from assuncaocharles

@dzearing dzearing Awaiting requested review from dzearing

@layershifter layershifter Awaiting requested review from layershifter

@miroslavstastny miroslavstastny Awaiting requested review from miroslavstastny

@pompomon pompomon Awaiting requested review from pompomon

Assignees

@tomi-msft tomi-msft

Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@adamsamec @msft-github-bot @jurokapsiar @tomi-msft