Improved dialog a11y at 400% zoom (#2630)

* 2571 adjsuting css for improved dialog a11y

* making sure the hero image has rounded top corners with scrolling at 400%

* fixing footer and buttongroup at 400% zoom

* lint fixes

* Update packages/@react-spectrum/dialog/stories/Dialog.stories.tsx

* fixing content, footer, and buttongroup placement in Firefox

* moving footer and buttongroup to different lines in dialog zoom

* moving some of the a11y css to also help mobile views with footers and buttongroups

Co-authored-by: Danni <[email protected]>
Co-authored-by: Robert Snow <[email protected]>

Author: 3 people

packages/@adobe/spectrum-css-temp/components/dialog/index.css

@@ -339,6 +339,14 @@ governing permissions and limitations under the License.
     justify-content: flex-start;
   }
 
+  .spectrum-Dialog-footer {
+    min-width: fit-content;
+  }
+
+  .spectrum-Dialog-buttonGroup {
+    min-width: 0;
+  }
+
   .spectrum-Dialog--fullscreen,
   .spectrum-Dialog--fullscreenTakeover {
 
@@ -365,3 +373,35 @@ governing permissions and limitations under the License.
     }
   }
 }
+
+/* additional a11y support by moveing scrolling from content to dialog */
+@media screen and (max-height: 400px) {
+  .spectrum-Dialog .spectrum-Dialog-grid {
+    border-top-left-radius: var(--spectrum-dialog-border-radius);
+    border-top-right-radius: var(--spectrum-dialog-border-radius);
+    overflow-y: auto;
+
+    grid-template-columns: var(--spectrum-dialog-padding-x) auto 1fr auto minmax(0, auto) var(--spectrum-dialog-padding-x);
+    grid-template-rows: auto var(--spectrum-dialog-padding-y) auto auto auto 1fr auto auto var(--spectrum-dialog-padding-y);
+    grid-template-areas:
+      "hero hero        hero        hero        hero        hero"
+      ".    .           .           .           .           ."
+      ".    heading     heading     heading     typeIcon    ."
+      ".    header      header      header      header      ."
+      ".    divider     divider     divider     divider     ."
+      ".    content     content     content     content     ."
+      ".    footer      footer      footer      footer      ."
+      ".    buttonGroup buttonGroup buttonGroup buttonGroup ."
+      ".    .           .           .           .           .";
+  }
+
+  .spectrum-Dialog-content {
+    overflow-y: visible;
+    height: min-content;
+    display: inline-table;
+  }
+
+  .spectrum-Dialog-footer + .spectrum-Dialog-buttonGroup {
+    padding-block-start: calc(var(--spectrum-global-dimension-size-25) * 2);
+  }
+}

packages/@react-spectrum/dialog/stories/Dialog.stories.tsx

@@ -23,7 +23,7 @@ import {Heading, Text} from '@react-spectrum/text';
 import {Image} from '@react-spectrum/image';
 import {Item, Picker} from '@react-spectrum/picker';
 import {Radio, RadioGroup} from '@react-spectrum/radio';
-import React from 'react';
+import React, {useState} from 'react';
 import {SpectrumAlertDialogProps} from '@react-types/dialog';
 import {storiesOf} from '@storybook/react';
 import {TextField} from '@react-spectrum/textfield';
@@ -82,6 +82,10 @@ storiesOf('Dialog', module)
     'three buttons, vertical orientation',
     () => renderWithThreeButtonsVertical({})
   )
+  .add(
+    'three buttons, footer',
+    () => <RenderWithThreeButtonsAndFooter />
+  )
   .add(
     'cleared content',
     () => renderWithDividerInContent({})
@@ -480,6 +484,44 @@ function renderWithThreeButtonsVertical({width = 'auto', ...props}) {
   );
 }
 
+function RenderWithThreeButtonsAndFooter({width = 'auto', ...props}) {
+  let labels = [
+    {
+      checkboxLabel: 'I have read and accept',
+      secondaryButtonLabel: 'Secondary',
+      primaryButtonLabel: 'Primary'
+    }, {
+      checkboxLabel: 'I have read and accept the terms of use and privacy policy',
+      secondaryButtonLabel: 'Secondary and best button',
+      primaryButtonLabel: 'Primary and worst'
+    }
+  ];
+  let [whichLabels, setWhichLabels] = useState(0);
+
+  return (
+    <div style={{display: 'flex', width, margin: '100px 0'}}>
+      <Button variant="primary" onPress={() => {whichLabels ? setWhichLabels(0) : setWhichLabels(1);}}>Toggle labels</Button>
+      <DialogTrigger defaultOpen>
+        <ActionButton>Trigger</ActionButton>
+        {(close) => (
+          <Dialog {...props}>
+            <Heading>The Heading</Heading>
+            <Header>The Header</Header>
+            <Divider />
+            <Content>{singleParagraph()}</Content>
+            <Footer><Checkbox>{labels[whichLabels].checkboxLabel}</Checkbox></Footer>
+            <ButtonGroup>
+              <Button variant="secondary" onPress={close}>{labels[whichLabels].secondaryButtonLabel}</Button>
+              <Button variant="primary" onPress={close}>{labels[whichLabels].primaryButtonLabel}</Button>
+              <Button variant="cta" onPress={close} autoFocus>CTA</Button>
+            </ButtonGroup>
+          </Dialog>
+        )}
+      </DialogTrigger>
+    </div>
+  );
+}
+
 function renderWithDividerInContent({width = 'auto', ...props}) {
   return (
     <div style={{display: 'flex', width, margin: '100px 0'}}>