Skip to content

Fix: row indices for Grouped DetailsList and GroupedList to improve a11y experience #17591

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TristanWatanabe merged 37 commits into from
Apr 29, 2021
Merged

Fix: row indices for Grouped DetailsList and GroupedList to improve a11y experience #17591

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
c39dc1c
GroupedDetailsList will now have correct row-index for GroupHeader an…
TristanWatanabe Mar 26, 2021
4e23496
DetailsRow now takes groups as a prop which is used to determine ari…
TristanWatanabe Mar 26, 2021
710aeae
updated GroupedList examples to pass groups prop to DetailsRow
TristanWatanabe Mar 26, 2021
4d3f6f1
updated react api file
TristanWatanabe Mar 26, 2021
2db5b0a
updated detailsrow documentationa and minor fix
TristanWatanabe Mar 26, 2021
9ac783e
updated react snapshots
TristanWatanabe Mar 26, 2021
6500587
updated react examples snapshots
TristanWatanabe Mar 26, 2021
ffb2b35
Change files
TristanWatanabe Mar 26, 2021
ac7b2f8
updated change file
TristanWatanabe Mar 26, 2021
c09b031
minor
TristanWatanabe Mar 26, 2021
c57eb45
add aria-rowindex attribute to GroupedHeader.base
TristanWatanabe Mar 26, 2021
099f4db
updated react snapshots
TristanWatanabe Mar 26, 2021
2658ba2
comment cleanup
TristanWatanabe Mar 26, 2021
c1bd18f
fix: build errors
TristanWatanabe Mar 26, 2021
fdb7406
fix: build error
TristanWatanabe Mar 26, 2021
abf03be
added missing dependency
TristanWatanabe Mar 26, 2021
bc6ef98
Merge branch 'master' into 17502
TristanWatanabe Mar 30, 2021
6070c58
fix CI error
TristanWatanabe Mar 30, 2021
280ebde
getItemGroup now returns the row item's exact group
TristanWatanabe Mar 31, 2021
75142d6
remove first for-of loop in getItemGroup
TristanWatanabe Mar 31, 2021
b3b0661
fix CI error
TristanWatanabe Mar 31, 2021
b85267b
update getItemGroup to remove ! operator
TristanWatanabe Apr 12, 2021
23571fd
update getTotalRowCount to remove ! operator
TristanWatanabe Apr 12, 2021
c7abf6e
update DetailsRow props
TristanWatanabe Apr 27, 2021
3412af4
remove aria-posinset calculation from DetailsRow
TristanWatanabe Apr 27, 2021
b9d3a2c
ariaPosinSet and ariaSetSize are now passed in return function of onR…
TristanWatanabe Apr 27, 2021
45172e2
update GroupedList examples topass ariaPosInSet & ariaSetSize to Deta…
TristanWatanabe Apr 27, 2021
f256808
update api
TristanWatanabe Apr 27, 2021
792bfd4
Merge branch 'master' into 17502
TristanWatanabe Apr 27, 2021
aedca56
ci fix
TristanWatanabe Apr 27, 2021
f53007c
add useGroupedDetailsListIndexMap for O(1) lookup of helper variables…
TristanWatanabe Apr 29, 2021
06780a9
GroupedListSection now passes group to onRenderCell, removes ariaPosI…
TristanWatanabe Apr 29, 2021
937e557
DetailsRow now accepts group prop and calculates ariaPosInSet and ari…
TristanWatanabe Apr 29, 2021
7e221ec
update GroupedList examples to pass group prop to DetailsRow
TristanWatanabe Apr 29, 2021
e1a9855
update API
TristanWatanabe Apr 29, 2021
85fd6fe
update DetailsRow type documentation and ci fix
TristanWatanabe Apr 29, 2021
bb0faa8
ci fix
TristanWatanabe Apr 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-b8d144d8-e712-440f-b5c7-ab174642cf85.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "minor",
"comment": "Fix: row indices for Grouped DetailsList and GroupedList to improve a11y experience",
"packageName": "@fluentui/react",
"email": "tristan.watanabe@gmail.com",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-examples-e1fd655b-ac46-4613-a3cf-d09e8ca79b38.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Updated GroupedList examples to pass groups as pro",
"packageName": "@fluentui/react-examples",
"email": "tristan.watanabe@gmail.com",
"dependentChangeType": "patch"
}
10 changes: 8 additions & 2 deletions packages/react-examples/src/react/GroupedList/GroupedList.Basic.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { GroupedList } from '@fluentui/react/lib/GroupedList';
import { GroupedList, IGroup } from '@fluentui/react/lib/GroupedList';
import { IColumn, DetailsRow } from '@fluentui/react/lib/DetailsList';
import { Selection, SelectionMode, SelectionZone } from '@fluentui/react/lib/Selection';
import { Toggle, IToggleStyles } from '@fluentui/react/lib/Toggle';
Expand Down Expand Up @@ -31,7 +31,12 @@ export const GroupedListBasicExample: React.FunctionComponent = () => {
return s;
});

