feat(ui-modal): on larger screens, inset the fullscreen modal from the viewport edge for a11y

A size="fullscreen" Modal previously covered the entire viewport edge-to-edge,
making it hard to tell it was a modal. On viewports >= md it is now inset via the
new fullScreenMargin token, with rounded corners and box-shadow restored.

Also compute the box-shadow CSS string once per generateStyle call and reuse it at
both usage sites instead of recomputing it on every render.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: git-nandor

docs/upgrading/upgrade-guide.md

@@ -962,6 +962,7 @@ type: embed
   added={[
     {name:"borderWidth",note:""},
     {name:"inverseBorderColor",note:""},
+    {name:"fullScreenMargin",note:""},
   ]}
   changed={[
     {oldName:"background",newName:"backgroundColor",note:""},

packages/ui-modal/src/Modal/v2/README.md

@@ -148,8 +148,8 @@ const Example = () => {
         background="primary-inverse"
         margin="medium auto none"
         display="block"
-        width="25rem"
-        height="25rem"
+        width="30rem"
+        height="30rem"
         borderWidth="large"
         id="constrainExample"
       ></View>
@@ -464,6 +464,9 @@ const Example = () => {
       <Modal
         open={open}
         size={smallViewport ? 'fullscreen' : 'small'}
+        // Simulate real small-screen behavior by themeOverride.
+        // On actual small screens this happens automatically, so no theme override is needed.
+        themeOverride={smallViewport ? { fullScreenMargin: '0', borderRadius: '0' } : undefined}
         onDismiss={(event) => {
           if (event.target.id !== 'toggleViewportButton') {
             setOpen(false)

packages/ui-modal/src/Modal/v2/styles.ts

@@ -23,7 +23,7 @@
  */
 
 import { boxShadowObjectsToCSSString } from '@instructure/ui-themes'
-import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
 import type { ModalProps, ModalStyle } from './props'
 
 /**
@@ -39,9 +39,11 @@ import type { ModalProps, ModalStyle } from './props'
  */
 const generateStyle = (
   componentTheme: ReturnType<NewComponentTypes['Modal']>,
-  props: ModalProps
+  props: ModalProps,
+  sharedTokens: SharedTokens
 ): ModalStyle => {
   const { size, variant, overflow } = props
+  const boxShadow = boxShadowObjectsToCSSString(componentTheme.boxShadow)
 
   const commonSizeStyleExceptForFullscreen = {
     maxWidth: '95%',
@@ -75,7 +77,17 @@ const generateStyle = (
       height: '100%',
       boxShadow: 'none',
       border: 'none',
-      borderRadius: 0
+      borderRadius: 0,
+      // On larger screens, inset the fullscreen modal from the viewport edge
+      // for a11y: the Mask flex-centers it, so `flex: 1` + `alignSelf: stretch`
+      // (auto height) gap it evenly via the margin; corners/shadow restored too.
+      [`@media screen and (min-width: ${sharedTokens.breakpoints.md})`]: {
+        margin: componentTheme.fullScreenMargin,
+        height: 'auto',
+        alignSelf: 'stretch',
+        borderRadius: componentTheme.borderRadius,
+        boxShadow
+      }
     }
   }
   const backgroundStyles =
@@ -100,7 +112,7 @@ const generateStyle = (
       flexDirection: 'column',
       position: 'relative',
       boxSizing: 'border-box',
-      boxShadow: boxShadowObjectsToCSSString(componentTheme.boxShadow),
+      boxShadow,
       borderRadius: componentTheme.borderRadius,
       overflow: 'hidden',
       ...sizeStyles[size!],