From ec69a887c858433eafe3bb60ff8031ed077da8f6 Mon Sep 17 00:00:00 2001
From: Rob Barber <69695238+robarbms@users.noreply.github.com>
Date: Thu, 9 Dec 2021 16:05:40 -0800
Subject: [PATCH] fix: z-index in accordion header renders above content
 (#20587)

* Change files

* Fixes z-index in headers above content region

* Shared style for position.
---
 ...mponents-a1c94fbf-4e30-466f-9571-a52139ba452d.json |  7 +++++++
 .../accordion/accordion-item/accordion-item.styles.ts | 11 ++++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 change/@fluentui-web-components-a1c94fbf-4e30-466f-9571-a52139ba452d.json

diff --git a/change/@fluentui-web-components-a1c94fbf-4e30-466f-9571-a52139ba452d.json b/change/@fluentui-web-components-a1c94fbf-4e30-466f-9571-a52139ba452d.json
new file mode 100644
index 00000000000000..c1e8a45ea332d4
--- /dev/null
+++ b/change/@fluentui-web-components-a1c94fbf-4e30-466f-9571-a52139ba452d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: z-index in accordion header renders above content",
+  "packageName": "@fluentui/web-components",
+  "email": "robarb@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
index 71c2b63f8888df..a3f1a9a2e09e74 100644
--- a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
@@ -80,7 +80,6 @@ export const accordionItemStyles: (
       position: relative;
       grid-template-columns: auto 1fr auto auto;
       align-items: center;
-      z-index: 2;
     }
 
     .button {
@@ -105,7 +104,6 @@ export const accordionItemStyles: (
       left: 0;
       right: 0;
       bottom: 0;
-      z-index: 1;
       cursor: pointer;
     }
 
@@ -133,7 +131,6 @@ export const accordionItemStyles: (
       align-items: center;
       justify-content: center;
       grid-column: 4;
-      z-index: 2;
       pointer-events: none;
       background: ${neutralFillStealthRestOnNeutralFillLayerRest};
       border-radius: calc(${controlCornerRadius} * 1px);
@@ -173,7 +170,6 @@ export const accordionItemStyles: (
       padding-inline-start: calc(${designUnit} * 2 * 1px);
       justify-content: center;
       grid-column: 1;
-      z-index: 2;
     }
 
     .end {
@@ -181,7 +177,12 @@ export const accordionItemStyles: (
       align-items: center;
       justify-content: center;
       grid-column: 3;
-      z-index: 2;
+    }
+
+    .icon,
+    .start,
+    .end {
+      position: relative;
     }
   `.withBehaviors(
     forcedColorsStylesheetBehavior(