react-accordion - A11y implementation by bsunderhus · Pull Request #17668 · microsoft/fluentui

bsunderhus · 2021-04-01T16:01:28Z

Pull request checklist

Updates Spec
Include a change request file using $ yarn change
A11y

Description of changes

Implements A11y handlers according to what has been discussed Accordion Convergence #16926 (comment)

Not included

will not solve circular navigation, due to not being supported yet on tabster
will not use semantic elements by default since RFC RFC: 1st Rule of ARIA to converged components #17434 is still going on

Updates #16926

size-auditor · 2021-04-01T16:11:07Z

Asset size changes

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

Baseline commit: 3febbf40a59f1acb8e37516559fed1dd6f5b62fb (build)

fabricteam · 2021-04-01T16:37:21Z

Perf Analysis

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	863	915	5000
BaseButton	mount	867	864	5000
Breadcrumb	mount	41481	41514	5000
ButtonNext	mount	545	552	5000
Checkbox	mount	1483	1508	5000
CheckboxBase	mount	1209	1240	5000
ChoiceGroup	mount	4499	4522	5000
ComboBox	mount	923	912	1000
CommandBar	mount	9590	9701	1000
ContextualMenu	mount	5806	5862	1000
DefaultButton	mount	1043	1068	5000
DetailsRow	mount	3492	3451	5000
DetailsRowFast	mount	3522	3473	5000
DetailsRowNoStyles	mount	3303	3265	5000
Dialog	mount	1364	1373	1000
DocumentCardTitle	mount	1789	1789	1000
Dropdown	mount	3081	3161	5000
FocusTrapZone	mount	1723	1737	5000
FocusZone	mount	1722	1735	5000
IconButton	mount	1685	1647	5000
Label	mount	310	320	5000
Layer	mount	1737	1701	5000
Link	mount	429	438	5000
MakeStyles	mount	1727	1756	50000
MenuButton	mount	1428	1404	5000
MessageBar	mount	1930	1986	5000
Nav	mount	3132	3174	1000
OverflowSet	mount	1008	994	5000
Panel	mount	1393	1378	1000
Persona	mount	763	762	1000
Pivot	mount	1320	1359	1000
PrimaryButton	mount	1191	1228	5000
Rating	mount	7335	7258	5000
SearchBox	mount	1221	1234	5000
Shimmer	mount	2376	2418	5000
Slider	mount	1895	1874	5000
SpinButton	mount	4735	4800	5000
Spinner	mount	400	402	5000
SplitButton	mount	3017	3028	5000
Stack	mount	469	476	5000
StackWithIntrinsicChildren	mount	1457	1493	5000
StackWithTextChildren	mount	4355	4367	5000
SwatchColorPicker	mount	9807	9849	5000
Tabs	mount	1340	1354	1000
TagPicker	mount	2754	2696	5000
TeachingBubble	mount	11466	11392	5000
Text	mount	399	399	5000
TextField	mount	1325	1298	5000
ThemeProvider	mount	1126	1156	5000
ThemeProvider	virtual-rerender	587	583	5000
ThemeProviderNext	mount	15480	15345	5000
Toggle	mount	754	768	5000
buttonNative	mount	107	104	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🦄	Avatar.Fluent	0.18	0.48	0.38:1	2000	353
🦄	Button.Fluent	0.11	0.19	0.58:1	5000	535
🔧	Checkbox.Fluent	0.64	0.34	1.88:1	1000	638
🦄	Dialog.Fluent	0.15	0.22	0.68:1	5000	755
🔧	Dropdown.Fluent	3.11	0.4	7.78:1	1000	3112
🔧	Icon.Fluent	0.12	0.06	2:1	5000	611
🦄	Image.Fluent	0.08	0.12	0.67:1	5000	386
🔧	Slider.Fluent	1.6	0.46	3.48:1	1000	1601
🔧	Text.Fluent	0.07	0.03	2.33:1	5000	351
🦄	Tooltip.Fluent	0.14	0.89	0.16:1	5000	715

