Merge branch 'main' into fix/update-react-aria-dep

docs/content/Octicon.mdx

@@ -10,9 +10,12 @@ import data from '../../src/Octicon/Octicon.docs.json'
 
 ## Example
 
-```jsx live
+```js
 import {CheckIcon, XIcon} from '@primer/octicons-react'
-;<>
+```
+
+```jsx live
+<>
   <Octicon icon={CheckIcon} size={32} color="success.fg" sx={{mr: 2}} />
   <Octicon icon={XIcon} size={32} color="danger.fg" />
 </>

package.json

@@ -133,7 +133,7 @@
     "@babel/plugin-proposal-optional-chaining": "7.21.0",
     "@babel/plugin-transform-modules-commonjs": "7.21.2",
     "@babel/preset-react": "7.22.5",
-    "@babel/preset-typescript": "7.21.5",
+    "@babel/preset-typescript": "7.22.5",
     "@changesets/changelog-github": "0.4.8",
     "@github/markdownlint-github": "^0.3.0",
     "@github/prettier-config": "0.0.6",

src/Autocomplete/AutocompleteOverlay.tsx

@@ -4,6 +4,7 @@ import Overlay, {OverlayProps} from '../Overlay'
 import {ComponentProps} from '../utils/types'
 import {AutocompleteContext} from './AutocompleteContext'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
