fix: MenuTrigger should work correctly when `aria-disabled="true"` by ling1726 · Pull Request #21349 · microsoft/fluentui

ling1726 · 2022-01-20T09:59:04Z

Adds a check to isTargetDisabled to not only check the presence of
aria-disabled but its value

Current Behavior

SplitButton is broken since aria-disabled will always be present on the trigger with true and false values. Since existing MenuTrigger only checks the presence of the attribute, the menu will never open.

New Behavior

SplitButton will open the menu correctly

Related Issue(s)

Fixes #21350

Adds a check to `isTargetDisabled` to not only check the presence of `aria-disabled` but its value

codesandbox-ci · 2022-01-20T10:08:26Z

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 6d79fb6:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

fabricteam · 2022-01-20T10:13:11Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`165.88 kB` `46.992 kB`	`165.914 kB` `46.997 kB`	`34 B` `5 B`
`react-menu` Menu (including children components)	`102.927 kB` `31.796 kB`	`102.961 kB` `31.798 kB`	`34 B` `2 B`
`react-menu` Menu (including selectable components)	`105.178 kB` `32.152 kB`	`105.212 kB` `32.153 kB`	`34 B` `1 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-components` react-components: FluentProvider & webLightTheme	`32.297 kB` `10.592 kB`

_{🤖 This report was generated against 0660eda68d5139b3aa2a5408be8883b3151b1a23}

size-auditor · 2022-01-20T10:16:08Z

Asset size changes

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

Baseline commit: ff9ad1d4fe5682173c497f6ddf0ee1d7bddd6800 (build)

fabricteam · 2022-01-20T10:30:53Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	676	779	5000
BaseButton	mount	761	788	5000
Breadcrumb	mount	2222	2269	1000
ButtonNext	mount	452	430	5000
Checkbox	mount	1269	1335	5000
CheckboxBase	mount	1135	1019	5000
ChoiceGroup	mount	3976	3941	5000
ComboBox	mount	829	826	1000
CommandBar	mount	8698	8207	1000
ContextualMenu	mount	7019	7337	1000
DefaultButton	mount	984	985	5000
DetailsRow	mount	3233	3287	5000
DetailsRowFast	mount	3255	3271	5000
DetailsRowNoStyles	mount	3099	3011	5000
Dialog	mount	2057	2189	1000
DocumentCardTitle	mount	156	164	1000
Dropdown	mount	2735	2650	5000
FluentProviderNext	mount	1581	1522	5000
FluentProviderWithTheme	mount	115	126	10
FluentProviderWithTheme	virtual-rerender	100	105	10
FluentProviderWithTheme	virtual-rerender-with-unmount	174	164	10
FocusTrapZone	mount	1499	1532	5000
FocusZone	mount	1627	1518	5000
IconButton	mount	1478	1475	5000
Label	mount	312	326	5000
Layer	mount	2503	2480	5000
Link	mount	378	436	5000
MakeStyles	mount	1488	1427	50000
MenuButton	mount	1263	1302	5000
MessageBar	mount	1698	1797	5000
Nav	mount	2801	2790	1000
OverflowSet	mount	973	911	5000
Panel	mount	2182	2125	1000
Persona	mount	912	668	1000
Pivot	mount	1184	1318	1000
PrimaryButton	mount	1056	1131	5000
Rating	mount	6414	6558	5000
SearchBox	mount	1051	1144	5000
Shimmer	mount	2138	2182	5000
Slider	mount	1721	1711	5000
SpinButton	mount	4284	4190	5000
Spinner	mount	338	397	5000
SplitButton	mount	2662	2474	5000
Stack	mount	417	423	5000
StackWithIntrinsicChildren	mount	1890	1943	5000
StackWithTextChildren	mount	4498	4355	5000
SwatchColorPicker	mount	9533	9792	5000
TagPicker	mount	2292	2265	5000
TeachingBubble	mount	11093	11132	5000
Text	mount	400	401	5000
TextField	mount	1196	1077	5000
ThemeProvider	mount	987	1043	5000
ThemeProvider	virtual-rerender	544	558	5000
ThemeProvider	virtual-rerender-with-unmount	1627	1620	5000
Toggle	mount	704	717	5000
buttonNative	mount	129	136	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	142	118	1.2:1
ReactionMinimalPerf.default	337	290	1.16:1
AnimationMinimalPerf.default	470	418	1.12:1
AvatarMinimalPerf.default	167	149	1.12:1
DividerMinimalPerf.default	327	293	1.12:1
HeaderSlotsPerf.default	641	571	1.12:1
SegmentMinimalPerf.default	307	275	1.12:1
StatusMinimalPerf.default	578	517	1.12:1
VideoMinimalPerf.default	532	478	1.11:1
LoaderMinimalPerf.default	578	529	1.09:1
MenuMinimalPerf.default	719	659	1.09:1
RefMinimalPerf.default	190	175	1.09:1
PopupMinimalPerf.default	529	488	1.08:1
AlertMinimalPerf.default	229	215	1.07:1
ButtonOverridesMissPerf.default	1448	1356	1.07:1
HeaderMinimalPerf.default	323	302	1.07:1
SliderMinimalPerf.default	1370	1284	1.07:1
ButtonMinimalPerf.default	157	149	1.05:1
ListNestedPerf.default	485	464	1.05:1
MenuButtonMinimalPerf.default	1341	1283	1.05:1
TextAreaMinimalPerf.default	440	421	1.05:1
TooltipMinimalPerf.default	851	814	1.05:1
TreeWith60ListItems.default	164	156	1.05:1
AccordionMinimalPerf.default	140	134	1.04:1
ListWith60ListItems.default	562	541	1.04:1
SkeletonMinimalPerf.default	294	282	1.04:1
CheckboxMinimalPerf.default	2226	2160	1.03:1
DialogMinimalPerf.default	603	586	1.03:1
LayoutMinimalPerf.default	286	277	1.03:1
RadioGroupMinimalPerf.default	397	385	1.03:1
TableManyItemsPerf.default	1593	1546	1.03:1
DropdownManyItemsPerf.default	583	574	1.02:1
ImageMinimalPerf.default	324	317	1.02:1
ListMinimalPerf.default	445	438	1.02:1
ProviderMinimalPerf.default	966	943	1.02:1
TableMinimalPerf.default	355	347	1.02:1
SplitButtonMinimalPerf.default	3537	3490	1.01:1
ButtonSlotsPerf.default	464	465	1:1
CardMinimalPerf.default	473	471	1:1
LabelMinimalPerf.default	307	308	1:1
ToolbarMinimalPerf.default	801	799	1:1
ChatWithPopoverPerf.default	323	326	0.99:1
DropdownMinimalPerf.default	2518	2540	0.99:1
EmbedMinimalPerf.default	3400	3426	0.99:1
CustomToolbarPrototype.default	3303	3378	0.98:1
ChatMinimalPerf.default	603	622	0.97:1
DatepickerMinimalPerf.default	4597	4718	0.97:1
InputMinimalPerf.default	1065	1102	0.97:1
TreeMinimalPerf.default	658	679	0.97:1
AttachmentSlotsPerf.default	827	864	0.96:1
GridMinimalPerf.default	279	291	0.96:1
ItemLayoutMinimalPerf.default	964	1004	0.96:1
RosterPerf.default	965	1008	0.96:1
TextMinimalPerf.default	287	299	0.96:1
CarouselMinimalPerf.default	377	400	0.94:1
ProviderMergeThemesPerf.default	1323	1403	0.94:1
FlexMinimalPerf.default	233	250	0.93:1
FormMinimalPerf.default	315	344	0.92:1
ListCommonPerf.default	487	532	0.92:1
ChatDuplicateMessagesPerf.default	238	262	0.91:1
IconMinimalPerf.default	480	531	0.9:1
BoxMinimalPerf.default	260	295	0.88:1
PortalMinimalPerf.default	136	155	0.88:1