🔧 Needs work 🎯 On target 🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
PortalMinimalPerf.default	191	179	1.07:1
CardMinimalPerf.default	567	540	1.05:1
ChatWithPopoverPerf.default	405	384	1.05:1
AttachmentSlotsPerf.default	1162	1121	1.04:1
EmbedMinimalPerf.default	4222	4070	1.04:1
LayoutMinimalPerf.default	384	368	1.04:1
StatusMinimalPerf.default	697	671	1.04:1
Avatar.Fluent	353	339	1.04:1
BoxMinimalPerf.default	376	366	1.03:1
ChatMinimalPerf.default	632	615	1.03:1
DropdownMinimalPerf.default	3145	3057	1.03:1
RadioGroupMinimalPerf.default	447	435	1.03:1
TableMinimalPerf.default	422	411	1.03:1
Button.Fluent	535	520	1.03:1
AnimationMinimalPerf.default	431	422	1.02:1
ButtonSlotsPerf.default	562	551	1.02:1
ButtonUseCssPerf.default	821	805	1.02:1
ChatDuplicateMessagesPerf.default	289	284	1.02:1
ListWith60ListItems.default	651	641	1.02:1
ReactionMinimalPerf.default	394	388	1.02:1
TableManyItemsPerf.default	1917	1888	1.02:1
TreeWith60ListItems.default	188	185	1.02:1
Dialog.Fluent	755	742	1.02:1
Slider.Fluent	1601	1576	1.02:1
ButtonOverridesMissPerf.default	1722	1713	1.01:1
ButtonUseCssNestingPerf.default	1089	1081	1.01:1
CarouselMinimalPerf.default	474	468	1.01:1
DividerMinimalPerf.default	377	374	1.01:1
GridMinimalPerf.default	360	357	1.01:1
HeaderMinimalPerf.default	383	378	1.01:1
MenuMinimalPerf.default	894	883	1.01:1
PopupMinimalPerf.default	718	711	1.01:1
SegmentMinimalPerf.default	360	357	1.01:1
SkeletonMinimalPerf.default	376	371	1.01:1
SliderMinimalPerf.default	1602	1590	1.01:1
TextMinimalPerf.default	367	363	1.01:1
ToolbarMinimalPerf.default	971	962	1.01:1
TooltipMinimalPerf.default	978	971	1.01:1
Image.Fluent	386	381	1.01:1
CheckboxMinimalPerf.default	2747	2750	1:1
DatepickerMinimalPerf.default	43996	44077	1:1
FlexMinimalPerf.default	308	309	1:1
ItemLayoutMinimalPerf.default	1273	1272	1:1
ListCommonPerf.default	640	638	1:1
ProviderMergeThemesPerf.default	1712	1705	1:1
SplitButtonMinimalPerf.default	3731	3713	1:1
CustomToolbarPrototype.default	3838	3850	1:1
TreeMinimalPerf.default	781	779	1:1
Checkbox.Fluent	638	635	1:1
Icon.Fluent	611	614	1:1
Tooltip.Fluent	715	718	1:1
AvatarMinimalPerf.default	208	210	0.99:1
DialogMinimalPerf.default	733	742	0.99:1
HeaderSlotsPerf.default	763	773	0.99:1
InputMinimalPerf.default	1261	1278	0.99:1
ListNestedPerf.default	550	557	0.99:1
MenuButtonMinimalPerf.default	1568	1589	0.99:1
ProviderMinimalPerf.default	995	1007	0.99:1
RefMinimalPerf.default	248	250	0.99:1
TextAreaMinimalPerf.default	498	504	0.99:1
VideoMinimalPerf.default	626	632	0.99:1
Dropdown.Fluent	3112	3132	0.99:1
Text.Fluent	351	355	0.99:1
ButtonMinimalPerf.default	178	182	0.98:1
ListMinimalPerf.default	510	521	0.98:1
RosterPerf.default	1184	1203	0.98:1
AlertMinimalPerf.default	278	288	0.97:1
LoaderMinimalPerf.default	699	720	0.97:1
DropdownManyItemsPerf.default	679	708	0.96:1
FormMinimalPerf.default	403	419	0.96:1
LabelMinimalPerf.default	396	413	0.96:1
IconMinimalPerf.default	611	638	0.96:1
AccordionMinimalPerf.default	161	170	0.95:1
ImageMinimalPerf.default	364	386	0.94:1
AttachmentMinimalPerf.default	164	177	0.93:1

