Skip to content

Quick fix for Grouped DetailsList and Groupedlist row index errors#17259

Merged
smhigley merged 3 commits intomicrosoft:masterfrom
smhigley:group-detailslist-rowindex
Mar 9, 2021
Merged

Quick fix for Grouped DetailsList and Groupedlist row index errors#17259
smhigley merged 3 commits intomicrosoft:masterfrom
smhigley:group-detailslist-rowindex

Conversation

@smhigley
Copy link
Contributor

@smhigley smhigley commented Mar 3, 2021

Pull request checklist

  • Addresses an existing issue: Fixes 10869
  • Include a change request file using $ yarn change

Description of changes

This PR cleans up a few remaining semantic issues with grouped detailslist and groupedlist, and adds a workaround for incorrect indices with grouped rows. Specifically:

  • Removes some role="rowgroup" roles to avoid nested rowgroups, which are technically not allowed (automated issue only, no practical impact)

  • Switches from role="group" to role="rowgroup" on treegrid -- that was my mistake earlier, I used the tree semantics instead of the correct grid/treegrid role

  • Removes aria-rowindex and -rowcount entirely from any use of grouped rows with detailslist or groupedlist.

    This allows browser and screen readers to calculate that information correctly in all non-virtualized grids, and even in virtualized grids the linear off-by-x announcements will still be better than the values we provide now, which jump all over the place between detailslist rows and group headers. The biggest win here is now JAWS can navigate the grouped detailslist properly in scan mode, whereas before it missed a number of rows due to incorrect index values.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 3, 2021

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

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

@size-auditor
Copy link

size-auditor bot commented Mar 3, 2021

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-ShimmeredDetailsList 217.264 kB 217.213 kB BelowBaseline     -51 bytes
office-ui-fabric-react fluentui-react-DetailsList 206.296 kB 206.245 kB BelowBaseline     -51 bytes
office-ui-fabric-react fluentui-react-GroupedList 115.989 kB 115.929 kB BelowBaseline     -60 bytes

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

