From a40ef34fa6d1122bdfdb708f79b90de9edb2827d Mon Sep 17 00:00:00 2001
From: Sarah Higley <smhigley@users.noreply.github.com>
Date: Mon, 12 Sep 2022 17:12:37 -0700
Subject: [PATCH] fix: remove readonly from DetailsList (#24615)

Removes readonly semantics so nested interactive items do not inherit the readonly state.
---
 ...-8abf788f-1d0f-484c-a725-1d2fa5981f8f.json |  7 +++++
 .../DetailsList/DetailsList.base.tsx          |  1 -
 .../DetailsList/DetailsRowFields.tsx          |  1 -
 .../__snapshots__/DetailsColumn.test.tsx.snap |  1 -
 .../__snapshots__/DetailsList.test.tsx.snap   | 27 -------------------
 .../__snapshots__/DetailsRow.test.tsx.snap    |  7 -----
 .../ShimmeredDetailsList.test.tsx.snap        |  1 -
 7 files changed, 7 insertions(+), 38 deletions(-)
 create mode 100644 change/@fluentui-react-8abf788f-1d0f-484c-a725-1d2fa5981f8f.json

diff --git a/change/@fluentui-react-8abf788f-1d0f-484c-a725-1d2fa5981f8f.json b/change/@fluentui-react-8abf788f-1d0f-484c-a725-1d2fa5981f8f.json
new file mode 100644
index 00000000000000..4ef2aac77fda47
--- /dev/null
+++ b/change/@fluentui-react-8abf788f-1d0f-484c-a725-1d2fa5981f8f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: remove readonly semantics from DetailsList",
+  "packageName": "@fluentui/react",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/DetailsList/DetailsList.base.tsx b/packages/react/src/components/DetailsList/DetailsList.base.tsx
index 15901cdf9adc94..47e41c1c84a02d 100644
--- a/packages/react/src/components/DetailsList/DetailsList.base.tsx
+++ b/packages/react/src/components/DetailsList/DetailsList.base.tsx
@@ -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}>
diff --git a/packages/react/src/components/DetailsList/DetailsRowFields.tsx b/packages/react/src/components/DetailsList/DetailsRowFields.tsx
index cb047fda828918..751d09de975312 100644
--- a/packages/react/src/components/DetailsList/DetailsRowFields.tsx
+++ b/packages/react/src/components/DetailsList/DetailsRowFields.tsx
@@ -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,
diff --git a/packages/react/src/components/DetailsList/__snapshots__/DetailsColumn.test.tsx.snap b/packages/react/src/components/DetailsList/__snapshots__/DetailsColumn.test.tsx.snap
index 35c9f4e99449af..67ec0d86b8e8d5 100644
--- a/packages/react/src/components/DetailsList/__snapshots__/DetailsColumn.test.tsx.snap
+++ b/packages/react/src/components/DetailsList/__snapshots__/DetailsColumn.test.tsx.snap
@@ -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"
     >
diff --git a/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap b/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
index 7b1c4d40c02352..85eef9d098d8e0 100644
--- a/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
+++ b/packages/react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
@@ -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"
     >
@@ -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"
     >
@@ -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"
     >
@@ -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"
     >
@@ -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"
     >
@@ -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"
     >
