GroupedListV2: update aria-posinset and aria-rowindex by spmonahan · Pull Request #25520 · microsoft/fluentui

spmonahan · 2022-11-04T00:31:57Z

Current Behavior

The incorrect value for aria-posinset was set on GroupedListV2. When used in DetailsList aria-rowindex was not set and aria-level and aria-posinset were incorrectly set.

New Behavior

Set the correct aria-posinset and aria-rowindex values on GroupedListV2 depending on role.

Related Issue(s)

Fixes #24795

Changes the way aria-posinset is computed when the GroupedList role is set to "treegrid", the default role for GroupedList. In this case aria-posinset is the index within the current set. In all other cases only aria-rowindex is set. This case specifically is used in grouped DetailsList.

size-auditor · 2022-11-04T00:44:48Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-GroupedListV2	116.644 kB	116.787 kB	143 bytes
office-ui-fabric-react	fluentui-react-GroupedList	128.872 kB	129.015 kB	143 bytes

Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B

Baseline commit: 4f5eec8081eed87fce6e8c4a071fb48e37629d1c (build)

codesandbox-ci · 2022-11-04T00:44:53Z

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 674569a:

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

fabricteam · 2022-11-04T00:46:33Z

📊 Bundle size report

_{🤖 This report was generated against 76ebdee7eba4a9decbc1df97f3ff62b7784fdb8f}

fabricteam · 2022-11-04T00:59:58Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1198	1213	5000
Breadcrumb	mount	2747	2746	1000
Checkbox	mount	2633	2652	5000
CheckboxBase	mount	2364	2359	5000
ChoiceGroup	mount	4313	4276	5000
ComboBox	mount	1170	1167	1000
CommandBar	mount	9245	9237	1000
ContextualMenu	mount	10236	10298	1000
DefaultButton	mount	1358	1361	5000
DetailsRow	mount	3379	3322	5000
DetailsRowFast	mount	3433	3405	5000
DetailsRowNoStyles	mount	3245	3281	5000
Dialog	mount	2982	2948	1000
DocumentCardTitle	mount	584	581	1000
Dropdown	mount	3160	3173	5000
FocusTrapZone	mount	1937	1954	5000
FocusZone	mount	1918	1921	5000
GroupedList	mount	1827	2061	2
GroupedList	virtual-rerender	1094	1088	2
GroupedList	virtual-rerender-with-unmount	1621	1600	2
GroupedListV2	mount	558	575	2
GroupedListV2	virtual-rerender	538	546	2
GroupedListV2	virtual-rerender-with-unmount	576	546	2
IconButton	mount	1786	1773	5000
Label	mount	748	750	5000
Layer	mount	4217	4180	5000
Link	mount	850	857	5000
MenuButton	mount	1600	1612	5000
MessageBar	mount	2339	2345	5000
Nav	mount	3071	3075	1000
OverflowSet	mount	1391	1404	5000
Panel	mount	2504	2534	1000
Persona	mount	1261	1252	1000
Pivot	mount	1509	1528	1000
PrimaryButton	mount	1482	1480	5000
Rating	mount	6970	6960	5000
SearchBox	mount	1496	1491	5000
Shimmer	mount	2913	2914	5000
Slider	mount	2098	2094	5000
SpinButton	mount	4248	4526	5000
Spinner	mount	834	836	5000
SplitButton	mount	2847	2847	5000
Stack	mount	862	873	5000
StackWithIntrinsicChildren	mount	2370	2343	5000
StackWithTextChildren	mount	5073	5041	5000
SwatchColorPicker	mount	9564	9524	5000
TagPicker	mount	2323	2349	5000
TeachingBubble	mount	75728	75567	5000
Text	mount	819	815	5000
TextField	mount	1563	1524	5000
ThemeProvider	mount	1442	1448	5000
ThemeProvider	virtual-rerender	1138	1131	5000
ThemeProvider	virtual-rerender-with-unmount	1990	1998	5000
Toggle	mount	1148	1142	5000
buttonNative	mount	534	545	5000

smhigley

couple questions, otherwise the flattened vs. group index calc looks good

packages/react/src/components/GroupedList/GroupedListV2.base.tsx

Add two DetailsList examples that use GroupedListV2 under the hood. Update the doc site to show these examples.

GroupedListV1 case `onRenderCell` to `any`, allowing an additional `group` prop to be passed to this render callback. This updates `IGroupedListV2Props` to include this as an optional argument to the `onRenderCell` callback. Passing `group` is necessary as it holds the information needed to set `aria-posinset` and `aria-setsize` for non-expandable rows.