Co-authored-by: ling1726 <lingfangao@hotmail.com>

codesandbox-ci · 2021-04-06T15:33:14Z

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 99e86b7:

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

…ui into feature/accordion-a11y

bsunderhus · 2021-04-07T18:02:55Z

Blocked by microsoft/tabster#16

bsunderhus · 2021-04-09T09:39:55Z

This PR will not implement the Circular feature due to microsoft/tabster#16

msft-fluent-ui-bot · 2021-04-10T03:26:50Z

🎉@fluentui/react-accordion@v9.0.0-alpha.13 has been released which incorporates this pull request.:tada:

Handy links:

msft-fluent-ui-bot · 2021-04-10T03:27:02Z

🎉@fluentui/react-examples@v8.15.0 has been released which incorporates this pull request.:tada:

Handy links:

* Update Spec for A11y implementation * Adds initial A11y implementation * Update packages/react-accordion/Spec.md Co-authored-by: ling1726 <lingfangao@hotmail.com> * Change files * Uses react-tabster getTabsterAttribute instead of internal API * Updates API * Updates snapshots * Removes circular navigation feature * Adds better handling for keyDown vent * Fix Requested changes Co-authored-by: ling1726 <lingfangao@hotmail.com>

Update Spec for A11y implementation

d794b40

bsunderhus added the Component: Accordion label Apr 1, 2021

bsunderhus self-assigned this Apr 1, 2021

Adds initial A11y implementation

29cf192

bsunderhus requested a review from ling1726 April 6, 2021 10:12

ling1726 reviewed Apr 6, 2021

View reviewed changes

Comment thread packages/react-accordion/Spec.md Outdated

ling1726 reviewed Apr 6, 2021

View reviewed changes

Comment thread packages/react-accordion/Spec.md

Update packages/react-accordion/Spec.md

24f301d

Co-authored-by: ling1726 <lingfangao@hotmail.com>

bsunderhus added 2 commits April 7, 2021 09:30

Merge branch 'feature/accordion-a11y' of github.com:bsunderhus/fluent…

9aff520

…ui into feature/accordion-a11y

Change files

4b60a94

bsunderhus added the Status: Blocked Resolution blocked by another issue label Apr 7, 2021

bsunderhus mentioned this pull request Apr 9, 2021

react-accordion - disabled state styling #17745

Merged

1 task

bsunderhus added 4 commits April 9, 2021 06:32

Uses react-tabster getTabsterAttribute instead of internal API

6cefe7c

Updates API

2a09741

Updates snapshots

1399b65

Merge branch 'master' into feature/accordion-a11y

a2bc497

bsunderhus marked this pull request as ready for review April 9, 2021 09:36

Removes circular navigation feature

46f5840

bsunderhus removed the Status: Blocked Resolution blocked by another issue label Apr 9, 2021

bsunderhus requested review from layershifter and ling1726 April 9, 2021 09:43

ling1726 reviewed Apr 9, 2021

View reviewed changes

Comment thread packages/react-accordion/etc/react-accordion.api.md Outdated

ling1726 reviewed Apr 9, 2021

View reviewed changes

Comment thread packages/react-accordion/src/components/Accordion/useAccordion.ts Outdated

ling1726 reviewed Apr 9, 2021

View reviewed changes

Comment thread packages/react-accordion/src/components/AccordionHeader/useAccordionHeader.ts Outdated

ling1726 reviewed Apr 9, 2021

View reviewed changes

Comment thread packages/react-accordion/src/components/AccordionItem/useAccordionItem.ts

Adds better handling for keyDown vent

bb5c269