From 609b21be230c03e66ec601cc4cca79eb9248f157 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Mon, 28 Oct 2024 19:30:21 -0400
Subject: [PATCH 1/3] docs(AnchoredOverlay): add role and aria-modal to stories

---
 .../AnchoredOverlay.features.stories.tsx              | 11 +++++++++++
 .../src/AnchoredOverlay/AnchoredOverlay.stories.tsx   |  3 ++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
index db336516af6..9ba08191f6a 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
@@ -101,6 +101,7 @@ export const CustomAnchorId = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       anchorId="my-custom-anchor-id"
+      overlayProps={{role: 'dialog', 'aria-modal': true}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -117,6 +118,7 @@ export const Height = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       height="large"
+      overlayProps={{role: 'dialog', 'aria-modal': true}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -133,6 +135,7 @@ export const Width = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       width="large"
+      overlayProps={{role: 'dialog', 'aria-modal': true}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -153,6 +156,7 @@ export const AnchorAlignment = () => {
         </Button>
       )}
       align="center"
+      overlayProps={{role: 'dialog', 'aria-modal': true}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -169,6 +173,7 @@ export const AnchorSide = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       side="outside-right"
+      overlayProps={{role: 'dialog', 'aria-modal': true}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -185,6 +190,7 @@ export const OffsetPositionFromAnchor = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       anchorOffset={100}
+      overlayProps={{role: 'dialog', 'aria-modal': true}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -201,6 +207,7 @@ export const OffsetAlignmentFromAnchor = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       alignmentOffset={100}
+      overlayProps={{role: 'dialog', 'aria-modal': true}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -218,6 +225,7 @@ export const FocusTrapOverrides = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       focusTrapSettings={{initialFocusRef}}
+      overlayProps={{role: 'dialog', 'aria-modal': true}}
     >
       <Button>First button</Button>
       <Button ref={initialFocusRef}>Initial focus</Button>
@@ -235,6 +243,7 @@ export const FocusZoneOverrides = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       focusZoneSettings={{bindKeys: FocusKeys.JK}}
+      overlayProps={{role: 'dialog', 'aria-modal': true}}
     >
       <p>
         Use <kbd>J</kbd> and <kbd>K</kbd> keys to move focus.
@@ -258,6 +267,8 @@ export const OverlayPropsOverrides = () => {
       overlayProps={{
         overflow: 'auto',
         maxHeight: 'xsmall',
+        role: 'dialog',
+        'aria-modal': true,
       }}
     >
       <div>Overlay props have been overridden to set: </div>
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
index 5a7dcbf50da..d2735fa194b 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
@@ -51,6 +51,7 @@ export const Default = () => {
       onOpen={() => setOpen(true)}
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
+      overlayProps={{role: 'dialog', 'aria-modal': true}}
     >
       {hoverCard}
     </AnchoredOverlay>
@@ -74,7 +75,7 @@ export const Playground = (args: Args) => {
       width={args.width}
       height={args.height}
       renderAnchor={props => <Button {...props}>Button</Button>}
-      overlayProps={args.portalContainerName}
+      overlayProps={{...args.portalContainerName, role: 'dialog', 'aria-modal': true}}
       side={args.side}
     >
       {hoverCard}

From 1b9e1ca719c6e06f37fbc424b3b4d8fbeb4999a1 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 29 Oct 2024 14:49:05 -0400
Subject: [PATCH 2/3] Docs(AnchoredOverlay): add aria-label to stories and
 extra focus element

---
 .../AnchoredOverlay.features.stories.tsx      | 36 ++++++++++++-------
 .../AnchoredOverlay.stories.tsx               | 15 +++++---
 2 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
index 9ba08191f6a..a1dfe68ea63 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
@@ -2,7 +2,7 @@ import React, {useEffect, useRef, useState} from 'react'
 import type {Args, Meta} from '@storybook/react'
 import {FocusKeys} from '@primer/behaviors'
 
-import {Avatar, Box, Text} from '..'
+import {Avatar, Box, Link, Text} from '..'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import Heading from '../Heading'
 import Octicon from '../Octicon'
@@ -26,7 +26,9 @@ const hoverCard = (
     <Stack direction="horizontal" gap="none">
       <Text weight="medium">monalisa</Text>
       <Text color={'var(--fgColor-muted)'} ml={1}>
-        Monalisa Octocat
+        <Link inline underline muted href="#">
+          Monalisa Octocat
+        </Link>
       </Text>
     </Stack>
     <Text size="medium">Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
@@ -101,7 +103,7 @@ export const CustomAnchorId = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       anchorId="my-custom-anchor-id"
-      overlayProps={{role: 'dialog', 'aria-modal': true}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -118,7 +120,7 @@ export const Height = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       height="large"
-      overlayProps={{role: 'dialog', 'aria-modal': true}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -135,9 +137,18 @@ export const Width = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       width="large"
-      overlayProps={{role: 'dialog', 'aria-modal': true}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
     >
-      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
+      <Box
+        sx={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        {hoverCard}
+      </Box>
     </AnchoredOverlay>
   )
 }
@@ -156,7 +167,7 @@ export const AnchorAlignment = () => {
         </Button>
       )}
       align="center"
-      overlayProps={{role: 'dialog', 'aria-modal': true}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -173,7 +184,7 @@ export const AnchorSide = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       side="outside-right"
-      overlayProps={{role: 'dialog', 'aria-modal': true}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -190,7 +201,7 @@ export const OffsetPositionFromAnchor = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       anchorOffset={100}
-      overlayProps={{role: 'dialog', 'aria-modal': true}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -207,7 +218,7 @@ export const OffsetAlignmentFromAnchor = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       alignmentOffset={100}
-      overlayProps={{role: 'dialog', 'aria-modal': true}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -225,7 +236,7 @@ export const FocusTrapOverrides = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       focusTrapSettings={{initialFocusRef}}
-      overlayProps={{role: 'dialog', 'aria-modal': true}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'Focus Trap Demo Overlay'}}
     >
       <Button>First button</Button>
       <Button ref={initialFocusRef}>Initial focus</Button>
@@ -243,7 +254,7 @@ export const FocusZoneOverrides = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       focusZoneSettings={{bindKeys: FocusKeys.JK}}
-      overlayProps={{role: 'dialog', 'aria-modal': true}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'Focus Zone Demo Overlay'}}
     >
       <p>
         Use <kbd>J</kbd> and <kbd>K</kbd> keys to move focus.
@@ -269,6 +280,7 @@ export const OverlayPropsOverrides = () => {
         maxHeight: 'xsmall',
         role: 'dialog',
         'aria-modal': true,
+        'aria-label': 'User Card Overlay',
       }}
     >
       <div>Overlay props have been overridden to set: </div>
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
index d2735fa194b..344330f3ce7 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
@@ -2,7 +2,7 @@ import React, {useState} from 'react'
 import type {Args, Meta} from '@storybook/react'
 import {LocationIcon, RepoIcon} from '@primer/octicons-react'
 
-import {Avatar, Text} from '..'
+import {Avatar, Link, Text} from '..'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import {Button} from '../Button'
 import Octicon from '../Octicon'
@@ -23,7 +23,9 @@ const hoverCard = (
     <Stack direction="horizontal" gap="none">
       <Text weight="medium">monalisa</Text>
       <Text color={'var(--fgColor-muted)'} ml={1}>
-        Monalisa Octocat
+        <Link inline underline muted href="#">
+          Monalisa Octocat
+        </Link>
       </Text>
     </Stack>
     <Text size="medium">Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
@@ -51,7 +53,7 @@ export const Default = () => {
       onOpen={() => setOpen(true)}
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
-      overlayProps={{role: 'dialog', 'aria-modal': true}}
+      overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
     >
       {hoverCard}
     </AnchoredOverlay>
@@ -75,7 +77,12 @@ export const Playground = (args: Args) => {
       width={args.width}
       height={args.height}
       renderAnchor={props => <Button {...props}>Button</Button>}
-      overlayProps={{...args.portalContainerName, role: 'dialog', 'aria-modal': true}}
+      overlayProps={{
+        ...args.portalContainerName,
+        role: 'dialog',
+        'aria-modal': true,
+        'aria-label': 'User Card Overlay',
+      }}
       side={args.side}
     >
       {hoverCard}

From 2f0992b134b2ad49845b79ced15ba04d3f9040eb Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 29 Oct 2024 16:16:02 -0400
Subject: [PATCH 3/3] docs(AnchoredOverlay): disable focus zone

---
 .../AnchoredOverlay/AnchoredOverlay.features.stories.tsx | 9 +++++++++
 .../src/AnchoredOverlay/AnchoredOverlay.stories.tsx      | 2 ++
 2 files changed, 11 insertions(+)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
index a1dfe68ea63..3f914def820 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
@@ -104,6 +104,7 @@ export const CustomAnchorId = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       anchorId="my-custom-anchor-id"
       overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      focusZoneSettings={{disabled: true}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -121,6 +122,7 @@ export const Height = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       height="large"
       overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      focusZoneSettings={{disabled: true}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -138,6 +140,7 @@ export const Width = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       width="large"
       overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      focusZoneSettings={{disabled: true}}
     >
       <Box
         sx={{
@@ -168,6 +171,7 @@ export const AnchorAlignment = () => {
       )}
       align="center"
       overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      focusZoneSettings={{disabled: true}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -185,6 +189,7 @@ export const AnchorSide = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       side="outside-right"
       overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      focusZoneSettings={{disabled: true}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -202,6 +207,7 @@ export const OffsetPositionFromAnchor = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       anchorOffset={100}
       overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      focusZoneSettings={{disabled: true}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -219,6 +225,7 @@ export const OffsetAlignmentFromAnchor = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       alignmentOffset={100}
       overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      focusZoneSettings={{disabled: true}}
     >
       <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
@@ -237,6 +244,7 @@ export const FocusTrapOverrides = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       focusTrapSettings={{initialFocusRef}}
       overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'Focus Trap Demo Overlay'}}
+      focusZoneSettings={{disabled: true}}
     >
       <Button>First button</Button>
       <Button ref={initialFocusRef}>Initial focus</Button>
@@ -282,6 +290,7 @@ export const OverlayPropsOverrides = () => {
         'aria-modal': true,
         'aria-label': 'User Card Overlay',
       }}
+      focusZoneSettings={{disabled: true}}
     >
       <div>Overlay props have been overridden to set: </div>
       <pre>
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
index 344330f3ce7..84ec0727c24 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
@@ -54,6 +54,7 @@ export const Default = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
       overlayProps={{role: 'dialog', 'aria-modal': true, 'aria-label': 'User Card Overlay'}}
+      focusZoneSettings={{disabled: true}}
     >
       {hoverCard}
     </AnchoredOverlay>
@@ -84,6 +85,7 @@ export const Playground = (args: Args) => {
         'aria-label': 'User Card Overlay',
       }}
       side={args.side}
+      focusZoneSettings={{disabled: true}}
     >
       {hoverCard}
     </AnchoredOverlay>