Skip to content

fix(Menu): Do not open submenus without mousemove, other a11y changes#18618

Merged
ling1726 merged 2 commits into
microsoft:masterfrom
ling1726:feat/menu-keyboard-nav-state
Jun 18, 2021
Merged

fix(Menu): Do not open submenus without mousemove, other a11y changes#18618
ling1726 merged 2 commits into
microsoft:masterfrom
ling1726:feat/menu-keyboard-nav-state

Conversation

@ling1726

Copy link
Copy Markdown
Contributor

Pull request checklist

Description of changes

MenuTrigger should not open a menu on hover until one mousemove event is detected. This means that hover menus will not open just because the mouse landed on it by chance.

Before:
qnxZIs4GCp

After:
hEeK1iteDX

Opening the menu with mouse click will no longer focus the first menu item

Before:
WfbdQUqQtB

After:
1qlcsx6c4g

Focus areas to test

(optional)

@ling1726 ling1726 marked this pull request as ready for review June 18, 2021 09:30
@ling1726 ling1726 requested a review from a team June 18, 2021 09:30
@size-auditor

size-auditor Bot commented Jun 18, 2021

Copy link
Copy Markdown

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-components-Menu 93.684 kB 93.916 kB ExceedsBaseline     232 bytes

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

Baseline commit: 3a4cc0b424d6f6c2847a9d8513a537668bb0b4ab (build)

@fabricteam