const onRenderCell = (nestingDepth?: number, item?: IExampleItem, itemIndex?: number): React.ReactNode => {
const onRenderCell = (
nestingDepth?: number,
item?: IExampleItem,
itemIndex?: number,
group?: IGroup,
): React.ReactNode => {
return item && typeof itemIndex === 'number' && itemIndex > -1 ? (
<DetailsRow
columns={columns}
Expand All @@ -41,6 +46,7 @@ export const GroupedListBasicExample: React.FunctionComponent = () => {
selection={selection}
selectionMode={SelectionMode.multiple}
compact={isCompactMode}
group={group}
/>
) : null;
};
Expand Down
4 changes: 3 additions & 1 deletion packages/react-examples/src/react/GroupedList/GroupedList.CustomCheckbox.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
IGroupHeaderCheckboxProps,
IGroupHeaderProps,
IGroupRenderProps,
IGroup,
} from '@fluentui/react/lib/GroupedList';
import { IColumn, IObjectWithKey, DetailsRow } from '@fluentui/react/lib/DetailsList';
import { FocusZone } from '@fluentui/react/lib/FocusZone';
Expand Down Expand Up @@ -44,14 +45,15 @@ export const GroupedListCustomCheckboxExample: React.FunctionComponent = () => {
const selection = useConst(() => new Selection({ items }));

const onRenderCell = React.useCallback(
(nestingDepth?: number, item?: IExampleItem, itemIndex?: number): React.ReactNode => (
(nestingDepth?: number, item?: IExampleItem, itemIndex?: number, group?: IGroup): React.ReactNode => (
<DetailsRow
columns={columns}
groupNestingDepth={nestingDepth}
item={item}
itemIndex={itemIndex!}
selection={selection}
selectionMode={SelectionMode.multiple}
group={group}
/>
),
[columns, selection],
Expand Down
10 changes: 10 additions & 0 deletions ...es/react-examples/src/react/__snapshots__/DetailsList.CustomGroupHeaders.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -925,6 +925,7 @@ exports[`Component Examples renders DetailsList.CustomGroupHeaders.Example.tsx c
>
<div
aria-level={2}
aria-rowindex={3}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -1347,6 +1348,7 @@ exports[`Component Examples renders DetailsList.CustomGroupHeaders.Example.tsx c
>
<div
aria-level={2}
aria-rowindex={4}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -1769,6 +1771,7 @@ exports[`Component Examples renders DetailsList.CustomGroupHeaders.Example.tsx c
>
<div
aria-level={2}
aria-rowindex={5}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -2191,6 +2194,7 @@ exports[`Component Examples renders DetailsList.CustomGroupHeaders.Example.tsx c
>
<div
aria-level={2}
aria-rowindex={6}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -2613,6 +2617,7 @@ exports[`Component Examples renders DetailsList.CustomGroupHeaders.Example.tsx c
>
<div
aria-level={2}
aria-rowindex={7}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -3035,6 +3040,7 @@ exports[`Component Examples renders DetailsList.CustomGroupHeaders.Example.tsx c
>
<div
aria-level={2}
aria-rowindex={8}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -3457,6 +3463,7 @@ exports[`Component Examples renders DetailsList.CustomGroupHeaders.Example.tsx c
>
<div
aria-level={2}
aria-rowindex={9}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -3879,6 +3886,7 @@ exports[`Component Examples renders DetailsList.CustomGroupHeaders.Example.tsx c
>
<div
aria-level={2}
aria-rowindex={10}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -4301,6 +4309,7 @@ exports[`Component Examples renders DetailsList.CustomGroupHeaders.Example.tsx c
>
<div
aria-level={2}
aria-rowindex={11}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -4723,6 +4732,7 @@ exports[`Component Examples renders DetailsList.CustomGroupHeaders.Example.tsx c
>
<div
aria-level={2}
aria-rowindex={12}
aria-selected={false}
className=
ms-FocusZone
Expand Down
8 changes: 8 additions & 0 deletions packages/react-examples/src/react/__snapshots__/DetailsList.Grouped.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1243,6 +1243,7 @@ exports[`Component Examples renders DetailsList.Grouped.Example.tsx correctly 1`
aria-expanded={true}
aria-labelledby="GroupHeader10"
aria-level={1}
aria-rowindex={2}
aria-selected={false}
className=
ms-GroupHeader
Expand Down Expand Up @@ -1650,6 +1651,7 @@ exports[`Component Examples renders DetailsList.Grouped.Example.tsx correctly 1`
>
<div
aria-level={2}
aria-rowindex={3}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -2137,6 +2139,7 @@ exports[`Component Examples renders DetailsList.Grouped.Example.tsx correctly 1`
>
<div
aria-level={2}
aria-rowindex={4}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -2645,6 +2648,7 @@ exports[`Component Examples renders DetailsList.Grouped.Example.tsx correctly 1`
aria-expanded={true}
aria-labelledby="GroupHeader12"
aria-level={1}
aria-rowindex={5}
aria-selected={false}
className=
ms-GroupHeader
Expand Down Expand Up @@ -3065,6 +3069,7 @@ exports[`Component Examples renders DetailsList.Grouped.Example.tsx correctly 1`
aria-expanded={true}
aria-labelledby="GroupHeader14"
aria-level={1}
aria-rowindex={6}
aria-selected={false}
className=
ms-GroupHeader
Expand Down Expand Up @@ -3472,6 +3477,7 @@ exports[`Component Examples renders DetailsList.Grouped.Example.tsx correctly 1`
>
<div
aria-level={2}
aria-rowindex={7}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -3959,6 +3965,7 @@ exports[`Component Examples renders DetailsList.Grouped.Example.tsx correctly 1`
>
<div
aria-level={2}
aria-rowindex={8}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -4446,6 +4453,7 @@ exports[`Component Examples renders DetailsList.Grouped.Example.tsx correctly 1`
>
<div
aria-level={2}
aria-rowindex={9}
aria-selected={false}
className=
ms-FocusZone
Expand Down
11 changes: 11 additions & 0 deletions packages/react-examples/src/react/__snapshots__/DetailsList.Grouped.Large.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -898,6 +898,7 @@ exports[`Component Examples renders DetailsList.Grouped.Large.Example.tsx correc
aria-expanded={true}
aria-labelledby="GroupHeader5"
aria-level={1}
aria-rowindex={2}
aria-selected={false}
className=
ms-GroupHeader
Expand Down Expand Up @@ -1305,6 +1306,7 @@ exports[`Component Examples renders DetailsList.Grouped.Large.Example.tsx correc
>
<div
aria-level={2}
aria-rowindex={3}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -1784,6 +1786,7 @@ exports[`Component Examples renders DetailsList.Grouped.Large.Example.tsx correc
>
<div
aria-level={2}
aria-rowindex={4}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -2263,6 +2266,7 @@ exports[`Component Examples renders DetailsList.Grouped.Large.Example.tsx correc
>
<div
aria-level={2}
aria-rowindex={5}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -2742,6 +2746,7 @@ exports[`Component Examples renders DetailsList.Grouped.Large.Example.tsx correc
>
<div
aria-level={2}
aria-rowindex={6}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -3221,6 +3226,7 @@ exports[`Component Examples renders DetailsList.Grouped.Large.Example.tsx correc
>
<div
aria-level={2}
aria-rowindex={7}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -3700,6 +3706,7 @@ exports[`Component Examples renders DetailsList.Grouped.Large.Example.tsx correc
>
<div
aria-level={2}
aria-rowindex={8}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -4179,6 +4186,7 @@ exports[`Component Examples renders DetailsList.Grouped.Large.Example.tsx correc
>
<div
aria-level={2}
aria-rowindex={9}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -4658,6 +4666,7 @@ exports[`Component Examples renders DetailsList.Grouped.Large.Example.tsx correc
>
<div
aria-level={2}
aria-rowindex={10}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -5137,6 +5146,7 @@ exports[`Component Examples renders DetailsList.Grouped.Large.Example.tsx correc
>
<div
aria-level={2}
aria-rowindex={11}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -5616,6 +5626,7 @@ exports[`Component Examples renders DetailsList.Grouped.Large.Example.tsx correc
>
<div
aria-level={2}
aria-rowindex={12}
aria-selected={false}
className=
ms-FocusZone
Expand Down
18 changes: 18 additions & 0 deletions packages/react-examples/src/react/__snapshots__/GroupedList.CustomCheckbox.Example.tsx.shot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -463,7 +463,9 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-posinset={1}
aria-selected={false}
aria-setsize={3}
className=
ms-FocusZone
ms-DetailsRow
Expand Down Expand Up @@ -995,7 +997,9 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-posinset={2}
aria-selected={false}
aria-setsize={3}
className=
ms-FocusZone
ms-DetailsRow
Expand Down Expand Up @@ -1527,7 +1531,9 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-posinset={3}
aria-selected={false}
aria-setsize={3}
className=
ms-FocusZone
ms-DetailsRow
Expand Down Expand Up @@ -2461,7 +2467,9 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-posinset={1}
aria-selected={false}
aria-setsize={3}
className=
ms-FocusZone
ms-DetailsRow
Expand Down Expand Up @@ -2993,7 +3001,9 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-posinset={2}
aria-selected={false}
aria-setsize={3}
className=
ms-FocusZone
ms-DetailsRow
Expand Down Expand Up @@ -3525,7 +3535,9 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-posinset={3}
aria-selected={false}
aria-setsize={3}
className=
ms-FocusZone
ms-DetailsRow
Expand Down Expand Up @@ -4459,7 +4471,9 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-posinset={1}
aria-selected={false}
aria-setsize={3}
className=
ms-FocusZone
ms-DetailsRow
Expand Down Expand Up @@ -4991,7 +5005,9 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-posinset={2}
aria-selected={false}
aria-setsize={3}
className=
ms-FocusZone
ms-DetailsRow
Expand Down Expand Up @@ -5523,7 +5539,9 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-posinset={3}
aria-selected={false}
aria-setsize={3}
className=
ms-FocusZone
ms-DetailsRow
Expand Down
1 change: 1 addition & 0 deletions packages/react/etc/react.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3914,6 +3914,7 @@ export interface IDetailsRowBaseProps extends Pick<IDetailsListProps, 'onRenderI
flatIndexOffset?: number;
getRowAriaDescribedBy?: (item: any) => string;
getRowAriaLabel?: (item: any) => string;
group?: IGroup;
id?: string;
item: any;
itemIndex: number;
Expand Down
Loading