@@ -1883,7 +1877,6 @@ exports[`DetailsList renders List correctly 1`] = `
   >
     <div
       aria-colcount={4}
-      aria-readonly="true"
       aria-rowcount={6}
       role="grid"
     >
@@ -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"
     >
@@ -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"
     >
@@ -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"
     >
@@ -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"
     >
@@ -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"
     >
@@ -8162,7 +8150,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                   role="presentation"
                                 >
                                   <div
-                                    aria-readonly={true}
                                     className=
                                         ms-DetailsRow-cell
                                         {
@@ -8218,7 +8205,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                     0
                                   </div>
                                   <div
-                                    aria-readonly={true}
                                     className=
                                         ms-DetailsRow-cell
                                         {
@@ -8274,7 +8260,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                     Item 0
                                   </div>
                                   <div
-                                    aria-readonly={true}
                                     className=
                                         ms-DetailsRow-cell
                                         {
@@ -8467,7 +8452,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                   role="presentation"
                                 >
                                   <div
-                                    aria-readonly={true}
                                     className=
                                         ms-DetailsRow-cell
                                         {
@@ -8523,7 +8507,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                     1
                                   </div>
                                   <div
-                                    aria-readonly={true}
                                     className=
                                         ms-DetailsRow-cell
                                         {
@@ -8579,7 +8562,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                     Item 1
                                   </div>
                                   <div
-                                    aria-readonly={true}
                                     className=
                                         ms-DetailsRow-cell
                                         {
@@ -9029,7 +9011,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                   role="presentation"
                                 >
                                   <div
-                                    aria-readonly={true}
                                     className=
                                         ms-DetailsRow-cell
                                         {
@@ -9085,7 +9066,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                     2
                                   </div>
                                   <div
-                                    aria-readonly={true}
                                     className=
                                         ms-DetailsRow-cell
                                         {
@@ -9141,7 +9121,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                     Item 2
                                   </div>
                                   <div
-                                    aria-readonly={true}
                                     className=
                                         ms-DetailsRow-cell
                                         {
@@ -9334,7 +9313,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                   role="presentation"
                                 >
                                   <div
-                                    aria-readonly={true}
                                     className=
                                         ms-DetailsRow-cell
                                         {
@@ -9390,7 +9368,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                     3
                                   </div>
                                   <div
-                                    aria-readonly={true}
                                     className=
                                         ms-DetailsRow-cell
                                         {
@@ -9446,7 +9423,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                     Item 3
                                   </div>
                                   <div
-                                    aria-readonly={true}
                                     className=
                                         ms-DetailsRow-cell
                                         {
@@ -9639,7 +9615,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                   role="presentation"
                                 >
                                   <div
-                                    aria-readonly={true}
                                     className=
                                         ms-DetailsRow-cell
                                         {
@@ -9695,7 +9670,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                     4
                                   </div>
                                   <div
-                                    aria-readonly={true}
                                     className=
                                         ms-DetailsRow-cell
                                         {
@@ -9751,7 +9725,6 @@ exports[`DetailsList renders List with hidden checkboxes correctly 1`] = `
                                     Item 4
                                   </div>
                                   <div
-                                    aria-readonly={true}
                                     className=
                                         ms-DetailsRow-cell
                                         {
diff --git a/packages/react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap b/packages/react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap
index f67f3c9676b812..8db23f6390a18b 100644
--- a/packages/react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap
+++ b/packages/react/src/components/DetailsList/__snapshots__/DetailsRow.test.tsx.snap
@@ -35,7 +35,6 @@ exports[`DetailsRow renders details list row correctly 1`] = `
   >
     <div
       aria-colcount={4}
-      aria-readonly="true"
       aria-rowcount={6}
       role="grid"
     >
@@ -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"
     >
@@ -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
           {
@@ -2062,7 +2059,6 @@ exports[`DetailsRow renders details list row with checkbox visible always correc
       
     </div>
     <div
-      aria-readonly={true}
       className=
           ms-DetailsRow-cell
           {
@@ -2118,7 +2114,6 @@ exports[`DetailsRow renders details list row with checkbox visible always correc
       
     </div>
     <div
-      aria-readonly={true}
       className=
           ms-DetailsRow-cell
           {
@@ -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"
     >
@@ -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"
     >
diff --git a/packages/react/src/components/DetailsList/__snapshots__/ShimmeredDetailsList.test.tsx.snap b/packages/react/src/components/DetailsList/__snapshots__/ShimmeredDetailsList.test.tsx.snap
index e7eb002f994c1b..cfbfa738020e32 100644
--- a/packages/react/src/components/DetailsList/__snapshots__/ShimmeredDetailsList.test.tsx.snap
+++ b/packages/react/src/components/DetailsList/__snapshots__/ShimmeredDetailsList.test.tsx.snap
@@ -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"
     >