From 842f3d5eebb51d218936433344676cd908ef37cf Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Fri, 21 Oct 2022 13:24:46 -0700
Subject: [PATCH 1/2] fix: DetailsList is still tabbable when header is not
 visible

---
 .../src/components/DetailsList/DetailsList.base.tsx    |  4 ++++
 .../src/components/DetailsList/DetailsList.test.tsx    | 10 ++++++++++
 2 files changed, 14 insertions(+)

diff --git a/packages/react/src/components/DetailsList/DetailsList.base.tsx b/packages/react/src/components/DetailsList/DetailsList.base.tsx
index 343c553278dc7f..dd8a7005600f56 100644
--- a/packages/react/src/components/DetailsList/DetailsList.base.tsx
+++ b/packages/react/src/components/DetailsList/DetailsList.base.tsx
@@ -486,6 +486,9 @@ const DetailsListInner: React.ComponentType<IDetailsListInnerProps> = (
 
       const rowRole = role === defaultRole ? undefined : 'presentation';
 
+      // add tabindex="0" to first row if no header exists, to ensure the focuszone is in the tab order
+      const rowFocusZoneProps = isHeaderVisible || index > 0 ? {} : { tabIndex: 0 };
+
       const rowProps: IDetailsRowProps = {
         item: item,
         itemIndex: index,
@@ -520,6 +523,7 @@ const DetailsListInner: React.ComponentType<IDetailsListInnerProps> = (
         useFastIcons,
         role: rowRole,
         isGridRow: true,
+        focusZoneProps: rowFocusZoneProps,
       };
 
       if (!item) {
diff --git a/packages/react/src/components/DetailsList/DetailsList.test.tsx b/packages/react/src/components/DetailsList/DetailsList.test.tsx
index d62ffe57eb8f76..4e6aec68e2dfc4 100644
--- a/packages/react/src/components/DetailsList/DetailsList.test.tsx
+++ b/packages/react/src/components/DetailsList/DetailsList.test.tsx
@@ -1077,4 +1077,14 @@ describe('DetailsList', () => {
     const groupNameId = checkbox.getAttribute('aria-labelledby')?.split(' ')[1];
     expect(container.querySelector(`#${groupNameId} span`)!.textContent).toEqual('Group 0');
   });
+
+  it('makes the first row tabbable if isHeaderVisible is false', () => {
+    const component = renderer.create(
+      <DetailsList items={mockData(5)} columns={mockData(5, true)} isHeaderVisible={false} />,
+    );
+
+    const firstRow = component.root.findAllByType(DetailsRow)[0];
+
+    expect(firstRow.props.focusZoneProps?.tabIndex).toEqual(0);
+  });
 });

From b75ff1709048ff77f0021cf6d40cffdef0257083 Mon Sep 17 00:00:00 2001
From: Sarah Higley <sarah.higley@microsoft.com>
Date: Fri, 21 Oct 2022 13:30:57 -0700
Subject: [PATCH 2/2] Change file

---
 ...luentui-react-55edf27b-cadb-4057-98bd-3e097dc780aa.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-55edf27b-cadb-4057-98bd-3e097dc780aa.json

diff --git a/change/@fluentui-react-55edf27b-cadb-4057-98bd-3e097dc780aa.json b/change/@fluentui-react-55edf27b-cadb-4057-98bd-3e097dc780aa.json
new file mode 100644
index 00000000000000..d8441bbf9f8c56
--- /dev/null
+++ b/change/@fluentui-react-55edf27b-cadb-4057-98bd-3e097dc780aa.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: DetailsList is still tabbable when header is not visible",
+  "packageName": "@fluentui/react",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}