Skip to content

react-accordion - Adds id control for AccordionHeader and AccordionPanel#17547

Merged
bsunderhus merged 3 commits intomasterfrom
bsunderhus/accordion-adds-shared-id-control
Mar 24, 2021
Merged

react-accordion - Adds id control for AccordionHeader and AccordionPanel#17547
bsunderhus merged 3 commits intomasterfrom
bsunderhus/accordion-adds-shared-id-control

Conversation

@bsunderhus
Copy link
Copy Markdown
Contributor

Pull request checklist

  • Include a change request file using $ yarn change

Description of changes

A common problem on Compound Components is sharing id information between siblings to ensure a11y. This PR introduces a simple usage of the descendants API to solve that.

@bsunderhus bsunderhus self-assigned this Mar 24, 2021
@bsunderhus bsunderhus enabled auto-merge (squash) March 24, 2021 13:38
@codesandbox-ci
Copy link
Copy Markdown

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

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

@size-auditor
Copy link
Copy Markdown

size-auditor bot commented Mar 24, 2021

Asset size changes

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

Baseline commit: f6fdb8a4774489c354e7b0fbaec37485ffe7920b (build)

@fabricteam
Copy link
Copy Markdown
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 924 923 5000
BaseButton mount 914 911 5000
Breadcrumb mount 40553 40371 5000
ButtonNext mount 1245 1233 5000
Checkbox mount 1560 1558 5000
CheckboxBase mount 1316 1323 5000
ChoiceGroup mount 4748 4828 5000
ComboBox mount 956 924 1000
CommandBar mount 9735 9641 1000
ContextualMenu mount 5892 5867 1000
DefaultButton mount 1132 1122 5000
DetailsRow mount 3542 3636 5000
DetailsRowFast mount 3567 3629 5000
DetailsRowNoStyles mount 3435 3452 5000
Dialog mount 1447 1426 1000
DocumentCardTitle mount 1768 1744 1000
Dropdown mount 3307 3267 5000
FocusTrapZone mount 1755 1734 5000
FocusZone mount 1727 1726 5000
IconButton mount 1763 1772 5000
Label mount 324 339 5000
Layer mount 1758 1789 5000
Link mount 450 455 5000
MakeStyles mount 1617 1587 50000
MenuButton mount 1496 1478 5000
MessageBar mount 1925 1941 5000
Nav mount 3205 3194 1000
OverflowSet mount 1025 993 5000
Panel mount 1455 1374 1000
Persona mount 834 842 1000
Pivot mount 1415 1425 1000
PrimaryButton mount 1307 1322 5000
Rating mount 7828 7871 5000
SearchBox mount 1381 1394 5000
Shimmer mount 2661 2638 5000
Slider mount 1994 1990 5000
SpinButton mount 5156 5029 5000
Spinner mount 412 410 5000
SplitButton mount 3230 3262 5000
Stack mount 507 533 5000
StackWithIntrinsicChildren mount 1544 1539 5000
StackWithTextChildren mount 4707 4772 5000
SwatchColorPicker mount 10448 10344 5000
Tabs mount 1444 1460 1000
TagPicker mount 2908 2858 5000
TeachingBubble mount 11615 11714 5000
Text mount 425 429 5000
TextField mount 1404 1397 5000
ThemeProvider mount 1154 1158 5000
ThemeProvider virtual-rerender 562 570 5000
ThemeProviderNext mount 14813 14899 5000
Toggle mount 818 808 5000
buttonNative mount 105 110 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 366
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 624
🔧 Checkbox.Fluent 0.65 0.38 1.71:1 1000 649
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 816
🔧 Dropdown.Fluent 3.11 0.43 7.23:1 1000 3112
🔧 Icon.Fluent 0.14 0.06 2.33:1 5000 722
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 454
🔧 Slider.Fluent 1.53 0.45 3.4:1 1000 1534
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 411
🦄 Tooltip.Fluent 0.15 0.89 0.17:1 5000 727

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AvatarMinimalPerf.default 235 215 1.09:1
PortalMinimalPerf.default 180 165 1.09:1
ButtonMinimalPerf.default 209 193 1.08:1
ListMinimalPerf.default 582 540 1.08:1
ButtonSlotsPerf.default 632 589 1.07:1
VideoMinimalPerf.default 703 660 1.07:1
Image.Fluent 454 423 1.07:1
BoxMinimalPerf.default 433 408 1.06:1
ChatWithPopoverPerf.default 420 397 1.06:1
GridMinimalPerf.default 418 394 1.06:1
ListNestedPerf.default 636 598 1.06:1
RefMinimalPerf.default 246 231 1.06:1
TableMinimalPerf.default 475 448 1.06:1
CarouselMinimalPerf.default 528 503 1.05:1
LayoutMinimalPerf.default 463 440 1.05:1
SkeletonMinimalPerf.default 433 411 1.05:1
AttachmentMinimalPerf.default 185 178 1.04:1
AttachmentSlotsPerf.default 1280 1232 1.04:1
ChatMinimalPerf.default 693 665 1.04:1
DialogMinimalPerf.default 855 823 1.04:1
FlexMinimalPerf.default 348 336 1.04:1
HeaderMinimalPerf.default 434 416 1.04:1
LabelMinimalPerf.default 473 457 1.04:1
RadioGroupMinimalPerf.default 504 486 1.04:1
TextMinimalPerf.default 415 399 1.04:1
Text.Fluent 411 394 1.04:1
DividerMinimalPerf.default 436 423 1.03:1
ListCommonPerf.default 712 688 1.03:1
MenuMinimalPerf.default 951 925 1.03:1
StatusMinimalPerf.default 801 779 1.03:1
IconMinimalPerf.default 742 719 1.03:1
ToolbarMinimalPerf.default 1043 1017 1.03:1
TreeWith60ListItems.default 190 185 1.03:1
Avatar.Fluent 366 357 1.03:1
Dropdown.Fluent 3112 3014 1.03:1
DropdownManyItemsPerf.default 789 772 1.02:1
HeaderSlotsPerf.default 901 880 1.02:1
PopupMinimalPerf.default 717 706 1.02:1
ProviderMinimalPerf.default 943 921 1.02:1
CustomToolbarPrototype.default 3708 3650 1.02:1
ButtonUseCssPerf.default 872 865 1.01:1
ButtonUseCssNestingPerf.default 1121 1112 1.01:1
LoaderMinimalPerf.default 745 734 1.01:1
MenuButtonMinimalPerf.default 1685 1670 1.01:1
ReactionMinimalPerf.default 454 451 1.01:1
SplitButtonMinimalPerf.default 3858 3808 1.01:1
TooltipMinimalPerf.default 974 963 1.01:1
Checkbox.Fluent 649 645 1.01:1
Dialog.Fluent 816 810 1.01:1
Icon.Fluent 722 716 1.01:1
Tooltip.Fluent 727 722 1.01:1
AnimationMinimalPerf.default 426 424 1:1
ButtonOverridesMissPerf.default 1724 1732 1:1
CardMinimalPerf.default 613 612 1:1
CheckboxMinimalPerf.default 2826 2834 1:1
DatepickerMinimalPerf.default 46653 46551 1:1
DropdownMinimalPerf.default 3045 3054 1:1
EmbedMinimalPerf.default 4264 4283 1:1
InputMinimalPerf.default 1282 1288 1:1
ItemLayoutMinimalPerf.default 1295 1297 1:1
ProviderMergeThemesPerf.default 1531 1524 1:1
SegmentMinimalPerf.default 406 408 1:1
SliderMinimalPerf.default 1544 1542 1:1
TableManyItemsPerf.default 2191 2199 1:1
TextAreaMinimalPerf.default 556 555 1:1
FormMinimalPerf.default 484 487 0.99:1
Button.Fluent 624 629 0.99:1
ListWith60ListItems.default 670 684 0.98:1
RosterPerf.default 1201 1226 0.98:1
AccordionMinimalPerf.default 171 177 0.97:1
ChatDuplicateMessagesPerf.default 296 305 0.97:1
TreeMinimalPerf.default 832 860 0.97:1
Slider.Fluent 1534 1581 0.97:1
AlertMinimalPerf.default 313 333 0.94:1
ImageMinimalPerf.default 416 444 0.94:1

const expandIconPosition = useContextSelector(accordionContext, ctx => ctx.expandIconPosition);
const size = useContextSelector(accordionContext, ctx => ctx.size);
const id = useId('accordion-header-', props.id);
const panel = useDescendants(accordionItemDescendantContext)[1] as AccordionItemDescendant | undefined;
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.

You could encapsulate the usages of useDescendants with smth like useAccordionHeaderDescendant, I think it adds to some nicer readability, but it's definitely a nit

@bsunderhus bsunderhus merged commit ad6de8f into master Mar 24, 2021
@layershifter layershifter deleted the bsunderhus/accordion-adds-shared-id-control branch March 24, 2021 14:59
@msft-fluent-ui-bot
Copy link
Copy Markdown
Collaborator

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

Handy links:

@msft-fluent-ui-bot
Copy link
Copy Markdown
Collaborator

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

Handy links:

joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Mar 25, 2021
…nel (microsoft#17547)

* Adds id control for AccordionHeader and AccordionPanel

* Updates tests

* Change files
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
…nel (microsoft#17547)

* Adds id control for AccordionHeader and AccordionPanel

* Updates tests

* Change files
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.

4 participants