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(