fix: MenuTrigger should work correctly when aria-disabled="true"

5716b35

Adds a check to `isTargetDisabled` to not only check the presence of `aria-disabled` but its value

msft-fluent-ui-bot added the Component: MenuTrigger label Jan 20, 2022

msft-fluent-ui-bot assigned spmonahan Jan 20, 2022

Change files

6d79fb6

ling1726 marked this pull request as ready for review January 20, 2022 10:02

ling1726 requested a review from a team as a code owner January 20, 2022 10:02

ling1726 mentioned this pull request Jan 20, 2022

fix(Menu): handle triggers composition #21225

Merged

layershifter approved these changes Jan 20, 2022

View reviewed changes

ling1726 enabled auto-merge (squash) January 20, 2022 10:13

ling1726 merged commit 4f22b6d into microsoft:master Jan 20, 2022

layershifter mentioned this pull request Feb 7, 2022

docs: notes on migration to @fluentui/[email protected] #21629

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: MenuTrigger should work correctly when `aria-disabled="true"`#21349

fix: MenuTrigger should work correctly when `aria-disabled="true"`#21349
ling1726 merged 2 commits into
microsoft:masterfrom
ling1726:fix/menu-trigger-disabled

ling1726 commented Jan 20, 2022 •

edited

Loading

Uh oh!

codesandbox-ci Bot commented Jan 20, 2022

Uh oh!

fabricteam commented Jan 20, 2022

Uh oh!

size-auditor Bot commented Jan 20, 2022

Uh oh!

fabricteam commented Jan 20, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

ling1726 commented Jan 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current Behavior

New Behavior

Related Issue(s)

Uh oh!

codesandbox-ci Bot commented Jan 20, 2022

Uh oh!

fabricteam commented Jan 20, 2022

📊 Bundle size report

Uh oh!

size-auditor Bot commented Jan 20, 2022

Asset size changes

Uh oh!

fabricteam commented Jan 20, 2022

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ling1726 commented Jan 20, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)