+import VisuallyHidden from '../_VisuallyHidden'
 
 type AutocompleteOverlayInternalProps = {
   /**
@@ -49,7 +50,7 @@ function AutocompleteOverlay({
     return null
   }
 
-  return (
+  return showMenu ? (
     <Overlay
       returnFocusRef={inputRef}
       preventFocusOnOpen={true}
@@ -58,14 +59,17 @@ function AutocompleteOverlay({
       ref={floatingElementRef as React.RefObject<HTMLDivElement>}
       top={position?.top}
       left={position?.left}
-      visibility={showMenu ? 'visible' : 'hidden'}
       sx={{
         overflow: 'auto',
       }}
       {...overlayProps}
     >
       {children}
     </Overlay>
+  ) : (
+    // HACK: This ensures AutocompleteMenu is still mounted when closing the menu and all of the hooks inside of it are still called.
+    // A better way to do this would be to move the hooks to AutocompleteOverlay or somewhere that won't get unmounted.
+    <VisuallyHidden aria-hidden="true">{children}</VisuallyHidden>
   )
 }
 

src/Button/Button.dev.stories.tsx

@@ -41,10 +41,10 @@ export const TestSxProp = () => {
       <Button
         size="medium"
         sx={{
-          color: 'deeppink',
+          color: 'firebrick',
         }}
       >
-        Medium Pink
+        Medium Red
       </Button>
       <Button
         size="small"
@@ -61,14 +61,14 @@ export const TestSxProp = () => {
             },
           },
           '@media (min-width: 1440)': {
-            color: 'deeppink',
+            color: 'firebrick',
           },
         }}
       >
-        Pink
+        Red
       </Button>
-      <Button leadingIcon={SearchIcon} variant="invisible" sx={{color: 'deeppink'}}>
-        Pink
+      <Button leadingIcon={SearchIcon} variant="invisible" sx={{color: 'firebrick'}}>
+        Red
       </Button>
       <Button
         size="small"

src/CheckboxGroup/CheckboxGroup.docs.json

@@ -64,7 +64,7 @@
       ]
     },
     {
-      "name": "CheckboxGroup.Description",
+      "name": "CheckboxGroup.Caption",
       "props": [
         {
           "name": "children",

src/Token/Token.features.stories.tsx

@@ -152,7 +152,7 @@ export const IssueLabelTokenCustomColors = () => {
           text="Link"
           fillColor="#0366d6"
         />
-        <IssueLabelToken as="button" onClick={action('clicked')} text="Button" fillColor="deeppink" />
+        <IssueLabelToken as="button" onClick={action('clicked')} text="Button" fillColor="lightpink" />
         <IssueLabelToken as="span" tabIndex={0} onFocus={action('focused')} text="Focusable Span" fillColor="coral" />
       </Box>
       <h3>Color examples</h3>
@@ -276,7 +276,7 @@ export const IssueLabelTokenCustomColors = () => {
           as="a"
           href="/?path=/story/components-token-features--issue-label-token-custom-colors"
           text="💡 Light"
-          fillColor="#f2107d"
+          fillColor="#E40C74"
         />
       </Box>
     </Box>

src/__tests__/Autocomplete.test.tsx

@@ -272,28 +272,30 @@ describe('Autocomplete', () => {
         <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: [], selectionVariant: 'multiple'}} />,
       )
       const inputNode = container.querySelector('#autocompleteInput')
-      const itemToClickNode = getByText(mockItems[1].text)
 
-      expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true')
-      inputNode && fireEvent.focus(inputNode)
-      expect(inputNode?.getAttribute('aria-expanded')).toBe('true')
-      fireEvent.click(itemToClickNode)
-      inputNode && (await user.type(inputNode, '{enter}'))
-      expect(inputNode?.getAttribute('aria-expanded')).toBe('true')
+      if (inputNode) {
+        expect(inputNode.getAttribute('aria-expanded')).not.toBe('true')
+        await user.click(inputNode)
+        expect(inputNode.getAttribute('aria-expanded')).toBe('true')
+        await user.click(getByText(mockItems[1].text))
+        expect(inputNode.getAttribute('aria-expanded')).toBe('true')
+      }
     })
 
-    it('closes the menu when clicking an item in the menu if selectionVariant=single', () => {
+    it('closes the menu when clicking an item in the menu if selectionVariant=single', async () => {
+      const user = userEvent.setup()
       const {getByText, container} = HTMLRender(
         <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: [], selectionVariant: 'single'}} />,
       )
       const inputNode = container.querySelector('#autocompleteInput')
-      const itemToClickNode = getByText(mockItems[1].text)
 
-      expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true')
-      inputNode && fireEvent.focus(inputNode)
-      expect(inputNode?.getAttribute('aria-expanded')).toBe('true')
-      fireEvent.click(itemToClickNode)
-      expect(inputNode?.getAttribute('aria-expanded')).not.toBe('true')
+      if (inputNode) {
+        expect(inputNode.getAttribute('aria-expanded')).not.toBe('true')
+        await user.click(inputNode)
+        expect(inputNode.getAttribute('aria-expanded')).toBe('true')
+        await user.click(getByText(mockItems[1].text))
+        expect(inputNode.getAttribute('aria-expanded')).not.toBe('true')
+      }
     })
 
     it('calls handleAddItem with new item data when passing addNewItem', () => {

src/hooks/useDialog.ts

@@ -1,4 +1,5 @@
 import {useCallback, useEffect} from 'react'
+import {useOnEscapePress} from './useOnEscapePress'
 
 const noop = () => null
 
@@ -103,19 +104,23 @@ function useDialog({
         case 'Tab':
           handleTab(event)
           break
-        case 'Escape':
-          onDismiss()
-          event.stopPropagation()
-          break
       }
     },
-    [handleTab, onDismiss],
+    [handleTab],
   )
 
   const getDialogProps = () => {
     return {onKeyDown}
   }
 
+  useOnEscapePress(
+    (event: KeyboardEvent) => {
+      onDismiss()
+      event.preventDefault()
+    },
+    [onDismiss],
+  )
+
   return {getDialogProps}
 }
 

src/stories/Autocomplete.stories.tsx

@@ -769,8 +769,8 @@ export const InADialog = (args: FormControlArgs<AutocompleteArgs>) => {
 
   return (
     <>
-      <Button onClick={() => setIsDialogOpen(!isDialogOpen)}>Show dialog</Button>
-      <Dialog id="dialog-with-autocomplete" isOpen={isDialogOpen}>
+      <Button onClick={() => setIsDialogOpen(true)}>Show dialog</Button>
+      <Dialog id="dialog-with-autocomplete" isOpen={isDialogOpen} onDismiss={() => setIsDialogOpen(false)}>
         <div ref={outerContainerRef}>
           <Box as="form" sx={{p: 3}}>
             {mounted ? (

src/stories/useFocusZone.stories.tsx

@@ -402,16 +402,23 @@ export const SpecialSituations = () => {
           borderStyle="solid"
           borderRadius={2}
         >
-          <strong>Bound keys: Up, Down, PageUp, PageDown, W, S, J, K, Home, End, Tab</strong>
+          <strong id="focus-label">Bound keys: Up, Down, PageUp, PageDown, W, S, J, K, Home, End, Tab</strong>
           <Box display="flex" flexDirection="column" alignItems="flex-start">
-            <input style={{width: '250px'}} type="text" defaultValue="Printable characters won't move focus" />
+            <input
+              style={{width: '250px'}}
+              type="text"
+              defaultValue="Printable characters won't move focus"
+              aria-labelledby="focus-label"
+            />
+
             <MarginButton>Regular button</MarginButton>
-            <select>
+            <select aria-labelledby="focus-label">
               <option>Down arrow invokes dropdown</option>
               <option>Unless Cmd (mac)/Ctrl (Windows)</option>
               <option>Is held</option>
             </select>
             <textarea
+              aria-labelledby="focus-label"
               style={{width: '250px', height: '95px'}}
               defaultValue="Up/Down only works when at beginning/end. PageUp and PageDown completely disabled. Printable characters will never move focus."
             ></textarea>
@@ -426,11 +433,14 @@ export const SpecialSituations = () => {
           borderStyle="solid"
           borderRadius={2}
         >
-          <strong>Use Left Arrow and Right Arrow to move focus within this box. Focus is circular.</strong>
+          <label htmlFor="focus-input">
+            <strong>Use Left Arrow and Right Arrow to move focus within this box. Focus is circular.</strong>
+          </label>
 
           <Box display="flex" flexDirection="row" alignItems="center">
             <MarginButton>Grapefruit</MarginButton>
             <input
+              id="focus-input"
               style={{width: '300px'}}
               type="text"
               defaultValue="Left/Right only work at beginning/end of input."
@@ -615,13 +625,16 @@ export const ActiveDescendant = () => {
         <MarginButton>Banana</MarginButton>
         <MarginButton>Cantaloupe</MarginButton>
         <Box borderColor="gray.5" m={4} p={4} borderWidth="1px" borderStyle="solid" borderRadius={2}>
-          <strong>Bound keys: Arrow Up and Arrow Down</strong>
+          <label htmlFor="focus-input">
+            <strong>Bound keys: Arrow Up and Arrow Down</strong>
+          </label>
           <Box display="flex" flexDirection="column" alignItems="flex-start">
             <input
               ref={controllingElementRef as React.RefObject<HTMLInputElement>}
               type="text"
               defaultValue="Focus remains here."
               aria-controls="list"
+              id="focus-input"
             />
             <Box
               display="flex"