Copy link
Copy Markdown
Collaborator

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 890 866 5000
BaseButton mount 1024 964 5000
Breadcrumb mount 2816 2820 1000
ButtonNext mount 592 555 5000
Checkbox mount 1715 1735 5000
CheckboxBase mount 1450 1445 5000
ChoiceGroup mount 5323 5306 5000
ComboBox mount 1063 1012 1000
CommandBar mount 10978 10991 1000
ContextualMenu mount 6729 6785 1000
DefaultButton mount 1261 1249 5000
DetailsRow mount 3949 3878 5000
DetailsRowFast mount 4170 4106 5000
DetailsRowNoStyles mount 3672 3761 5000
Dialog mount 2279 2231 1000
DocumentCardTitle mount 161 174 1000
Dropdown mount 3589 3531 5000
FocusTrapZone mount 1953 1904 5000
FocusZone mount 2022 1923 5000
IconButton mount 1908 1889 5000
Label mount 349 340 5000
Layer mount 1981 2006 5000
Link mount 508 508 5000
MakeStyles mount 1951 1846 50000
MenuButton mount 1704 1621 5000
MessageBar mount 2164 2268 5000
Nav mount 3587 3527 1000
OverflowSet mount 1124 1101 5000
Panel mount 2226 2176 1000
Persona mount 841 853 1000
Pivot mount 1488 1416 1000
PrimaryButton mount 1423 1423 5000
Rating mount 8379 8484 5000
SearchBox mount 1327 1442 5000
Shimmer mount 2698 2797 5000
Slider mount 2084 2151 5000
SpinButton mount 5414 5418 5000
Spinner mount 441 422 5000
SplitButton mount 3418 3463 5000
Stack mount 552 527 5000
StackWithIntrinsicChildren mount 1701 1727 5000
StackWithTextChildren mount 5101 5127 5000
SwatchColorPicker mount 10867 10638 5000
Tabs mount 1473 1423 1000
TagPicker mount 2715 2625 5000
TeachingBubble mount 12347 12278 5000
Text mount 468 433 5000
TextField mount 1533 1530 5000
ThemeProvider mount 1260 1269 5000
ThemeProvider virtual-rerender 644 616 5000
ThemeProviderNext mount 6982 6971 5000
Toggle mount 897 893 5000
buttonNative mount 125 127 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 224 186 1.2:1
DropdownManyItemsPerf.default 773 694 1.11:1
AvatarMinimalPerf.default 237 219 1.08:1
ImageMinimalPerf.default 431 398 1.08:1
LayoutMinimalPerf.default 447 414 1.08:1
ListNestedPerf.default 667 617 1.08:1
AttachmentMinimalPerf.default 192 180 1.07:1
DialogMinimalPerf.default 857 815 1.05:1
LabelMinimalPerf.default 448 425 1.05:1
ListMinimalPerf.default 589 562 1.05:1
MenuMinimalPerf.default 975 931 1.05:1
SliderMinimalPerf.default 1806 1719 1.05:1
TextMinimalPerf.default 401 383 1.05:1
ButtonOverridesMissPerf.default 1868 1800 1.04:1
ListCommonPerf.default 734 708 1.04:1
PortalMinimalPerf.default 190 182 1.04:1
SegmentMinimalPerf.default 405 389 1.04:1
AccordionMinimalPerf.default 178 173 1.03:1
CardMinimalPerf.default 666 646 1.03:1
ChatWithPopoverPerf.default 420 407 1.03:1
DividerMinimalPerf.default 423 410 1.03:1
MenuButtonMinimalPerf.default 1816 1767 1.03:1
ProviderMinimalPerf.default 1142 1114 1.03:1
StatusMinimalPerf.default 801 779 1.03:1
TableMinimalPerf.default 466 454 1.03:1
ButtonSlotsPerf.default 629 614 1.02:1
ChatDuplicateMessagesPerf.default 314 309 1.02:1
InputMinimalPerf.default 1302 1272 1.02:1
PopupMinimalPerf.default 637 625 1.02:1
TableManyItemsPerf.default 2199 2147 1.02:1
VideoMinimalPerf.default 733 722 1.02:1
AttachmentSlotsPerf.default 1285 1275 1.01:1
BoxMinimalPerf.default 409 404 1.01:1
ChatMinimalPerf.default 689 679 1.01:1
DatepickerMinimalPerf.default 6472 6397 1.01:1
DropdownMinimalPerf.default 3188 3168 1.01:1
RefMinimalPerf.default 257 254 1.01:1
SkeletonMinimalPerf.default 407 401 1.01:1
IconMinimalPerf.default 712 706 1.01:1
ButtonMinimalPerf.default 208 208 1:1
CheckboxMinimalPerf.default 2954 2952 1:1
EmbedMinimalPerf.default 4416 4425 1:1
GridMinimalPerf.default 386 387 1:1
LoaderMinimalPerf.default 773 771 1:1
RadioGroupMinimalPerf.default 516 516 1:1
SplitButtonMinimalPerf.default 4261 4240 1:1
ToolbarMinimalPerf.default 1046 1045 1:1
TooltipMinimalPerf.default 1098 1101 1:1
TreeMinimalPerf.default 891 894 1:1
ProviderMergeThemesPerf.default 1774 1786 0.99:1
ReactionMinimalPerf.default 425 433 0.98:1
CustomToolbarPrototype.default 4163 4241 0.98:1
CarouselMinimalPerf.default 511 525 0.97:1
FormMinimalPerf.default 463 479 0.97:1
FlexMinimalPerf.default 318 331 0.96:1
AnimationMinimalPerf.default 465 491 0.95:1
HeaderSlotsPerf.default 850 893 0.95:1
TextAreaMinimalPerf.default 585 614 0.95:1
ItemLayoutMinimalPerf.default 1327 1415 0.94:1
AlertMinimalPerf.default 295 318 0.93:1
RosterPerf.default 1245 1338 0.93:1
ListWith60ListItems.default 693 757 0.92:1
HeaderMinimalPerf.default 382 427 0.89:1

@bsunderhus bsunderhus left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM 👍🏼

@ling1726 ling1726 merged commit 332a4cf into microsoft:master Jun 18, 2021
@msft-fluent-ui-bot

Copy link
Copy Markdown
Collaborator

🎉@fluentui/[email protected] 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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Menu: Focusing menu items on mouseenter

5 participants