Skip to content

fix(react): DetailsList aria-rowindex off-by-one fix#17423

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

fix(react): DetailsList aria-rowindex off-by-one fix#17423
smhigley merged 3 commits intomicrosoft:masterfrom
smhigley:detailslist-rowindex

Conversation

@smhigley
Copy link
Contributor

@smhigley smhigley commented Mar 15, 2021

Pull request checklist

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

Description of changes

JAWS skips the first row of a DetailsList with visible headers, since the aria-rowindex property incorrectly starts at 1 within the table body, instead of at 2 when column headers are visible.

This PR adds a flatIndexOffset property on DetailsRow, so DetailsList can control the relation between itemIndex and aria-rowindex based on whether headers are visible.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 15, 2021 •
edited
Loading

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 490ff1c:

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

@size-auditor
Copy link

size-auditor bot commented Mar 15, 2021 •
edited
Loading

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-DetailsList 206.267 kB 206.334 kB ExceedsBaseline     67 bytes
office-ui-fabric-react fluentui-react-ShimmeredDetailsList 217.235 kB 217.298 kB ExceedsBaseline     63 bytes

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

Baseline commit: c49525b95c315995c323e2b7efe50c637ceb539e (build)

@smhigley smhigley force-pushed the detailslist-rowindex branch from d3a63c7 to 490ff1c Compare March 16, 2021 19:44
@fabricteam
Copy link
Collaborator

fabricteam commented Mar 16, 2021 •
edited
Loading

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1214 1209 5000
BaseButton mount 1000 969 5000
Breadcrumb mount 44709 45433 5000
ButtonNext mount 1351 1347 5000
Checkbox mount 1687 1634 5000
CheckboxBase mount 1435 1451 5000
ChoiceGroup mount 5117 5122 5000
ComboBox mount 1020 1028 1000
CommandBar mount 10626 10441 1000
ContextualMenu mount 6607 6636 1000
DefaultButton mount 1237 1223 5000
DetailsRow mount 3926 3867 5000
DetailsRowFast mount 3905 3923 5000
DetailsRowNoStyles mount 3725 3711 5000
Dialog mount 1609 1592 1000
DocumentCardTitle mount 1923 1936 1000
Dropdown mount 3637 3619 5000
FocusTrapZone mount 1881 1914 5000
FocusZone mount 1902 1900 5000
IconButton mount 1922 1897 5000
Label mount 347 360 5000
Layer mount 1942 1940 5000
Link mount 493 486 5000
MakeStyles mount 2018 2005 50000
MenuButton mount 1618 1619 5000
MessageBar mount 2242 2137 5000
Nav mount 3595 3565 1000
OverflowSet mount 1115 1141 5000
Panel mount 1519 1577 1000
Persona mount 866 851 1000
Pivot mount 1501 1517 1000
PrimaryButton mount 1357 1368 5000
Rating mount 8398 8311 5000
SearchBox mount 1505 1536 5000
Shimmer mount 2914 2870 5000
Slider mount 2215 2192 5000
SpinButton mount 5587 5600 5000
Spinner mount 457 484 5000
SplitButton mount 3617 3569 5000
Stack mount 577 584 5000
StackWithIntrinsicChildren mount 1713 1720 5000
StackWithTextChildren mount 5161 5200 5000
SwatchColorPicker mount 10935 11158 5000
Tabs mount 1515 1513 1000
TagPicker mount 2961 3037 5000
TeachingBubble mount 12329 12243 5000
Text mount 457 474 5000
TextField mount 1506 1554 5000
ThemeProvider mount 1279 1284 5000
ThemeProvider virtual-rerender 633 636 5000
ThemeProviderNext mount 16147 16206 5000
Toggle mount 885 919 5000
buttonNative mount 118 116 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.21 0.52 0.4:1 2000 411
🦄 Button.Fluent 0.14 0.22 0.64:1 5000 687
🔧 Checkbox.Fluent 0.7 0.39 1.79:1 1000 701
🎯 Dialog.Fluent 0.18 0.24 0.75:1 5000 893
🔧 Dropdown.Fluent 3.3 0.45 7.33:1 1000 3300
🔧 Icon.Fluent 0.15 0.07 2.14:1 5000 754
🎯 Image.Fluent 0.1 0.14 0.71:1 5000 480
🔧 Slider.Fluent 1.65 0.54 3.06:1 1000 1653
🔧 Text.Fluent 0.08 0.03 2.67:1 5000 418
🦄 Tooltip.Fluent 0.15 0.96 0.16:1 5000 774

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 221 193 1.15:1
RefMinimalPerf.default 279 254 1.1:1
ChatDuplicateMessagesPerf.default 347 321 1.08:1
FlexMinimalPerf.default 373 350 1.07:1
Avatar.Fluent 411 383 1.07:1
ButtonMinimalPerf.default 213 202 1.05:1
SkeletonMinimalPerf.default 461 440 1.05:1
TextAreaMinimalPerf.default 619 589 1.05:1
ChatMinimalPerf.default 730 704 1.04:1
DividerMinimalPerf.default 461 442 1.04:1
DropdownManyItemsPerf.default 837 801 1.04:1
GridMinimalPerf.default 438 423 1.04:1
RadioGroupMinimalPerf.default 558 537 1.04:1
ReactionMinimalPerf.default 489 471 1.04:1
TextMinimalPerf.default 442 426 1.04:1
Image.Fluent 480 461 1.04:1
AlertMinimalPerf.default 348 339 1.03:1
AnimationMinimalPerf.default 462 447 1.03:1
ItemLayoutMinimalPerf.default 1449 1412 1.03:1
ListNestedPerf.default 685 668 1.03:1
PopupMinimalPerf.default 793 769 1.03:1
PortalMinimalPerf.default 185 179 1.03:1
ProviderMinimalPerf.default 1044 1017 1.03:1
ToolbarMinimalPerf.default 1142 1106 1.03:1
TreeMinimalPerf.default 937 911 1.03:1
VideoMinimalPerf.default 767 744 1.03:1
AccordionMinimalPerf.default 185 181 1.02:1
AvatarMinimalPerf.default 227 222 1.02:1
ButtonOverridesMissPerf.default 1830 1791 1.02:1
DatepickerMinimalPerf.default 50535 49388 1.02:1
ImageMinimalPerf.default 471 464 1.02:1
ListWith60ListItems.default 722 708 1.02:1
LoaderMinimalPerf.default 808 791 1.02:1
StatusMinimalPerf.default 882 864 1.02:1
Dialog.Fluent 893 879 1.02:1
BoxMinimalPerf.default 419 413 1.01:1
ButtonSlotsPerf.default 654 647 1.01:1
CardMinimalPerf.default 665 656 1.01:1
DialogMinimalPerf.default 896 884 1.01:1
DropdownMinimalPerf.default 3306 3275 1.01:1
FormMinimalPerf.default 533 529 1.01:1
InputMinimalPerf.default 1415 1400 1.01:1
LabelMinimalPerf.default 513 507 1.01:1
LayoutMinimalPerf.default 482 476 1.01:1
MenuMinimalPerf.default 1027 1021 1.01:1
SegmentMinimalPerf.default 434 428 1.01:1
SplitButtonMinimalPerf.default 4242 4209 1.01:1
IconMinimalPerf.default 794 788 1.01:1
TableManyItemsPerf.default 2425 2408 1.01:1
TooltipMinimalPerf.default 1102 1091 1.01:1
Checkbox.Fluent 701 695 1.01:1
Icon.Fluent 754 746 1.01:1
ButtonUseCssPerf.default 896 897 1:1
CarouselMinimalPerf.default 546 546 1:1
ChatWithPopoverPerf.default 420 420 1:1
EmbedMinimalPerf.default 4612 4628 1:1
HeaderMinimalPerf.default 445 446 1:1
CustomToolbarPrototype.default 4012 4030 1:1
Button.Fluent 687 687 1:1
Dropdown.Fluent 3300 3313 1:1
AttachmentSlotsPerf.default 1296 1314 0.99:1
ButtonUseCssNestingPerf.default 1190 1198 0.99:1
CheckboxMinimalPerf.default 2995 3025 0.99:1
HeaderSlotsPerf.default 926 933 0.99:1
ListMinimalPerf.default 596 599 0.99:1
TableMinimalPerf.default 485 488 0.99:1
Tooltip.Fluent 774 782 0.99:1
AttachmentMinimalPerf.default 189 193 0.98:1
ProviderMergeThemesPerf.default 1669 1708 0.98:1
SliderMinimalPerf.default 1708 1740 0.98:1
Slider.Fluent 1653 1685 0.98:1
Text.Fluent 418 427 0.98:1
ListCommonPerf.default 752 777 0.97:1
MenuButtonMinimalPerf.default 1790 1836 0.97:1
RosterPerf.default 1263 1327 0.95:1

