Skip to content

Commit

Permalink
Quick fix for Grouped DetailsList and Groupedlist row index errors (#…
Browse files Browse the repository at this point in the history 
…17259)

* remove incorrect grouped rowindex and count, update rowgroup for automated tests
  • Loading branch information
@smhigley
smhigley authored Mar 9, 2021
1 parent 7f50867 commit 72508b4
Show file tree
Hide file tree
Showing 10 changed files with 22 additions and 61 deletions.
7 changes: 7 additions & 0 deletions change/@fluentui-react-ddc39884-3e55-43d9-aabd-b8e99bcddaac.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Remove incorrect rowindex and rowcount for grouped detailslist and groupedlist, fix remaining automated a11y errors",
"packageName": "@fluentui/react",
"email": "sarah.higley@microsoft.com",
"dependentChangeType": "patch"
}
7 changes: 7 additions & 0 deletions change/@fluentui-react-examples-0a51d21a-710c-4ed9-b58e-b515f57bee3c.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Snapshot updates for detailslist",
"packageName": "@fluentui/react-examples",
"email": "sarah.higley@microsoft.com",
"dependentChangeType": "none"
}
10 changes: 0 additions & 10 deletions ...es/react-examples/src/react/__snapshots__/DetailsList.CustomGroupHeaders.Example.tsx.shot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -924,7 +924,6 @@ exports[`Component Examples renders DetailsList.CustomGroupHeaders.Example.tsx c
>
<div
aria-level={2}
aria-rowindex={1}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -1339,7 +1338,6 @@ exports[`Component Examples renders DetailsList.CustomGroupHeaders.Example.tsx c
>
<div
aria-level={2}
aria-rowindex={2}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -1754,7 +1752,6 @@ 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 @@ -2169,7 +2166,6 @@ 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 @@ -2584,7 +2580,6 @@ 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 @@ -2999,7 +2994,6 @@ 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 @@ -3414,7 +3408,6 @@ 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 @@ -3829,7 +3822,6 @@ 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 @@ -4244,7 +4236,6 @@ 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 @@ -4659,7 +4650,6 @@ exports[`Component Examples renders DetailsList.CustomGroupHeaders.Example.tsx c
>
<div
aria-level={2}
aria-rowindex={10}
aria-selected={false}
className=
ms-FocusZone
Expand Down
11 changes: 0 additions & 11 deletions packages/react-examples/src/react/__snapshots__/DetailsList.Grouped.Example.tsx.shot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1242,8 +1242,6 @@ exports[`Component Examples renders DetailsList.Grouped.Example.tsx correctly 1`
aria-expanded={true}
aria-labelledby="GroupHeader9"
aria-level={1}
aria-rowcount={4}
aria-rowindex={2}
aria-selected={false}
className=
ms-GroupHeader
Expand Down Expand Up @@ -1651,7 +1649,6 @@ exports[`Component Examples renders DetailsList.Grouped.Example.tsx correctly 1`
>
<div
aria-level={2}
aria-rowindex={1}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -2131,7 +2128,6 @@ exports[`Component Examples renders DetailsList.Grouped.Example.tsx correctly 1`
>
<div
aria-level={2}
aria-rowindex={2}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -2632,8 +2628,6 @@ exports[`Component Examples renders DetailsList.Grouped.Example.tsx correctly 1`
aria-expanded={true}
aria-labelledby="GroupHeader11"
aria-level={1}
aria-rowcount={4}
aria-rowindex={3}
aria-selected={false}
className=
ms-GroupHeader
Expand Down Expand Up @@ -3054,8 +3048,6 @@ exports[`Component Examples renders DetailsList.Grouped.Example.tsx correctly 1`
aria-expanded={true}
aria-labelledby="GroupHeader13"
aria-level={1}
aria-rowcount={4}
aria-rowindex={4}
aria-selected={false}
className=
ms-GroupHeader
Expand Down Expand Up @@ -3463,7 +3455,6 @@ 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 @@ -3943,7 +3934,6 @@ 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 @@ -4423,7 +4413,6 @@ exports[`Component Examples renders DetailsList.Grouped.Example.tsx correctly 1`
>
<div
aria-level={2}
aria-rowindex={5}
aria-selected={false}
className=
ms-FocusZone
Expand Down
12 changes: 0 additions & 12 deletions packages/react-examples/src/react/__snapshots__/DetailsList.Grouped.Large.Example.tsx.shot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -897,8 +897,6 @@ exports[`Component Examples renders DetailsList.Grouped.Large.Example.tsx correc
aria-expanded={true}
aria-labelledby="GroupHeader4"
aria-level={1}
aria-rowcount={11}
aria-rowindex={2}
aria-selected={false}
className=
ms-GroupHeader
Expand Down Expand Up @@ -1306,7 +1304,6 @@ exports[`Component Examples renders DetailsList.Grouped.Large.Example.tsx correc
>
<div
aria-level={2}
aria-rowindex={1}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -1778,7 +1775,6 @@ exports[`Component Examples renders DetailsList.Grouped.Large.Example.tsx correc
>
<div
aria-level={2}
aria-rowindex={2}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -2250,7 +2246,6 @@ 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 @@ -2722,7 +2717,6 @@ 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 @@ -3194,7 +3188,6 @@ 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 @@ -3666,7 +3659,6 @@ 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 @@ -4138,7 +4130,6 @@ 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 @@ -4610,7 +4601,6 @@ 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 @@ -5082,7 +5072,6 @@ 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 @@ -5554,7 +5543,6 @@ 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
15 changes: 3 additions & 12 deletions packages/react-examples/src/react/__snapshots__/GroupedList.CustomCheckbox.Example.tsx.shot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -444,7 +444,7 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
aria-label="group 0"
className="ms-List"
id="GroupedListSection2"
role="group"
role="rowgroup"
>
<div
className="ms-List-surface"
Expand All @@ -463,7 +463,6 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-rowindex={1}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -991,7 +990,6 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-rowindex={2}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -1519,7 +1517,6 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-rowindex={3}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -2430,7 +2427,7 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
aria-label="group 1"
className="ms-List"
id="GroupedListSection5"
role="group"
role="rowgroup"
>
<div
className="ms-List-surface"
Expand All @@ -2449,7 +2446,6 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-rowindex={4}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -2977,7 +2973,6 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-rowindex={5}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -3505,7 +3500,6 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-rowindex={6}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -4416,7 +4410,7 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
aria-label="group 2"
className="ms-List"
id="GroupedListSection8"
role="group"
role="rowgroup"
>
<div
className="ms-List-surface"
Expand All @@ -4435,7 +4429,6 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-rowindex={7}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -4963,7 +4956,6 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-rowindex={8}
aria-selected={false}
className=
ms-FocusZone
Expand Down Expand Up @@ -5491,7 +5483,6 @@ exports[`Component Examples renders GroupedList.CustomCheckbox.Example.tsx corre
>
<div
aria-level={2}
aria-rowindex={9}
aria-selected={false}
className=
ms-FocusZone
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/DetailsList/DetailsRow.base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ export class DetailsRowBase extends React.Component<IDetailsRowBaseProps, IDetai
data-selection-index={itemIndex}
data-selection-touch-invoke={true}
data-item-index={itemIndex}
aria-rowindex={itemIndex + 1}
aria-rowindex={groupNestingDepth ? undefined : itemIndex + 1}
aria-level={(groupNestingDepth && groupNestingDepth + 1) || undefined}
data-automationid="DetailsRow"
style={{ minWidth: rowWidth }}
Expand Down
Loading

0 comments on commit 72508b4

Please sign in to comment.