smhigley

🎉

packages/react/src/components/GroupedList/GroupedListV2.types.ts

Co-authored-by: Esteban Munoz Facusse <esteban.230@hotmail.com>

* groupedlistv2: update aria positioning attributes Changes the way aria-posinset is computed when the GroupedList role is set to "treegrid", the default role for GroupedList. In this case aria-posinset is the index within the current set. In all other cases only aria-rowindex is set. This case specifically is used in grouped DetailsList. * groupedlistv2: add detailslist examples Add two DetailsList examples that use GroupedListV2 under the hood. Update the doc site to show these examples. * dl * groupedlistv2: properly set aria values for non-expandable rows GroupedListV1 case `onRenderCell` to `any`, allowing an additional `group` prop to be passed to this render callback. This updates `IGroupedListV2Props` to include this as an optional argument to the `onRenderCell` callback. Passing `group` is necessary as it holds the information needed to set `aria-posinset` and `aria-setsize` for non-expandable rows. * groupedlistv2: make some props optional * Apply suggestions from code review Co-authored-by: Esteban Munoz Facusse <esteban.230@hotmail.com> Co-authored-by: Esteban Munoz Facusse <esteban.230@hotmail.com>

spmonahan requested review from a team and ThomasMichon as code owners November 4, 2022 00:31

msft-fluent-ui-bot added the Component: GroupedList label Nov 4, 2022

msft-fluent-ui-bot assigned smhigley Nov 4, 2022

spmonahan requested a review from smhigley November 4, 2022 00:32

msft-fluent-ui-bot added the Area: Accessibility label Nov 4, 2022

github-actions bot added this to the October Project Cycle Q4 2022 milestone Nov 4, 2022

smhigley reviewed Nov 4, 2022

View reviewed changes

packages/react/src/components/GroupedList/GroupedListV2.base.tsx Show resolved Hide resolved

packages/react/src/components/GroupedList/GroupedListV2.base.tsx Show resolved Hide resolved

spmonahan added 3 commits November 11, 2022 16:18

groupedlistv2: add detailslist examples

d2d1a71

Add two DetailsList examples that use GroupedListV2 under the hood. Update the doc site to show these examples.

dl

c79a430

spmonahan requested a review from a team as a code owner November 12, 2022 00:57

spmonahan requested a review from smhigley November 12, 2022 00:59

groupedlistv2: make some props optional

6c4619b

msft-fluent-ui-bot added the PR: API Modified label Nov 15, 2022

smhigley approved these changes Nov 15, 2022

View reviewed changes

spmonahan mentioned this pull request Nov 15, 2022

GroupedListV2: update to use correct semantics when used within DetailsList #24796

Closed

sopranopillow approved these changes Nov 15, 2022

View reviewed changes

packages/react/src/components/GroupedList/GroupedListV2.types.ts Outdated Show resolved Hide resolved

packages/react/src/components/GroupedList/GroupedListV2.types.ts Outdated Show resolved Hide resolved

Apply suggestions from code review

674569a

Co-authored-by: Esteban Munoz Facusse <esteban.230@hotmail.com>

spmonahan merged commit 00815ce into microsoft:master Nov 15, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GroupedListV2: update aria-posinset and aria-rowindex#25520

GroupedListV2: update aria-posinset and aria-rowindex#25520
spmonahan merged 6 commits intomicrosoft:masterfrom
spmonahan:groupedlistv2/aria-attributes

spmonahan commented Nov 4, 2022

Uh oh!

size-auditor bot commented Nov 4, 2022 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Nov 4, 2022 •

edited

Loading

Uh oh!

fabricteam commented Nov 4, 2022 •

edited

Loading

Uh oh!

fabricteam commented Nov 4, 2022 •

edited

Loading

Uh oh!

smhigley left a comment

Uh oh!

Uh oh!

Uh oh!

smhigley left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

spmonahan commented Nov 4, 2022

Current Behavior

New Behavior

Related Issue(s)

Uh oh!

size-auditor bot commented Nov 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

codesandbox-ci bot commented Nov 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Nov 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Nov 4, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

smhigley left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

smhigley left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

size-auditor bot commented Nov 4, 2022 •

edited

Loading

codesandbox-ci bot commented Nov 4, 2022 •

edited

Loading

fabricteam commented Nov 4, 2022 •

edited

Loading

fabricteam commented Nov 4, 2022 •

edited

Loading

Perf Analysis (`@fluentui/react`)