Skip to content

Commit

Permalink
fix: remove readonly from DetailsList (#24615)
Browse files Browse the repository at this point in the history 
Removes readonly semantics so nested interactive items do not inherit the readonly state.
  • Loading branch information
@smhigley
smhigley authored Sep 13, 2022
1 parent ef3ea23 commit a40ef34
Show file tree
Hide file tree
Showing 7 changed files with 7 additions and 38 deletions.
7 changes: 7 additions & 0 deletions change/@fluentui-react-8abf788f-1d0f-484c-a725-1d2fa5981f8f.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "fix: remove readonly semantics from DetailsList",
"packageName": "@fluentui/react",
"email": "sarah.higley@microsoft.com",
"dependentChangeType": "patch"
}
1 change: 0 additions & 1 deletion packages/react/src/components/DetailsList/DetailsList.base.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -680,7 +680,6 @@ const DetailsListInner: React.ComponentType<IDetailsListInnerProps> = (
aria-label={ariaLabelForGrid || ariaLabel}
aria-rowcount={isPlaceholderData ? 0 : rowCount}
aria-colcount={colCount}
aria-readonly="true"
aria-busy={isPlaceholderData}
>
<div onKeyDown={onHeaderKeyDown} role="presentation" className={classNames.headerWrapper}>
Expand Down
1 change: 0 additions & 1 deletion packages/react/src/components/DetailsList/DetailsRowFields.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ export const DetailsRowFields: React.FunctionComponent<IDetailsRowFieldsProps> =
key={key}
id={column.isRowHeader ? rowHeaderId : undefined}
role={column.isRowHeader ? 'rowheader' : 'gridcell'}
aria-readonly
className={css(
column.className,
column.isMultiline && rowClassNames.isMultiline,
Expand Down
1 change: 0 additions & 1 deletion packages/react/src/components/DetailsList/__snapshots__/DetailsColumn.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ exports[`DetailsColumn renders a sortable icon on an unsorted column when showSo
>
<div
aria-colcount={2}
aria-readonly="true"
aria-rowcount={1}
role="grid"
>
Expand Down
27 changes: 0 additions & 27 deletions packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ exports[`DetailsList handles paged updates to items within groups 1`] = `
>
<div
aria-colcount={5}
aria-readonly="true"
aria-rowcount={7}
role="grid"
>
Expand Down Expand Up @@ -302,7 +301,6 @@ exports[`DetailsList handles paged updates to items within groups 2`] = `
>
<div
aria-colcount={5}
aria-readonly="true"
aria-rowcount={7}
role="grid"
>
Expand Down Expand Up @@ -584,7 +582,6 @@ exports[`DetailsList handles updates to items and groups 1`] = `
>
<div
aria-colcount={5}
aria-readonly="true"
aria-rowcount={9}
role="grid"
>
Expand Down Expand Up @@ -952,7 +949,6 @@ exports[`DetailsList handles updates to items and groups 2`] = `
>
<div
aria-colcount={5}
aria-readonly="true"
aria-rowcount={9}
role="grid"
>
Expand Down Expand Up @@ -1320,7 +1316,6 @@ exports[`DetailsList handles updates to items and groups 3`] = `
>
<div
aria-colcount={5}
aria-readonly="true"
aria-rowcount={7}
role="grid"
>
Expand Down Expand Up @@ -1602,7 +1597,6 @@ exports[`DetailsList handles updates to items and groups 4`] = `
>
<div
aria-colcount={5}
aria-readonly="true"
aria-rowcount={7}
role="grid"
>
Expand Down Expand Up @@ -1883,7 +1877,6 @@ exports[`DetailsList renders List correctly 1`] = `
>
<div
aria-colcount={4}
aria-readonly="true"
aria-rowcount={6}
role="grid"
>
Expand Down Expand Up @@ -2867,7 +2860,6 @@ exports[`DetailsList renders List correctly with onRenderDivider props 1`] = `
>
<div
aria-colcount={6}
aria-readonly="true"
aria-rowcount={6}
role="grid"
>
Expand Down Expand Up @@ -3948,7 +3940,6 @@ exports[`DetailsList renders List in compact mode correctly 1`] = `
>
<div
aria-colcount={4}
aria-readonly="true"
aria-rowcount={6}
role="grid"
>
Expand Down Expand Up @@ -4933,7 +4924,6 @@ exports[`DetailsList renders List in fixed constrained layout correctly 1`] = `
>
<div
aria-colcount={4}
aria-readonly="true"
aria-rowcount={6}
role="grid"
>
Expand Down Expand Up @@ -5917,7 +5907,6 @@ exports[`DetailsList renders List with custom icon as column divider 1`] = `
>
<div
aria-colcount={6}
aria-readonly="true"
aria-rowcount={6}
role="grid"
>
Expand Down Expand Up @@ -7012,7 +7001,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
>
<div
aria-colcount={4}
aria-readonly="true"
aria-rowcount={8}
role="grid"
>
Expand Down Expand Up @@ -8162,7 +8150,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
role="presentation"
>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -8218,7 +8205,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
0
</div>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -8274,7 +8260,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
Item 0
</div>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -8467,7 +8452,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
role="presentation"
>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -8523,7 +8507,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
1
</div>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -8579,7 +8562,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
Item 1
</div>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -9029,7 +9011,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
role="presentation"
>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -9085,7 +9066,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
2
</div>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -9141,7 +9121,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
Item 2
</div>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -9334,7 +9313,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
role="presentation"
>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -9390,7 +9368,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
3
</div>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -9446,7 +9423,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
Item 3
</div>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -9639,7 +9615,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
role="presentation"
>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -9695,7 +9670,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
4
</div>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -9751,7 +9725,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
Item 4
</div>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down
7 changes: 0 additions & 7 deletions packages/react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ exports[`DetailsRow renders details list row correctly 1`] = `
>
<div
aria-colcount={4}
aria-readonly="true"
aria-rowcount={6}
role="grid"
>
Expand Down Expand Up @@ -871,7 +870,6 @@ exports[`DetailsRow renders details list row with all rows selected correctly 1`
>
<div
aria-colcount={4}
aria-readonly="true"
aria-rowcount={6}
role="grid"
>
Expand Down Expand Up @@ -2006,7 +2004,6 @@ exports[`DetailsRow renders details list row with checkbox visible always correc
role="presentation"
>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -2062,7 +2059,6 @@ exports[`DetailsRow renders details list row with checkbox visible always correc
</div>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -2118,7 +2114,6 @@ exports[`DetailsRow renders details list row with checkbox visible always correc
</div>
<div
aria-readonly={true}
className=
ms-DetailsRow-cell
{
Expand Down Expand Up @@ -2227,7 +2222,6 @@ exports[`DetailsRow renders details list row with multiple selections correctly
>
<div
aria-colcount={4}
aria-readonly="true"
aria-rowcount={6}
role="grid"
>
Expand Down Expand Up @@ -3063,7 +3057,6 @@ exports[`DetailsRow renders details list row with one row selected correctly 1`]
>
<div
aria-colcount={4}
aria-readonly="true"
aria-rowcount={6}
role="grid"
>
Expand Down
1 change: 0 additions & 1 deletion packages/react/src/components/DetailsList/__snapshots__/ShimmeredDetailsList.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ exports[`ShimmeredDetailsList renders List correctly 1`] = `
<div
aria-busy={true}
aria-colcount={1}
aria-readonly="true"
aria-rowcount={0}
role="grid"
>
Expand Down

0 comments on commit a40ef34

Please sign in to comment.