@smhigley smhigley closed this Mar 19, 2021
@smhigley smhigley reopened this Mar 19, 2021
@smhigley smhigley merged commit a1783ed into microsoft:master Mar 19, 2021
@smhigley smhigley mentioned this pull request Mar 19, 2021
Closed
@msft-fluent-ui-bot
Copy link
Collaborator

msft-fluent-ui-bot commented Mar 22, 2021

🎉@fluentui/react@v8.5.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
@smhigley @joshualamusga1
fix(react): DetailsList aria-rowindex off-by-one fix (microsoft#17423)
dee862f 
* Add DetailsRow flatIndexOffset property to handle tracking ARIA rowindex separately from the functional data index
miroslavstastny pushed a commit to miroslavstastny/fluentui that referenced this pull request May 5, 2021
@smhigley @miroslavstastny
fix(react): DetailsList aria-rowindex off-by-one fix (microsoft#17423)
dfb7f71 
* Add DetailsRow flatIndexOffset property to handle tracking ARIA rowindex separately from the functional data index
@smhigley smhigley mentioned this pull request Nov 2, 2021
Closed
3 tasks
@TristanWatanabe TristanWatanabe mentioned this pull request Nov 2, 2021
Merged
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ThomasMichon ThomasMichon ThomasMichon approved these changes

@cschlechty cschlechty cschlechty approved these changes

Assignees

@khmakoto khmakoto

Labels

Component: DetailsList PR: API Modified

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@smhigley @fabricteam @msft-fluent-ui-bot @ThomasMichon @cschlechty @khmakoto