From 24d02707cb8f236371dee6076fa9deae7993e95c Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Fri, 21 Jul 2023 10:29:32 +1000
Subject: [PATCH 01/10] Add deprecated notice and run console warn only in DEV

---
 src/PageLayout/PageLayout.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 6a81204d3a0..398ee9915da 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -482,6 +482,9 @@ Content.displayName = 'PageLayout.Content'
 // PageLayout.Pane
 
 export type PageLayoutPaneProps = {
+  /**
+   * @deprecated position the pane by ordering your markup instead.
+   */
   position?: keyof typeof panePositions | ResponsiveValue<keyof typeof panePositions>
   /**
    * @deprecated Use the `position` prop with a responsive value instead.
@@ -563,12 +566,10 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
     },
     forwardRef,
   ) => {
-    if (responsivePosition !== undefined) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'The `position` prop will be removed on the next major version. You should order your markup as you want it to render instead.',
-      )
-    }
+    warning(
+      responsivePosition !== undefined,
+      'The `position` prop will be removed on the next major version. You should order your markup as you want it to render instead.',
+    )
 
     // Combine position and positionWhenNarrow for backwards compatibility
     const positionProp =

From 6cb8bbe4ef147a025297fdfd4170ad13b615a881 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Fri, 21 Jul 2023 11:13:20 +1000
Subject: [PATCH 02/10] run when the env is not test

---
 src/PageLayout/PageLayout.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 398ee9915da..66df4cd3293 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -566,10 +566,17 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
     },
     forwardRef,
   ) => {
-    warning(
-      responsivePosition !== undefined,
-      'The `position` prop will be removed on the next major version. You should order your markup as you want it to render instead.',
-    )
+    if (__DEV__ && process.env.NODE_ENV !== 'test') {
+      // We don't want these warnings to show up on tests because it fails the tests (at dotcom) due to not extecting a warning.
+      // Practically, this is not a conditional hook, it is just making sure this hook runs only on DEV not PROD.
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      React.useEffect(() => {
+        warning(
+          responsivePosition !== undefined,
+          'The `position` prop will be removed on the next major version. You should order your markup as you want it to render instead.',
+        )
+      }, [responsivePosition])
+    }
 
     // Combine position and positionWhenNarrow for backwards compatibility
     const positionProp =

From 5f94786e60ea76e184222e98287e6200bb51a97c Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Fri, 21 Jul 2023 11:33:45 +1000
Subject: [PATCH 03/10] Revert "Toggle switch a11y take3 (#3510)"

This reverts commit bdbcfd151d00a7995b07f57e2b37468af0bd0ee5.
---
 .changeset/cool-hornets-call.md               |  7 ----
 e2e/components/ToggleSwitch.test.ts           |  5 ---
 src/ToggleSwitch/ToggleSwitch.tsx             |  8 ++--
 src/__tests__/ToggleSwitch.test.tsx           | 35 +++++-----------
 .../__snapshots__/ToggleSwitch.test.tsx.snap  | 41 +++++++++++++------
 5 files changed, 44 insertions(+), 52 deletions(-)
 delete mode 100644 .changeset/cool-hornets-call.md

diff --git a/.changeset/cool-hornets-call.md b/.changeset/cool-hornets-call.md
deleted file mode 100644
index 81fd3401543..00000000000
--- a/.changeset/cool-hornets-call.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-'@primer/react': minor
----
-
-Implement accessibility audit feedback for ToggleSwitch
-
-<!-- Changed components: ToggleSwitch -->
diff --git a/e2e/components/ToggleSwitch.test.ts b/e2e/components/ToggleSwitch.test.ts
index bde4521a25c..33ed880d336 100644
--- a/e2e/components/ToggleSwitch.test.ts
+++ b/e2e/components/ToggleSwitch.test.ts
@@ -30,11 +30,6 @@ test.describe('ToggleSwitch', () => {
               'color-contrast': {
                 enabled: theme !== 'dark_dimmed',
               },
-
-              // the 'default' preview does not associate a label with the button
-              'button-name': {
-                enabled: false,
-              },
             },
           })
         })
diff --git a/src/ToggleSwitch/ToggleSwitch.tsx b/src/ToggleSwitch/ToggleSwitch.tsx
index b149cda4847..20a23ed556e 100644
--- a/src/ToggleSwitch/ToggleSwitch.tsx
+++ b/src/ToggleSwitch/ToggleSwitch.tsx
@@ -7,6 +7,7 @@ import Text from '../Text'
 import {get} from '../constants'
 import {useProvidedStateOrCreate} from '../hooks'
 import sx, {BetterSystemStyleObject, SxProp} from '../sx'
+import VisuallyHidden from '../_VisuallyHidden'
 import {CellAlignment} from '../DataTable/column'
 
 const TRANSITION_DURATION = '80ms'
@@ -251,8 +252,7 @@ const ToggleSwitch: React.FC<React.PropsWithChildren<ToggleSwitchProps>> = ({
         fontSize={size === 'small' ? 0 : 1}
         mx={2}
         aria-hidden="true"
-        sx={{position: 'relative', cursor: 'pointer'}}
-        onClick={handleToggleClick}
+        sx={{position: 'relative'}}
       >
         <Box textAlign="right" sx={isOn ? null : hiddenTextStyles}>
           On
@@ -265,11 +265,13 @@ const ToggleSwitch: React.FC<React.PropsWithChildren<ToggleSwitchProps>> = ({
         onClick={handleToggleClick}
         aria-labelledby={ariaLabelledby}
         aria-describedby={ariaDescribedby}
-        aria-pressed={isOn}
+        aria-checked={isOn}
+        role="switch"
         checked={isOn}
         size={size}
         disabled={!acceptsInteraction}
       >
+        <VisuallyHidden>{isOn ? 'On' : 'Off'}</VisuallyHidden>
         <Box aria-hidden="true" display="flex" alignItems="center" width="100%" height="100%" overflow="hidden">
           <Box
             flexGrow={1}
diff --git a/src/__tests__/ToggleSwitch.test.tsx b/src/__tests__/ToggleSwitch.test.tsx
index 51dea86ab40..f69cba42054 100644
--- a/src/__tests__/ToggleSwitch.test.tsx
+++ b/src/__tests__/ToggleSwitch.test.tsx
@@ -23,7 +23,7 @@ it('renders a switch that is turned off', () => {
   )
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
 })
 it('renders a switch that is turned on', () => {
   const {getByLabelText} = render(
@@ -34,7 +34,7 @@ it('renders a switch that is turned on', () => {
   )
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'true')
 })
 it('renders a switch that is disabled', async () => {
   const user = userEvent.setup()
@@ -46,9 +46,9 @@ it('renders a switch that is disabled', async () => {
   )
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
   await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
 })
 it("renders a switch who's state is loading", async () => {
   const user = userEvent.setup()
@@ -62,9 +62,9 @@ it("renders a switch who's state is loading", async () => {
   const loadingSpinner = container.querySelector('svg')
 
   expect(loadingSpinner).toBeDefined()
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
   await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
 })
 it('switches from off to on uncontrolled', async () => {
   const user = userEvent.setup()
@@ -76,24 +76,9 @@ it('switches from off to on uncontrolled', async () => {
   )
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
   await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
-})
-it('switches from off to on uncontrolled when clicking on status label', async () => {
-  const user = userEvent.setup()
-  const {getByLabelText, getByText} = render(
-    <>
-      <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
-      <ToggleSwitch aria-labelledby="switchLabel" />
-    </>,
-  )
-  const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
-  const toggleSwitchStatusLabel = getByText('Off')
-
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
-  await user.click(toggleSwitchStatusLabel)
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'true')
 })
 it('switches from off to on with a controlled prop', async () => {
   const user = userEvent.setup()
@@ -114,9 +99,9 @@ it('switches from off to on with a controlled prop', async () => {
   const {getByLabelText} = render(<ControlledSwitchComponent />)
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
   await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
+  expect(toggleSwitch).toHaveAttribute('aria-checked', 'true')
 })
 it('calls onChange when the switch is toggled', async () => {
   const user = userEvent.setup()
diff --git a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
index 764e81dd26d..be527cef621 100644
--- a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`renders consistently 1`] = `
   text-align: right;
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25,7 +25,7 @@ exports[`renders consistently 1`] = `
   align-items: center;
 }
 
-.c6 {
+.c7 {
   color: #ffffff;
   line-height: 0;
   -webkit-box-flex: 1;
@@ -48,7 +48,7 @@ exports[`renders consistently 1`] = `
   transition-duration: 80ms;
 }
 
-.c7 {
+.c8 {
   color: #656d76;
   line-height: 0;
   -webkit-box-flex: 1;
@@ -85,13 +85,25 @@ exports[`renders consistently 1`] = `
   flex-direction: row;
 }
 
+.c5 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .c1 {
   font-size: 14px;
   color: #1F2328;
   margin-left: 8px;
   margin-right: 8px;
   position: relative;
-  cursor: pointer;
 }
 
 .c4 {
@@ -140,7 +152,7 @@ exports[`renders consistently 1`] = `
   background-color: hsla(210,24%,88%,1);
 }
 
-.c8 {
+.c9 {
   background-color: #ffffff;
   border-width: 1px;
   border-style: solid;
@@ -190,7 +202,7 @@ exports[`renders consistently 1`] = `
 }
 
 @media (prefers-reduced-motion) {
-  .c8 {
+  .c9 {
     -webkit-transition: none;
     transition: none;
   }
@@ -205,7 +217,6 @@ exports[`renders consistently 1`] = `
     className="c1"
     color="fg.default"
     fontSize={1}
-    onClick={[Function]}
   >
     <div
       className="c2"
@@ -219,23 +230,29 @@ exports[`renders consistently 1`] = `
     </div>
   </span>
   <button
-    aria-pressed={false}
+    aria-checked={false}
     checked={false}
     className="c4"
     disabled={false}
     onClick={[Function]}
+    role="switch"
     size="medium"
   >
+    <span
+      className="c5"
+    >
+      Off
+    </span>
     <div
       aria-hidden="true"
-      className="c5"
+      className="c6"
       display="flex"
       height="100%"
       overflow="hidden"
       width="100%"
     >
       <div
-        className="c6"
+        className="c7"
         color="switchTrack.checked.fg"
       >
         <svg
@@ -252,7 +269,7 @@ exports[`renders consistently 1`] = `
         </svg>
       </div>
       <div
-        className="c7"
+        className="c8"
         color="switchTrack.fg"
       >
         <svg
@@ -272,7 +289,7 @@ exports[`renders consistently 1`] = `
     <div
       aria-hidden="true"
       checked={false}
-      className="c8"
+      className="c9"
       disabled={false}
     />
   </button>

From 843e3045cef75bd1d913034fca08201b5c38b2cf Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Fri, 21 Jul 2023 12:19:46 +1000
Subject: [PATCH 04/10] take the list changes back for underlinenav

---
 src/UnderlineNav2/UnderlineNav.tsx     | 32 +++---------
 src/UnderlineNav2/UnderlineNavItem.tsx | 72 +++++++++++++-------------
 2 files changed, 45 insertions(+), 59 deletions(-)

diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
index 97819919e43..0dcb2a5f97d 100644
--- a/src/UnderlineNav2/UnderlineNav.tsx
+++ b/src/UnderlineNav2/UnderlineNav.tsx
@@ -175,18 +175,13 @@ export const UnderlineNav = forwardRef(
     // This is the case where the viewport is too narrow to show any list item with the more menu. In this case, we only show the dropdown
     const onlyMenuVisible = responsiveProps.items.length === 0
 
-    if (__DEV__) {
-      // Practically, this is not a conditional hook, it is just making sure this hook runs only on DEV not PROD.
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      useEffect(() => {
-        // Address illegal state where there are multiple items that have `aria-current='page'` attribute
-        const activeElements = validChildren.filter(child => {
-          return child.props['aria-current'] !== undefined
-        })
-        invariant(activeElements.length <= 1, 'Only one current element is allowed')
-        invariant(ariaLabel, 'Use the `aria-label` prop to provide an accessible label for assistive technology')
-      })
-    }
+    // Address illegal state where there are multiple items that have `aria-current='page'` attribute
+    const activeElements = validChildren.filter(child => {
+      return child.props['aria-current'] !== undefined
+    })
+    invariant(activeElements.length <= 1, 'Only one current element is allowed')
+    // Throw an error if aria-label is not provided
+    invariant(ariaLabel, 'Use the `aria-label` prop to provide an accessible label for assistive technology')
 
     function getItemsWidth(itemText: string): number {
       return noIconChildWidthArray.find(item => item.text === itemText)?.width ?? 0
@@ -310,18 +305,7 @@ export const UnderlineNav = forwardRef(
           ref={navRef}
         >
           <NavigationList sx={ulStyles} ref={listRef} role="list">
-            {listItems.map(listItem => {
-              return (
-                <Box
-                  key={listItem.props.children}
-                  as="li"
-                  sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}
-                >
-                  {listItem}
-                </Box>
-              )
-            })}
-
+            {listItems}
             {menuItems.length > 0 && (
               <MoreMenuListItem ref={moreMenuRef}>
                 {!onlyMenuVisible && <Box sx={getDividerStyle(theme)}></Box>}
diff --git a/src/UnderlineNav2/UnderlineNavItem.tsx b/src/UnderlineNav2/UnderlineNavItem.tsx
index 836b24ebb59..3ee52796667 100644
--- a/src/UnderlineNav2/UnderlineNavItem.tsx
+++ b/src/UnderlineNav2/UnderlineNavItem.tsx
@@ -114,43 +114,45 @@ export const UnderlineNavItem = forwardRef(
     )
 
     return (
-      <Link
-        ref={ref}
-        as={Component}
-        href={href}
-        aria-current={ariaCurrent}
-        onKeyDown={keyDownHandler}
-        onClick={clickHandler}
-        sx={merge<BetterSystemStyleObject>(getLinkStyles(theme, ariaCurrent), sxProp as SxProp)}
-        {...props}
-      >
-        {iconsVisible && Icon && (
-          <Box as="span" data-component="icon" sx={iconWrapStyles}>
-            <Icon />
-          </Box>
-        )}
-        {children && (
-          <Box
-            as="span"
-            data-component="text"
-            data-content={children}
-            sx={Boolean(ariaCurrent) && ariaCurrent !== 'false' ? {fontWeight: 600} : {}}
-          >
-            {children}
-          </Box>
-        )}
-        {loadingCounters ? (
-          <Box as="span" data-component="counter" sx={counterStyles}>
-            <LoadingCounter />
-          </Box>
-        ) : (
-          counter !== undefined && (
+      <Box as="li" sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+        <Link
+          ref={ref}
+          as={Component}
+          href={href}
+          aria-current={ariaCurrent}
+          onKeyDown={keyDownHandler}
+          onClick={clickHandler}
+          sx={merge<BetterSystemStyleObject>(getLinkStyles(theme, ariaCurrent), sxProp as SxProp)}
+          {...props}
+        >
+          {iconsVisible && Icon && (
+            <Box as="span" data-component="icon" sx={iconWrapStyles}>
+              <Icon />
+            </Box>
+          )}
+          {children && (
+            <Box
+              as="span"
+              data-component="text"
+              data-content={children}
+              sx={Boolean(ariaCurrent) && ariaCurrent !== 'false' ? {fontWeight: 600} : {}}
+            >
+              {children}
+            </Box>
+          )}
+          {loadingCounters ? (
             <Box as="span" data-component="counter" sx={counterStyles}>
-              <CounterLabel>{counter}</CounterLabel>
+              <LoadingCounter />
             </Box>
-          )
-        )}
-      </Link>
+          ) : (
+            counter !== undefined && (
+              <Box as="span" data-component="counter" sx={counterStyles}>
+                <CounterLabel>{counter}</CounterLabel>
+              </Box>
+            )
+          )}
+        </Link>
+      </Box>
     )
   },
 ) as PolymorphicForwardRefComponent<'a', UnderlineNavItemProps>

From fdcd281c62d11995716d3eb0e81508cfb509386b Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Fri, 21 Jul 2023 14:02:13 +1000
Subject: [PATCH 05/10] lint and test fix

---
 src/SplitPageLayout/SplitPageLayout.test.tsx | 10 ++++++----
 src/UnderlineNav2/UnderlineNav.tsx           |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/SplitPageLayout/SplitPageLayout.test.tsx b/src/SplitPageLayout/SplitPageLayout.test.tsx
index 27d7cc182fa..991ddd0aa29 100644
--- a/src/SplitPageLayout/SplitPageLayout.test.tsx
+++ b/src/SplitPageLayout/SplitPageLayout.test.tsx
@@ -17,7 +17,8 @@ describe('SplitPageLayout', () => {
   })
 
   it('renders default layout', () => {
-    const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    // Disabling them for now because we are not expecting them in the tests.
+    // const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
     const {container} = render(
       <ThemeProvider>
         <SplitPageLayout>
@@ -28,13 +29,14 @@ describe('SplitPageLayout', () => {
         </SplitPageLayout>
       </ThemeProvider>,
     )
-    expect(spy).toHaveBeenCalled()
+    // expect(spy).toHaveBeenCalled()
 
     expect(container).toMatchSnapshot()
   })
 
   it('renders Pane with a custom ID', () => {
-    const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+    // Disabling them for now because we are not expecting them in the tests.
+    // const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
     const {getByText} = render(
       <ThemeProvider>
         <SplitPageLayout>
@@ -42,7 +44,7 @@ describe('SplitPageLayout', () => {
         </SplitPageLayout>
       </ThemeProvider>,
     )
-    expect(spy).toHaveBeenCalled()
+    // expect(spy).toHaveBeenCalled()
 
     const pane = getByText('Pane Content')
 
diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
index 0dcb2a5f97d..1695e3b0e23 100644
--- a/src/UnderlineNav2/UnderlineNav.tsx
+++ b/src/UnderlineNav2/UnderlineNav.tsx
@@ -1,4 +1,4 @@
-import React, {useRef, forwardRef, useCallback, useState, MutableRefObject, RefObject, useEffect} from 'react'
+import React, {useRef, forwardRef, useCallback, useState, MutableRefObject, RefObject} from 'react'
 import Box from '../Box'
 import sx, {merge, BetterSystemStyleObject, SxProp} from '../sx'
 import {UnderlineNavContext} from './UnderlineNavContext'

From ec797e112ad993ae5999c2e76bc4bb1b839f6151 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Tue, 25 Jul 2023 15:30:55 +1000
Subject: [PATCH 06/10] Add back "Toggle switch a11y take3 (#3510)"

This reverts commit 5f94786e60ea76e184222e98287e6200bb51a97c.
---
 .changeset/cool-hornets-call.md               |  7 ++++
 e2e/components/ToggleSwitch.test.ts           |  5 +++
 src/ToggleSwitch/ToggleSwitch.tsx             |  8 ++--
 src/__tests__/ToggleSwitch.test.tsx           | 35 +++++++++++-----
 .../__snapshots__/ToggleSwitch.test.tsx.snap  | 41 ++++++-------------
 5 files changed, 52 insertions(+), 44 deletions(-)
 create mode 100644 .changeset/cool-hornets-call.md

diff --git a/.changeset/cool-hornets-call.md b/.changeset/cool-hornets-call.md
new file mode 100644
index 00000000000..81fd3401543
--- /dev/null
+++ b/.changeset/cool-hornets-call.md
@@ -0,0 +1,7 @@
+---
+'@primer/react': minor
+---
+
+Implement accessibility audit feedback for ToggleSwitch
+
+<!-- Changed components: ToggleSwitch -->
diff --git a/e2e/components/ToggleSwitch.test.ts b/e2e/components/ToggleSwitch.test.ts
index 33ed880d336..bde4521a25c 100644
--- a/e2e/components/ToggleSwitch.test.ts
+++ b/e2e/components/ToggleSwitch.test.ts
@@ -30,6 +30,11 @@ test.describe('ToggleSwitch', () => {
               'color-contrast': {
                 enabled: theme !== 'dark_dimmed',
               },
+
+              // the 'default' preview does not associate a label with the button
+              'button-name': {
+                enabled: false,
+              },
             },
           })
         })
diff --git a/src/ToggleSwitch/ToggleSwitch.tsx b/src/ToggleSwitch/ToggleSwitch.tsx
index 20a23ed556e..b149cda4847 100644
--- a/src/ToggleSwitch/ToggleSwitch.tsx
+++ b/src/ToggleSwitch/ToggleSwitch.tsx
@@ -7,7 +7,6 @@ import Text from '../Text'
 import {get} from '../constants'
 import {useProvidedStateOrCreate} from '../hooks'
 import sx, {BetterSystemStyleObject, SxProp} from '../sx'
-import VisuallyHidden from '../_VisuallyHidden'
 import {CellAlignment} from '../DataTable/column'
 
 const TRANSITION_DURATION = '80ms'
@@ -252,7 +251,8 @@ const ToggleSwitch: React.FC<React.PropsWithChildren<ToggleSwitchProps>> = ({
         fontSize={size === 'small' ? 0 : 1}
         mx={2}
         aria-hidden="true"
-        sx={{position: 'relative'}}
+        sx={{position: 'relative', cursor: 'pointer'}}
+        onClick={handleToggleClick}
       >
         <Box textAlign="right" sx={isOn ? null : hiddenTextStyles}>
           On
@@ -265,13 +265,11 @@ const ToggleSwitch: React.FC<React.PropsWithChildren<ToggleSwitchProps>> = ({
         onClick={handleToggleClick}
         aria-labelledby={ariaLabelledby}
         aria-describedby={ariaDescribedby}
-        aria-checked={isOn}
-        role="switch"
+        aria-pressed={isOn}
         checked={isOn}
         size={size}
         disabled={!acceptsInteraction}
       >
-        <VisuallyHidden>{isOn ? 'On' : 'Off'}</VisuallyHidden>
         <Box aria-hidden="true" display="flex" alignItems="center" width="100%" height="100%" overflow="hidden">
           <Box
             flexGrow={1}
diff --git a/src/__tests__/ToggleSwitch.test.tsx b/src/__tests__/ToggleSwitch.test.tsx
index f69cba42054..51dea86ab40 100644
--- a/src/__tests__/ToggleSwitch.test.tsx
+++ b/src/__tests__/ToggleSwitch.test.tsx
@@ -23,7 +23,7 @@ it('renders a switch that is turned off', () => {
   )
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
 })
 it('renders a switch that is turned on', () => {
   const {getByLabelText} = render(
@@ -34,7 +34,7 @@ it('renders a switch that is turned on', () => {
   )
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  expect(toggleSwitch).toHaveAttribute('aria-checked', 'true')
+  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
 })
 it('renders a switch that is disabled', async () => {
   const user = userEvent.setup()
@@ -46,9 +46,9 @@ it('renders a switch that is disabled', async () => {
   )
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
   await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
 })
 it("renders a switch who's state is loading", async () => {
   const user = userEvent.setup()
@@ -62,9 +62,9 @@ it("renders a switch who's state is loading", async () => {
   const loadingSpinner = container.querySelector('svg')
 
   expect(loadingSpinner).toBeDefined()
-  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
   await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
 })
 it('switches from off to on uncontrolled', async () => {
   const user = userEvent.setup()
@@ -76,9 +76,24 @@ it('switches from off to on uncontrolled', async () => {
   )
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
   await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-checked', 'true')
+  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
+})
+it('switches from off to on uncontrolled when clicking on status label', async () => {
+  const user = userEvent.setup()
+  const {getByLabelText, getByText} = render(
+    <>
+      <div id="switchLabel">{SWITCH_LABEL_TEXT}</div>
+      <ToggleSwitch aria-labelledby="switchLabel" />
+    </>,
+  )
+  const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
+  const toggleSwitchStatusLabel = getByText('Off')
+
+  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
+  await user.click(toggleSwitchStatusLabel)
+  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
 })
 it('switches from off to on with a controlled prop', async () => {
   const user = userEvent.setup()
@@ -99,9 +114,9 @@ it('switches from off to on with a controlled prop', async () => {
   const {getByLabelText} = render(<ControlledSwitchComponent />)
   const toggleSwitch = getByLabelText(SWITCH_LABEL_TEXT)
 
-  expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
+  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'false')
   await user.click(toggleSwitch)
-  expect(toggleSwitch).toHaveAttribute('aria-checked', 'true')
+  expect(toggleSwitch).toHaveAttribute('aria-pressed', 'true')
 })
 it('calls onChange when the switch is toggled', async () => {
   const user = userEvent.setup()
diff --git a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
index be527cef621..764e81dd26d 100644
--- a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`renders consistently 1`] = `
   text-align: right;
 }
 
-.c6 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -25,7 +25,7 @@ exports[`renders consistently 1`] = `
   align-items: center;
 }
 
-.c7 {
+.c6 {
   color: #ffffff;
   line-height: 0;
   -webkit-box-flex: 1;
@@ -48,7 +48,7 @@ exports[`renders consistently 1`] = `
   transition-duration: 80ms;
 }
 
-.c8 {
+.c7 {
   color: #656d76;
   line-height: 0;
   -webkit-box-flex: 1;
@@ -85,25 +85,13 @@ exports[`renders consistently 1`] = `
   flex-direction: row;
 }
 
-.c5 {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  -webkit-clip: rect(0,0,0,0);
-  clip: rect(0,0,0,0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 .c1 {
   font-size: 14px;
   color: #1F2328;
   margin-left: 8px;
   margin-right: 8px;
   position: relative;
+  cursor: pointer;
 }
 
 .c4 {
@@ -152,7 +140,7 @@ exports[`renders consistently 1`] = `
   background-color: hsla(210,24%,88%,1);
 }
 
-.c9 {
+.c8 {
   background-color: #ffffff;
   border-width: 1px;
   border-style: solid;
@@ -202,7 +190,7 @@ exports[`renders consistently 1`] = `
 }
 
 @media (prefers-reduced-motion) {
-  .c9 {
+  .c8 {
     -webkit-transition: none;
     transition: none;
   }
@@ -217,6 +205,7 @@ exports[`renders consistently 1`] = `
     className="c1"
     color="fg.default"
     fontSize={1}
+    onClick={[Function]}
   >
     <div
       className="c2"
@@ -230,29 +219,23 @@ exports[`renders consistently 1`] = `
     </div>
   </span>
   <button
-    aria-checked={false}
+    aria-pressed={false}
     checked={false}
     className="c4"
     disabled={false}
     onClick={[Function]}
-    role="switch"
     size="medium"
   >
-    <span
-      className="c5"
-    >
-      Off
-    </span>
     <div
       aria-hidden="true"
-      className="c6"
+      className="c5"
       display="flex"
       height="100%"
       overflow="hidden"
       width="100%"
     >
       <div
-        className="c7"
+        className="c6"
         color="switchTrack.checked.fg"
       >
         <svg
@@ -269,7 +252,7 @@ exports[`renders consistently 1`] = `
         </svg>
       </div>
       <div
-        className="c8"
+        className="c7"
         color="switchTrack.fg"
       >
         <svg
@@ -289,7 +272,7 @@ exports[`renders consistently 1`] = `
     <div
       aria-hidden="true"
       checked={false}
-      className="c9"
+      className="c8"
       disabled={false}
     />
   </button>

From ec1306c2c155ead264be9bcef5318ad9e018103b Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Tue, 25 Jul 2023 15:31:20 +1000
Subject: [PATCH 07/10] Revert "take the list changes back for underlinenav"

This reverts commit 843e3045cef75bd1d913034fca08201b5c38b2cf.
---
 src/UnderlineNav2/UnderlineNav.tsx     | 32 +++++++++---
 src/UnderlineNav2/UnderlineNavItem.tsx | 72 +++++++++++++-------------
 2 files changed, 59 insertions(+), 45 deletions(-)

diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
index 1695e3b0e23..10272dfa916 100644
--- a/src/UnderlineNav2/UnderlineNav.tsx
+++ b/src/UnderlineNav2/UnderlineNav.tsx
@@ -175,13 +175,18 @@ export const UnderlineNav = forwardRef(
     // This is the case where the viewport is too narrow to show any list item with the more menu. In this case, we only show the dropdown
     const onlyMenuVisible = responsiveProps.items.length === 0
 
-    // Address illegal state where there are multiple items that have `aria-current='page'` attribute
-    const activeElements = validChildren.filter(child => {
-      return child.props['aria-current'] !== undefined
-    })
-    invariant(activeElements.length <= 1, 'Only one current element is allowed')
-    // Throw an error if aria-label is not provided
-    invariant(ariaLabel, 'Use the `aria-label` prop to provide an accessible label for assistive technology')
+    if (__DEV__) {
+      // Practically, this is not a conditional hook, it is just making sure this hook runs only on DEV not PROD.
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useEffect(() => {
+        // Address illegal state where there are multiple items that have `aria-current='page'` attribute
+        const activeElements = validChildren.filter(child => {
+          return child.props['aria-current'] !== undefined
+        })
+        invariant(activeElements.length <= 1, 'Only one current element is allowed')
+        invariant(ariaLabel, 'Use the `aria-label` prop to provide an accessible label for assistive technology')
+      })
+    }
 
     function getItemsWidth(itemText: string): number {
       return noIconChildWidthArray.find(item => item.text === itemText)?.width ?? 0
@@ -305,7 +310,18 @@ export const UnderlineNav = forwardRef(
           ref={navRef}
         >
           <NavigationList sx={ulStyles} ref={listRef} role="list">
-            {listItems}
+            {listItems.map(listItem => {
+              return (
+                <Box
+                  key={listItem.props.children}
+                  as="li"
+                  sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}
+                >
+                  {listItem}
+                </Box>
+              )
+            })}
+
             {menuItems.length > 0 && (
               <MoreMenuListItem ref={moreMenuRef}>
                 {!onlyMenuVisible && <Box sx={getDividerStyle(theme)}></Box>}
diff --git a/src/UnderlineNav2/UnderlineNavItem.tsx b/src/UnderlineNav2/UnderlineNavItem.tsx
index 3ee52796667..836b24ebb59 100644
--- a/src/UnderlineNav2/UnderlineNavItem.tsx
+++ b/src/UnderlineNav2/UnderlineNavItem.tsx
@@ -114,45 +114,43 @@ export const UnderlineNavItem = forwardRef(
     )
 
     return (
-      <Box as="li" sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
-        <Link
-          ref={ref}
-          as={Component}
-          href={href}
-          aria-current={ariaCurrent}
-          onKeyDown={keyDownHandler}
-          onClick={clickHandler}
-          sx={merge<BetterSystemStyleObject>(getLinkStyles(theme, ariaCurrent), sxProp as SxProp)}
-          {...props}
-        >
-          {iconsVisible && Icon && (
-            <Box as="span" data-component="icon" sx={iconWrapStyles}>
-              <Icon />
-            </Box>
-          )}
-          {children && (
-            <Box
-              as="span"
-              data-component="text"
-              data-content={children}
-              sx={Boolean(ariaCurrent) && ariaCurrent !== 'false' ? {fontWeight: 600} : {}}
-            >
-              {children}
-            </Box>
-          )}
-          {loadingCounters ? (
+      <Link
+        ref={ref}
+        as={Component}
+        href={href}
+        aria-current={ariaCurrent}
+        onKeyDown={keyDownHandler}
+        onClick={clickHandler}
+        sx={merge<BetterSystemStyleObject>(getLinkStyles(theme, ariaCurrent), sxProp as SxProp)}
+        {...props}
+      >
+        {iconsVisible && Icon && (
+          <Box as="span" data-component="icon" sx={iconWrapStyles}>
+            <Icon />
+          </Box>
+        )}
+        {children && (
+          <Box
+            as="span"
+            data-component="text"
+            data-content={children}
+            sx={Boolean(ariaCurrent) && ariaCurrent !== 'false' ? {fontWeight: 600} : {}}
+          >
+            {children}
+          </Box>
+        )}
+        {loadingCounters ? (
+          <Box as="span" data-component="counter" sx={counterStyles}>
+            <LoadingCounter />
+          </Box>
+        ) : (
+          counter !== undefined && (
             <Box as="span" data-component="counter" sx={counterStyles}>
-              <LoadingCounter />
+              <CounterLabel>{counter}</CounterLabel>
             </Box>
-          ) : (
-            counter !== undefined && (
-              <Box as="span" data-component="counter" sx={counterStyles}>
-                <CounterLabel>{counter}</CounterLabel>
-              </Box>
-            )
-          )}
-        </Link>
-      </Box>
+          )
+        )}
+      </Link>
     )
   },
 ) as PolymorphicForwardRefComponent<'a', UnderlineNavItemProps>

From c43228188d43ae42bd5d79e54bef551339b962ff Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Tue, 25 Jul 2023 15:33:57 +1000
Subject: [PATCH 08/10] fix after revert commit

---
 src/UnderlineNav2/UnderlineNav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
index 10272dfa916..97819919e43 100644
--- a/src/UnderlineNav2/UnderlineNav.tsx
+++ b/src/UnderlineNav2/UnderlineNav.tsx
@@ -1,4 +1,4 @@
-import React, {useRef, forwardRef, useCallback, useState, MutableRefObject, RefObject} from 'react'
+import React, {useRef, forwardRef, useCallback, useState, MutableRefObject, RefObject, useEffect} from 'react'
 import Box from '../Box'
 import sx, {merge, BetterSystemStyleObject, SxProp} from '../sx'
 import {UnderlineNavContext} from './UnderlineNavContext'

From 817716ec297e664ca317e2308fca765554bb3100 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Thu, 27 Jul 2023 10:21:36 +1000
Subject: [PATCH 09/10] remove console warning and update docs and changeset

---
 .changeset/hungry-spies-remember.md          | 17 +++++++++--
 docs/content/PageLayout.mdx                  | 20 ++++++-------
 docs/content/SplitPageLayout.mdx             |  2 +-
 src/PageLayout/PageLayout.tsx                | 30 +++++++++++---------
 src/SplitPageLayout/SplitPageLayout.test.tsx |  6 ----
 5 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/.changeset/hungry-spies-remember.md b/.changeset/hungry-spies-remember.md
index 5ccf73c543f..afa168a6f5d 100644
--- a/.changeset/hungry-spies-remember.md
+++ b/.changeset/hungry-spies-remember.md
@@ -2,6 +2,19 @@
 "@primer/react": patch
 ---
 
-Deprecates position prop for PageLayout.Pane. Users will receive a console warning when it is used.
+Deprecates `position`` prop for PageLayout.Pane and SplitPageLayout.Pane.
 
-<!-- Changed components: PageLayout -->
+```diff
+-<PageLayout>
+-    <PageLayout.Content />
+-    <PageLayout.Pane position="start" />
+-</PageLayout>
+
++<PageLayout>
++    <PageLayout.Pane />
++    <PageLayout.Content />
++</PageLayout>
+    
+```
+
+<!-- Changed components: PageLayout, SplitPageLayout -->
diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
index b3a7be5f539..127d72423cb 100644
--- a/docs/content/PageLayout.mdx
+++ b/docs/content/PageLayout.mdx
@@ -87,12 +87,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/components-page
   <PageLayout.Header>
     <Placeholder label="Header" height={64} />
   </PageLayout.Header>
+  <PageLayout.Pane>
+    <Placeholder label="Pane" height={120} />
+  </PageLayout.Pane>
   <PageLayout.Content>
     <Placeholder label="Content" height={240} />
   </PageLayout.Content>
-  <PageLayout.Pane position="start">
-    <Placeholder label="Pane" height={120} />
-  </PageLayout.Pane>
   <PageLayout.Footer>
     <Placeholder label="Footer" height={64} />
   </PageLayout.Footer>
@@ -106,12 +106,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/components-page
   <PageLayout.Header>
     <Placeholder label="Header" height={64} />
   </PageLayout.Header>
+  <PageLayout.Pane hidden={{narrow: true}}>
+    <Placeholder label="Pane" height={120} />
+  </PageLayout.Pane>
   <PageLayout.Content>
     <Placeholder label="Content" height={240} />
   </PageLayout.Content>
-  <PageLayout.Pane position="start" hidden={{narrow: true}}>
-    <Placeholder label="Pane" height={120} />
-  </PageLayout.Pane>
   <PageLayout.Footer>
     <Placeholder label="Footer" height={64} />
   </PageLayout.Footer>
@@ -193,12 +193,12 @@ Add `offsetHeader` prop to specify the height of the custom sticky header along
     Custom sticky header
   </Box>
   <PageLayout>
+    <PageLayout.Pane sticky offsetHeader={64}>
+      <Placeholder label="Pane" height={120} />
+    </PageLayout.Pane>
     <PageLayout.Content>
       <Placeholder label="Content" height={320} />
     </PageLayout.Content>
-    <PageLayout.Pane position="start" sticky offsetHeader={64}>
-      <Placeholder label="Pane" height={120} />
-    </PageLayout.Pane>
     <PageLayout.Footer>
       <Placeholder label="Footer" height={64} />
     </PageLayout.Footer>
@@ -221,7 +221,7 @@ navigation container is used for.
   <PageLayout.Header>
     <Placeholder label="Header" height={64} />
   </PageLayout.Header>
-  <PageLayout.Pane position="start" aria-label="Secondary navigation">
+  <PageLayout.Pane aria-label="Secondary navigation">
     <NavList>
       <NavList.Item href="/" aria-current="page">
         Home
diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx
index b6f82f4f7fc..3dc7bb4f343 100644
--- a/docs/content/SplitPageLayout.mdx
+++ b/docs/content/SplitPageLayout.mdx
@@ -167,7 +167,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
     <SplitPageLayout.Content>
       <Placeholder label="Content" height={420} />
     </SplitPageLayout.Content>
-    <SplitPageLayout.Pane position="end">
+    <SplitPageLayout.Pane>
       <Placeholder label="Pane" height={120} />
     </SplitPageLayout.Pane>
     <SplitPageLayout.Footer>
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 66df4cd3293..76c7c9eb59d 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -483,7 +483,23 @@ Content.displayName = 'PageLayout.Content'
 
 export type PageLayoutPaneProps = {
   /**
-   * @deprecated position the pane by ordering your markup instead.
+   * @deprecated Use source order instead of relying on the `position` prop
+   *
+   * Before:
+   * ```
+   * <PageLayout>
+   *   <PageLayout.Content />
+   *   <PageLayout.Pane position="start" />
+   * </PageLayout>
+   * ```
+   *
+   * After:
+   * ```
+   * <PageLayout>
+   *   <PageLayout.Pane />
+   *   <PageLayout.Content />
+   * </PageLayout>
+   * ```
    */
   position?: keyof typeof panePositions | ResponsiveValue<keyof typeof panePositions>
   /**
@@ -566,18 +582,6 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
     },
     forwardRef,
   ) => {
-    if (__DEV__ && process.env.NODE_ENV !== 'test') {
-      // We don't want these warnings to show up on tests because it fails the tests (at dotcom) due to not extecting a warning.
-      // Practically, this is not a conditional hook, it is just making sure this hook runs only on DEV not PROD.
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      React.useEffect(() => {
-        warning(
-          responsivePosition !== undefined,
-          'The `position` prop will be removed on the next major version. You should order your markup as you want it to render instead.',
-        )
-      }, [responsivePosition])
-    }
-
     // Combine position and positionWhenNarrow for backwards compatibility
     const positionProp =
       !isResponsiveValue(responsivePosition) && positionWhenNarrow !== 'inherit'
diff --git a/src/SplitPageLayout/SplitPageLayout.test.tsx b/src/SplitPageLayout/SplitPageLayout.test.tsx
index 991ddd0aa29..3a711dfce86 100644
--- a/src/SplitPageLayout/SplitPageLayout.test.tsx
+++ b/src/SplitPageLayout/SplitPageLayout.test.tsx
@@ -17,8 +17,6 @@ describe('SplitPageLayout', () => {
   })
 
   it('renders default layout', () => {
-    // Disabling them for now because we are not expecting them in the tests.
-    // const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
     const {container} = render(
       <ThemeProvider>
         <SplitPageLayout>
@@ -29,14 +27,11 @@ describe('SplitPageLayout', () => {
         </SplitPageLayout>
       </ThemeProvider>,
     )
-    // expect(spy).toHaveBeenCalled()
 
     expect(container).toMatchSnapshot()
   })
 
   it('renders Pane with a custom ID', () => {
-    // Disabling them for now because we are not expecting them in the tests.
-    // const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
     const {getByText} = render(
       <ThemeProvider>
         <SplitPageLayout>
@@ -44,7 +39,6 @@ describe('SplitPageLayout', () => {
         </SplitPageLayout>
       </ThemeProvider>,
     )
-    // expect(spy).toHaveBeenCalled()
 
     const pane = getByText('Pane Content')
 

From d20aa6e04a09667526a1db0c944dc6e6e55cd5c1 Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Thu, 27 Jul 2023 10:38:27 +1000
Subject: [PATCH 10/10] fix changeset and update prop docs

---
 .changeset/hungry-spies-remember.md           | 2 +-
 src/PageLayout/PageLayout.docs.json           | 2 +-
 src/SplitPageLayout/SplitPageLayout.docs.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.changeset/hungry-spies-remember.md b/.changeset/hungry-spies-remember.md
index afa168a6f5d..67f7edc74d2 100644
--- a/.changeset/hungry-spies-remember.md
+++ b/.changeset/hungry-spies-remember.md
@@ -2,7 +2,7 @@
 "@primer/react": patch
 ---
 
-Deprecates `position`` prop for PageLayout.Pane and SplitPageLayout.Pane.
+Deprecates `position` prop for PageLayout.Pane and SplitPageLayout.Pane.
 
 ```diff
 -<PageLayout>
diff --git a/src/PageLayout/PageLayout.docs.json b/src/PageLayout/PageLayout.docs.json
index fd71e789354..199f7f27edb 100644
--- a/src/PageLayout/PageLayout.docs.json
+++ b/src/PageLayout/PageLayout.docs.json
@@ -137,7 +137,7 @@
           "name": "position",
           "type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }",
           "defaultValue": "'end'",
-          "description": "",
+          "description": "Use source order instead of relying on the `position` prop",
           "deprecated": true
         },
         {
diff --git a/src/SplitPageLayout/SplitPageLayout.docs.json b/src/SplitPageLayout/SplitPageLayout.docs.json
index b6b70f17f9f..fdd133c71f9 100644
--- a/src/SplitPageLayout/SplitPageLayout.docs.json
+++ b/src/SplitPageLayout/SplitPageLayout.docs.json
@@ -72,7 +72,7 @@
           "name": "position",
           "type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }",
           "defaultValue": "start'",
-          "description": "",
+          "description": "Use source order instead of relying on the `position` prop",
           "deprecated": true
         },
         {