a11y: remove vertical margins on dialog to support 400% zoom (#34906)

Author: davatron5000

change/@fluentui-web-components-e1e8293a-32b0-4a2a-909d-9f110901c6c4.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "a11y: remove vertical margins on dialog to support 400% zoom",
+  "packageName": "@fluentui/web-components",
+  "email": "rupertdavid@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/dialog-body/dialog-body.styles.ts

@@ -47,8 +47,6 @@ export const styles = css`
     margin-block-start: calc(${spacingVerticalXXL} * -1);
     padding-block-end: ${spacingVerticalS};
     padding-block-start: ${spacingVerticalXXL};
-    position: sticky;
-    z-index: 1;
   }
 
   .content {
@@ -71,8 +69,6 @@ export const styles = css`
     margin-block-end: calc(${spacingVerticalXXL} * -1);
     padding-block-end: ${spacingVerticalXXL};
     padding-block-start: ${spacingVerticalL};
-    position: sticky;
-    z-index: 2;
   }
 
   ::slotted([slot='title-action']) {
@@ -99,4 +95,15 @@ export const styles = css`
       padding-block-start: ${spacingVerticalS};
     }
   }
+
+  /* For a11y, set sticky position for title and actions when the viewport is tall enough */
+  @media (min-height: 480px) {
+    .title {
+      position: sticky;
+      z-index: 1;
+    }
+    .actions {
+      position: sticky;
+      z-index: 2;
+    }
 `;

packages/web-components/src/dialog/dialog.styles.ts

@@ -34,7 +34,7 @@ export const styles = css`
       border: none;
       box-shadow: ${shadow64};
       color: ${colorNeutralForeground1};
-      max-height: calc(-48px + 100vh);
+      max-height: 100vh;
       padding: 0;
       width: 100%;
       max-width: 600px;
@@ -46,6 +46,12 @@ export const styles = css`
       z-index: 2;
       overflow: auto;
     }
+
+    @supports (max-height: 1dvh) {
+      dialog {
+        max-height: 100dvh;
+      }
+    }
   }
 
   @layer animations {