Baseline commit: e63e5ecfe44b87bd4936a38187628b49dc92e049 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 3, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1262 1261 5000
BaseButton mount 1004 992 5000
Breadcrumb mount 45456 44331 5000
ButtonNext mount 1386 1389 5000
Checkbox mount 1642 1660 5000
CheckboxBase mount 1384 1380 5000
ChoiceGroup mount 5159 5139 5000
ComboBox mount 1025 1086 1000
CommandBar mount 10557 10483 1000
ContextualMenu mount 6332 6338 1000
DefaultButton mount 1225 1224 5000
DetailsRow mount 3839 3790 5000
DetailsRowFast mount 3905 3884 5000
DetailsRowNoStyles mount 3668 3659 5000
Dialog mount 1563 1568 1000
DocumentCardTitle mount 1871 1873 1000
Dropdown mount 3580 3557 5000
FocusTrapZone mount 1848 1888 5000
FocusZone mount 1851 1870 5000
IconButton mount 1923 1904 5000
Label mount 343 346 5000
Layer mount 1914 1935 5000
Link mount 494 500 5000
MakeStyles mount 2059 2074 50000
MenuButton mount 1591 1606 5000
MessageBar mount 2074 2131 5000
Nav mount 3508 3486 1000
OverflowSet mount 1091 1104 5000
Panel mount 1537 1542 1000
Persona mount 879 890 1000
Pivot mount 1499 1510 1000
PrimaryButton mount 1378 1408 5000
Rating mount 8189 8274 5000
SearchBox mount 1451 1447 5000
Shimmer mount 2771 2857 5000
Slider mount 2148 2096 5000
SpinButton mount 5227 5365 5000
Spinner mount 419 431 5000
SplitButton mount 3371 3388 5000
Stack mount 546 542 5000
StackWithIntrinsicChildren mount 1649 1688 5000
StackWithTextChildren mount 5024 5020 5000
SwatchColorPicker mount 10780 11037 5000
Tabs mount 1507 1501 1000
TagPicker mount 3047 2918 5000
TeachingBubble mount 12116 12134 5000
Text mount 449 464 5000
TextField mount 1508 1502 5000
ThemeProvider mount 1246 1237 5000
ThemeProvider virtual-rerender 621 637 5000
ThemeProviderNext mount 15920 15973 5000
Toggle mount 849 885 5000
buttonNative mount 126 124 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.2 0.51 0.39:1 2000 397
🦄 Button.Fluent 0.13 0.22 0.59:1 5000 660
🔧 Checkbox.Fluent 0.68 0.38 1.79:1 1000 682
🎯 Dialog.Fluent 0.18 0.23 0.78:1 5000 892
🔧 Dropdown.Fluent 3.26 0.45 7.24:1 1000 3264
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 759
🦄 Image.Fluent 0.09 0.13 0.69:1 5000 467
🔧 Slider.Fluent 1.7 0.51 3.33:1 1000 1696
🔧 Text.Fluent 0.09 0.03 3:1 5000 434
🦄 Tooltip.Fluent 0.12 0.94 0.13:1 5000 605

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 206 186 1.11:1
RefMinimalPerf.default 281 256 1.1:1
ButtonMinimalPerf.default 218 201 1.08:1
TreeWith60ListItems.default 214 200 1.07:1
ChatDuplicateMessagesPerf.default 420 398 1.06:1
ChatMinimalPerf.default 731 699 1.05:1
FormMinimalPerf.default 525 499 1.05:1
HeaderMinimalPerf.default 453 433 1.05:1
IconMinimalPerf.default 779 744 1.05:1
VideoMinimalPerf.default 740 708 1.05:1
HeaderSlotsPerf.default 921 885 1.04:1
PopupMinimalPerf.default 779 748 1.04:1
SliderMinimalPerf.default 1698 1631 1.04:1
Image.Fluent 467 448 1.04:1
Text.Fluent 434 418 1.04:1
BoxMinimalPerf.default 434 423 1.03:1
CarouselMinimalPerf.default 554 538 1.03:1
ChatWithPopoverPerf.default 505 491 1.03:1
LabelMinimalPerf.default 513 499 1.03:1
SkeletonMinimalPerf.default 453 438 1.03:1
ToolbarMinimalPerf.default 1118 1084 1.03:1
Avatar.Fluent 397 387 1.03:1
AttachmentSlotsPerf.default 1333 1308 1.02:1
DialogMinimalPerf.default 900 884 1.02:1
ListWith60ListItems.default 713 699 1.02:1
MenuButtonMinimalPerf.default 1773 1740 1.02:1
ProviderMinimalPerf.default 1000 984 1.02:1
TableMinimalPerf.default 491 480 1.02:1
TreeMinimalPerf.default 905 889 1.02:1
Dropdown.Fluent 3264 3215 1.02:1
AccordionMinimalPerf.default 186 185 1.01:1
AvatarMinimalPerf.default 237 234 1.01:1
ButtonUseCssPerf.default 906 895 1.01:1
GridMinimalPerf.default 414 411 1.01:1
ListNestedPerf.default 650 644 1.01:1
MenuMinimalPerf.default 1014 1004 1.01:1
SplitButtonMinimalPerf.default 4157 4120 1.01:1
TableManyItemsPerf.default 2359 2345 1.01:1
TooltipMinimalPerf.default 907 902 1.01:1
Dialog.Fluent 892 879 1.01:1
Slider.Fluent 1696 1683 1.01:1
AnimationMinimalPerf.default 457 455 1:1
ButtonUseCssNestingPerf.default 1179 1174 1:1
CheckboxMinimalPerf.default 3101 3091 1:1
DividerMinimalPerf.default 432 432 1:1
EmbedMinimalPerf.default 4552 4559 1:1
ImageMinimalPerf.default 452 452 1:1
InputMinimalPerf.default 1381 1380 1:1
ListMinimalPerf.default 574 573 1:1
LoaderMinimalPerf.default 791 793 1:1
PortalMinimalPerf.default 175 175 1:1
ProviderMergeThemesPerf.default 1673 1677 1:1
RadioGroupMinimalPerf.default 521 523 1:1
CustomToolbarPrototype.default 3875 3891 1:1
Checkbox.Fluent 682 679 1:1
Icon.Fluent 759 757 1:1
AlertMinimalPerf.default 355 359 0.99:1
ButtonOverridesMissPerf.default 1799 1815 0.99:1
DatepickerMinimalPerf.default 49648 50006 0.99:1
DropdownMinimalPerf.default 3216 3241 0.99:1
ItemLayoutMinimalPerf.default 1401 1415 0.99:1
LayoutMinimalPerf.default 466 473 0.99:1
ListCommonPerf.default 758 767 0.99:1
StatusMinimalPerf.default 854 860 0.99:1
TextMinimalPerf.default 414 417 0.99:1
TextAreaMinimalPerf.default 588 592 0.99:1
Button.Fluent 660 664 0.99:1
DropdownManyItemsPerf.default 807 826 0.98:1
Tooltip.Fluent 605 617 0.98:1
CardMinimalPerf.default 642 664 0.97:1
ReactionMinimalPerf.default 461 473 0.97:1
SegmentMinimalPerf.default 417 429 0.97:1
ButtonSlotsPerf.default 623 649 0.96:1
FlexMinimalPerf.default 343 361 0.95:1
RosterPerf.default 1286 1350 0.95:1

@smhigley smhigley force-pushed the group-detailslist-rowindex branch from 83f7f71 to a7064ec Compare March 3, 2021 21:17
>
<div
aria-level={2}
aria-rowindex={1}
Copy link
Member

Choose a reason for hiding this comment

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

yay!

@smhigley smhigley merged commit 72508b4 into microsoft:master Mar 9, 2021
@smhigley smhigley deleted the group-detailslist-rowindex branch March 9, 2021 23:26
smhigley added a commit to smhigley/fluentui that referenced this pull request Mar 9, 2021
…icrosoft#17259)

* remove incorrect grouped rowindex and count, update rowgroup for automated tests
@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react@v8.1.8 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
…icrosoft#17259)

* remove incorrect grouped rowindex and count, update rowgroup for automated tests
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
…icrosoft#17259)

* remove incorrect grouped rowindex and count, update rowgroup for automated tests
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants