From cc235fda057850561848d91793ca17ea58607856 Mon Sep 17 00:00:00 2001
From: Jeremy Neal <radglob@github.com>
Date: Thu, 22 Jun 2023 11:13:12 -0400
Subject: [PATCH] Accessibility engineering review for Link component. (#3317)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Remove as prop from Link.

* Underline Link when inside of a paragraph tag, hover behavior should match focus behavior.

* Create curly-otters-repeat.md

* Soft deprecate as prop for Link so we don't break compatibility.

* Fix issues with Link-dependent components when as prop is not accepted.

* Remove ReactRouterLikeLink function from NavList tests.

* Remove references to as prop from Link docs.

* Update generated/components.json

* Remove reference to as prop in ActionList.LinkItem docs.

* Update generated/components.json

* Add link variant to button to match PVC implementation.

* Update generated/components.json

* Allow up to 4 levels of nesting for the NavList (#3343)

* allows up to 4 levels of nesting for the NavList

* adds changeset

* Update src/NavList/NavList.tsx

Co-authored-by: Cole Bemis <colebemis@github.com>

* updates snapshots

---------

Co-authored-by: Cole Bemis <colebemis@github.com>

* Refactor(ActionList): ActionList.Item should render content as a button if parent is not interactive. (#3284)

* Using button as the underlying tag for ActionList.Item content.

* Fix subnav layout.

* Changing ActionList content to button if the top-level is not a button. ActionMenu is busted.

* Fix issue where ActionList.Item content would render as a button inside ActionMenu, breaking keyboard navigation.

* Create purple-crabs-matter.md

* test(vrt): update snapshots

* Fix bug with MenuContext not being exported properly.

* Fix color violation in ActionList.Item.

* Formatting, update snapshots.

* test(vrt): update snapshots

* Fix a11y violation in ActionList story.

* Formatting.

* Fix ts-ignore comment.

* Adjust line-height when button is rendered.

* Revert "test(vrt): update snapshots"

This reverts commit ba6d863a69341e0792f44f0185dc336e298775dc.

* Revert "test(vrt): update snapshots"

This reverts commit 31d5358ad85ef83803434aaa09ea016602337e0d.

* Update snapshots.

* Remove flexGrow from ActionList.Item to remove extra 1px vertical height.

* Set padding to 0 and put flexGrow back to fix padding issue for ActionList buttons.

* Fix ActionList text wrap story.

* Fix underlinenav story by checking ActionList.Item if as prop is a.

* Update snapshots and formatting.

* Update snapshots.

* If ActionList.Item content is rendered as a button, remove tabIndex from li and fix padding.

* Fix various layout edge cases.

* ts-ignore event handlers on ItemWrapper.

* Update snapshots.

* Revert fontWeight config that differed from production docs.

* Pass selectionVariant prop illegally in UnderlineNav story to fix issue with Selection spans showing up.

* fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler by @gr2m (#3346)

* fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler (#3163)

* test: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`'s `onSelect` handler

Failing test for https://github.com/primer/react/issues/3162

* fix: prevent closing menu when `event.preventDefault()` is called on `ActionList.Item`ߴs `onSelect` handler

* add storybook example: Delayed Menu Close

* update docs

* docs: changeset

* Update changelog

---------

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>

* Update generated/components.json

---------

Co-authored-by: Gregor Martynus <39992+gr2m@users.noreply.github.com>
Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>

* Check for tabIndex value in isTopLevelInteractive.

* Reference styles in updated menuProps.

* Updated snapshots.

* Fix padding setting instead of using values from styles, which are inverted.

* Update snapshots.

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Gregor Martynus <39992+gr2m@users.noreply.github.com>
Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>

* Rollback attempt at underlying links inside other bits of text.

* Update src/Button/styles.ts

Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Mike Perrotti <mperrotti@github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: Gregor Martynus <39992+gr2m@users.noreply.github.com>
Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>
Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>
---
 .changeset/curly-otters-repeat.md             |   6 +
 docs/content/Link.mdx                         |   4 -
 generated/components.json                     |  14 +-
 src/ActionList/ActionList.docs.json           |   5 -
 src/ActionList/LinkItem.tsx                   |  14 +-
 src/Button/Button.docs.json                   |   4 +-
 src/Button/Button.stories.tsx                 |   2 +-
 src/Button/styles.ts                          |  19 +++
 src/Button/types.ts                           |   2 +-
 src/Link/Link.docs.json                       |   9 +-
 src/Link/Link.features.stories.tsx            |  20 ++-
 src/Link/Link.tsx                             |  46 ++----
 src/Link/__tests__/Link.test.tsx              |  15 +-
 .../__snapshots__/Link.test.tsx.snap          | 134 ++----------------
 src/NavList/NavList.test.tsx                  |  15 +-
 .../__snapshots__/NavList.test.tsx.snap       |  80 ++---------
 src/PageHeader/PageHeader.tsx                 |   8 +-
 .../__snapshots__/SideNav.test.tsx.snap       |  20 +--
 18 files changed, 97 insertions(+), 320 deletions(-)
 create mode 100644 .changeset/curly-otters-repeat.md

diff --git a/.changeset/curly-otters-repeat.md b/.changeset/curly-otters-repeat.md
new file mode 100644
index 00000000000..2504ec46af7
--- /dev/null
+++ b/.changeset/curly-otters-repeat.md
@@ -0,0 +1,6 @@
+---
+"@primer/react": minor
+---
+
+Link components no longer accept an `as` prop. If you need link-like styling, you should use a different component and style accordingly.
+Button has a `link` variant which can be used for this purpose.
diff --git a/docs/content/Link.mdx b/docs/content/Link.mdx
index b414769cc89..3882a7cd795 100644
--- a/docs/content/Link.mdx
+++ b/docs/content/Link.mdx
@@ -10,10 +10,6 @@ import data from '../../src/Link/Link.docs.json'
 
 The Link component styles anchor tags with default hyperlink color cues and hover text decoration. `Link` is used for destinations, or moving from one page to another.
 
-In special cases where you'd like a `<button>` styled like a `Link`, use `<Link as='button'>`. Make sure to provide a click handler with `onClick`.
-
-**Important:** When using the `as` prop, be sure to always render an accessible element type, like `a`, `button`, `input`, or `summary`.
-
 ## Examples
 
 ```jsx live
diff --git a/generated/components.json b/generated/components.json
index 63660e4327b..4a0413f1b68 100644
--- a/generated/components.json
+++ b/generated/components.json
@@ -215,11 +215,6 @@
               "name": "ref",
               "type": "React.RefObject<HTMLAnchorElement>"
             },
-            {
-              "name": "as",
-              "type": "React.ElementType",
-              "defaultValue": "\"a\""
-            },
             {
               "name": "sx",
               "type": "SystemStyleObject"
@@ -900,7 +895,7 @@
         },
         {
           "name": "variant",
-          "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'",
+          "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'\n| 'link'",
           "defaultValue": "'default'",
           "description": "Change the visual style of the button."
         },
@@ -2062,7 +2057,7 @@
           "name": "href",
           "type": "string",
           "defaultValue": "",
-          "description": "URL to be used for the Link. (The `href` is passed to the underlying `<a>` element. If `as` is specified, the link behavior may need different props)."
+          "description": "URL to be used for the Link. (The `href` is passed to the underlying `<a>` element)."
         },
         {
           "name": "muted",
@@ -2086,11 +2081,6 @@
           "name": "ref",
           "type": "React.RefObject<HTMLAnchorElement>"
         },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "defaultValue": "\"a\""
-        },
         {
           "name": "sx",
           "type": "SystemStyleObject"
diff --git a/src/ActionList/ActionList.docs.json b/src/ActionList/ActionList.docs.json
index 392c6db523a..e3c4a6a42c3 100644
--- a/src/ActionList/ActionList.docs.json
+++ b/src/ActionList/ActionList.docs.json
@@ -114,11 +114,6 @@
           "name": "ref",
           "type": "React.RefObject<HTMLAnchorElement>"
         },
-        {
-          "name": "as",
-          "type": "React.ElementType",
-          "defaultValue": "\"a\""
-        },
         {
           "name": "sx",
           "type": "SystemStyleObject"
diff --git a/src/ActionList/LinkItem.tsx b/src/ActionList/LinkItem.tsx
index d4decbe2292..c293e3591be 100644
--- a/src/ActionList/LinkItem.tsx
+++ b/src/ActionList/LinkItem.tsx
@@ -9,6 +9,7 @@ import {ActionListItemProps} from './shared'
 type LinkProps = {
   download?: string
   href?: string
+  to?: string
   hrefLang?: string
   media?: string
   ping?: string
@@ -21,7 +22,7 @@ type LinkProps = {
 // LinkItem does not support selected, variants, etc.
 export type ActionListLinkItemProps = Pick<ActionListItemProps, 'active' | 'children' | 'sx'> & LinkProps
 
-export const LinkItem = React.forwardRef(({sx = {}, active, as: Component, ...props}, forwardedRef) => {
+export const LinkItem = React.forwardRef(({sx = {}, active, ...props}, forwardedRef) => {
   const styles = {
     // occupy full size of Item
     paddingX: 2,
@@ -35,6 +36,8 @@ export const LinkItem = React.forwardRef(({sx = {}, active, as: Component, ...pr
     '&:hover': {color: 'inherit', textDecoration: 'none'},
   }
 
+  if (props.href === undefined && props.to !== undefined) props.href = props.to
+
   return (
     <Item
       active={active}
@@ -45,14 +48,7 @@ export const LinkItem = React.forwardRef(({sx = {}, active, as: Component, ...pr
           props.onClick && props.onClick(event as React.MouseEvent<HTMLAnchorElement>)
         }
         return (
-          <Link
-            as={Component}
-            sx={merge(styles, sx as SxProp)}
-            {...rest}
-            {...props}
-            onClick={clickHandler}
-            ref={forwardedRef}
-          >
+          <Link sx={merge(styles, sx as SxProp)} {...rest} {...props} onClick={clickHandler} ref={forwardedRef}>
             {children}
           </Link>
         )
diff --git a/src/Button/Button.docs.json b/src/Button/Button.docs.json
index 4fc26b7b1bc..d718d002316 100644
--- a/src/Button/Button.docs.json
+++ b/src/Button/Button.docs.json
@@ -13,7 +13,7 @@
     },
     {
       "name": "variant",
-      "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'",
+      "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'\n| 'link'",
       "defaultValue": "'default'",
       "description": "Change the visual style of the button."
     },
@@ -67,4 +67,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
index daa7ec54ee3..2048159eb8c 100644
--- a/src/Button/Button.stories.tsx
+++ b/src/Button/Button.stories.tsx
@@ -22,7 +22,7 @@ export default {
       control: {
         type: 'radio',
       },
-      options: ['default', 'primary', 'danger', 'invisible', 'outline'],
+      options: ['default', 'primary', 'danger', 'invisible', 'outline', 'link'],
     },
     alignContent: {
       control: {
diff --git a/src/Button/styles.ts b/src/Button/styles.ts
index 67276efe797..ab5c29dc8f8 100644
--- a/src/Button/styles.ts
+++ b/src/Button/styles.ts
@@ -186,6 +186,25 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         borderColor: 'btn.outline.selectedBorder',
       },
     },
+    link: {
+      color: 'accent.fg',
+      backgroundColor: 'transparent',
+      display: 'inline-flex',
+      border: 'none',
+      height: 'unset',
+      padding: 0,
+      '&:hover:not(:disabled)': {
+        textDecoration: 'underline',
+      },
+      '&:focus-visible, &:focus': {
+        outlineOffset: '2px',
+      },
+      '&:disabled, &[aria-disabled=true]': {
+        color: 'primer.fg.disabled',
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+      },
+    },
   }
   return style[variant]
 }
diff --git a/src/Button/types.ts b/src/Button/types.ts
index 6ad81d0e9a0..b9477c4bcf8 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -8,7 +8,7 @@ export const StyledButton = styled.button<SxProp>`
   ${sx};
 `
 
-export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outline'
+export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outline' | 'link'
 
 export type Size = 'small' | 'medium' | 'large'
 
diff --git a/src/Link/Link.docs.json b/src/Link/Link.docs.json
index 3563203ff67..86f2fec216d 100644
--- a/src/Link/Link.docs.json
+++ b/src/Link/Link.docs.json
@@ -9,7 +9,7 @@
       "name": "href",
       "type": "string",
       "defaultValue": "",
-      "description": "URL to be used for the Link. (The `href` is passed to the underlying `<a>` element. If `as` is specified, the link behavior may need different props)."
+      "description": "URL to be used for the Link. (The `href` is passed to the underlying `<a>` element)."
     },
     {
       "name": "muted",
@@ -33,15 +33,10 @@
       "name": "ref",
       "type": "React.RefObject<HTMLAnchorElement>"
     },
-    {
-      "name": "as",
-      "type": "React.ElementType",
-      "defaultValue": "\"a\""
-    },
     {
       "name": "sx",
       "type": "SystemStyleObject"
     }
   ],
   "subcomponents": []
-}
\ No newline at end of file
+}
diff --git a/src/Link/Link.features.stories.tsx b/src/Link/Link.features.stories.tsx
index 22fe440c73b..3d1b3d5d99d 100644
--- a/src/Link/Link.features.stories.tsx
+++ b/src/Link/Link.features.stories.tsx
@@ -1,5 +1,6 @@
 import Link from '../Link'
-import {Meta} from '@storybook/react'
+import Box from '../Box'
+import {Meta, StoryFn} from '@storybook/react'
 import React from 'react'
 import {ComponentProps} from '../utils/types'
 
@@ -19,3 +20,20 @@ export const Underline = () => (
     Link
   </Link>
 )
+
+export const WithinText: StoryFn<typeof Link> = args => (
+  <Box as="p">
+    This{' '}
+    <Link href="#" {...args}>
+      link
+    </Link>{' '}
+    is inside of other text.
+  </Box>
+)
+
+WithinText.args = {
+  muted: false,
+  underline: false,
+}
+
+WithinText.argTypes = {}
diff --git a/src/Link/Link.tsx b/src/Link/Link.tsx
index 735c1674466..006cc93a3f4 100644
--- a/src/Link/Link.tsx
+++ b/src/Link/Link.tsx
@@ -1,4 +1,4 @@
-import React, {forwardRef, useEffect} from 'react'
+import React, {forwardRef} from 'react'
 import styled from 'styled-components'
 import {system} from 'styled-system'
 import {get} from '../constants'
@@ -23,55 +23,27 @@ const hoverColor = system({
 const StyledLink = styled.a<StyledLinkProps>`
   color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))};
   text-decoration: ${props => (props.underline ? 'underline' : 'none')};
-  &:hover {
+  &:hover,
+  &:focus {
     text-decoration: ${props => (props.muted ? 'none' : 'underline')};
     ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')};
   }
-  &:is(button) {
-    display: inline-block;
-    padding: 0;
-    font-size: inherit;
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    background-color: transparent;
-    border: 0;
-    appearance: none;
-  }
   ${sx};
 `
 
-const Link = forwardRef(({as: Component = 'a', ...props}, forwardedRef) => {
+const Link = forwardRef(({as, ...props}, forwardedRef) => {
   const innerRef = React.useRef<HTMLAnchorElement>(null)
   useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
-  if (__DEV__) {
-    /**
-     * The Linter yells because it thinks this conditionally calls an effect,
-     * but since this is a compile-time flag and not a runtime conditional
-     * this is safe, and ensures the entire effect is kept out of prod builds
-     * shaving precious bytes from the output, and avoiding mounting a noop effect
-     */
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-      if (
-        innerRef.current &&
-        !(innerRef.current instanceof HTMLButtonElement) &&
-        !(innerRef.current instanceof HTMLAnchorElement)
-      ) {
-        // eslint-disable-next-line no-console
-        console.error(
-          'Error: Found `Link` component that renders an inaccessible element',
-          innerRef.current,
-          'Please ensure `Link` always renders as <a> or <button>',
-        )
-      }
-    }, [innerRef])
+  if (as !== undefined) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'Links no longer accept an as prop. If you need to style another tag as a link, you should use a different component and apply appropriate styling.',
+    )
   }
 
   return (
     <StyledLink
-      as={Component}
       {...props}
       // @ts-ignore shh
       ref={innerRef}
diff --git a/src/Link/__tests__/Link.test.tsx b/src/Link/__tests__/Link.test.tsx
index 1506aca38f1..610c87cebf0 100644
--- a/src/Link/__tests__/Link.test.tsx
+++ b/src/Link/__tests__/Link.test.tsx
@@ -5,7 +5,7 @@ import {render as HTMLRender} from '@testing-library/react'
 import {axe} from 'jest-axe'
 
 describe('Link', () => {
-  behavesAsComponent({Component: Link})
+  behavesAsComponent({Component: Link, options: {skipAs: true}})
 
   checkExports('Link', {
     default: Link,
@@ -29,10 +29,6 @@ describe('Link', () => {
     expect(render(<Link sx={{fontStyle: 'italic'}} />)).toHaveStyleRule('font-style', 'italic')
   })
 
-  it('applies button styles when rendering a button element', () => {
-    expect(render(<Link as="button" />)).toMatchSnapshot()
-  })
-
   it('respects the "muted" prop', () => {
     expect(render(<Link muted />)).toMatchSnapshot()
   })
@@ -40,13 +36,4 @@ describe('Link', () => {
   it('respects the  "sx" prop when "muted" prop is also passed', () => {
     expect(render(<Link muted sx={{color: 'fg.onEmphasis'}} />)).toMatchSnapshot()
   })
-
-  it('logs a warning when trying to render invalid "as" prop', () => {
-    const consoleSpy = jest.spyOn(global.console, 'error').mockImplementation()
-
-    HTMLRender(<Link as="i" />)
-    expect(consoleSpy).toHaveBeenCalled()
-
-    consoleSpy.mockRestore()
-  })
 })
diff --git a/src/Link/__tests__/__snapshots__/Link.test.tsx.snap b/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
index eaad8694936..5bc12f42d7d 100644
--- a/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
+++ b/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
@@ -1,39 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Link applies button styles when rendering a button element 1`] = `
-.c0 {
-  color: #0969da;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c0:hover {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.c0:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-<button
-  className="c0"
-/>
-`;
-
 exports[`Link passes href down to link element 1`] = `
 .c0 {
   color: #0969da;
@@ -41,28 +7,12 @@ exports[`Link passes href down to link element 1`] = `
   text-decoration: none;
 }
 
-.c0:hover {
+.c0:hover,
+.c0:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c0:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 <a
   className="c0"
   href="https://github.com"
@@ -76,28 +26,12 @@ exports[`Link renders consistently 1`] = `
   text-decoration: none;
 }
 
-.c0:hover {
+.c0:hover,
+.c0:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c0:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 <a
   className="c0"
 />
@@ -110,29 +44,13 @@ exports[`Link respects hoverColor prop 1`] = `
   text-decoration: none;
 }
 
-.c0:hover {
+.c0:hover,
+.c0:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   color: #0969da;
 }
 
-.c0:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 <a
   className="c0"
 />
@@ -146,29 +64,13 @@ exports[`Link respects the  "sx" prop when "muted" prop is also passed 1`] = `
   color: #ffffff;
 }
 
-.c0:hover {
+.c0:hover,
+.c0:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #0969da;
 }
 
-.c0:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 <a
   className="c0"
   muted={true}
@@ -182,29 +84,13 @@ exports[`Link respects the "muted" prop 1`] = `
   text-decoration: none;
 }
 
-.c0:hover {
+.c0:hover,
+.c0:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #0969da;
 }
 
-.c0:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 <a
   className="c0"
   muted={true}
diff --git a/src/NavList/NavList.test.tsx b/src/NavList/NavList.test.tsx
index ee4fa595285..828ffb62b6f 100644
--- a/src/NavList/NavList.test.tsx
+++ b/src/NavList/NavList.test.tsx
@@ -3,13 +3,6 @@ import React from 'react'
 import {ThemeProvider, SSRProvider} from '..'
 import {NavList} from './NavList'
 
-type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode}
-
-const ReactRouterLikeLink = React.forwardRef<HTMLAnchorElement, ReactRouterLikeLinkProps>(({to, ...props}, ref) => {
-  // eslint-disable-next-line jsx-a11y/anchor-has-content
-  return <a ref={ref} href={to} {...props} />
-})
-
 type NextJSLinkProps = {href: string; children: React.ReactNode}
 
 const NextJSLikeLink = React.forwardRef<HTMLAnchorElement, NextJSLinkProps>(
@@ -81,10 +74,10 @@ describe('NavList.Item', () => {
     expect(aboutLink).not.toHaveAttribute('aria-current')
   })
 
-  it('is compatiable with React-Router-like link components', () => {
+  it('is compatible with React-Router-like link components', () => {
     const {getByRole} = render(
       <NavList>
-        <NavList.Item as={ReactRouterLikeLink} to={'/'} aria-current="page">
+        <NavList.Item href={'/'} aria-current="page">
           React Router link
         </NavList.Item>
       </NavList>,
@@ -301,12 +294,12 @@ describe('NavList.Item with NavList.SubNav', () => {
     expect(consoleSpy).toHaveBeenCalled()
   })
 
-  it('is compatiable with React-Router-like link components', () => {
+  it('is compatible with React-Router-like link components', () => {
     function NavLink({href, children}: {href: string; children: React.ReactNode}) {
       // In a real app, you'd check if the href matches the url of the current page. For testing purposes, we'll use the text of the link to determine if it's current
       const isCurrent = children === 'Current'
       return (
-        <NavList.Item as={ReactRouterLikeLink} to={href} aria-current={isCurrent ? 'page' : false}>
+        <NavList.Item href={href} aria-current={isCurrent ? 'page' : false}>
           {children}
         </NavList.Item>
       )
diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
index bb5474bed47..aec88626fb0 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -206,28 +206,12 @@ exports[`NavList renders a simple list 1`] = `
   color: inherit;
 }
 
-.c3:hover {
+.c3:hover,
+.c3:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c3:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 .c3:hover {
   color: inherit;
   -webkit-text-decoration: none;
@@ -603,28 +587,12 @@ exports[`NavList renders with groups 1`] = `
   color: inherit;
 }
 
-.c7:hover {
+.c7:hover,
+.c7:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c7:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 .c7:hover {
   color: inherit;
   -webkit-text-decoration: none;
@@ -1081,28 +1049,12 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   font-weight: 400;
 }
 
-.c11:hover {
+.c11:hover,
+.c11:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c11:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 .c11:hover {
   color: inherit;
   -webkit-text-decoration: none;
@@ -1554,28 +1506,12 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   font-weight: 400;
 }
 
-.c11:hover {
+.c11:hover,
+.c11:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c11:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 .c11:hover {
   color: inherit;
   -webkit-text-decoration: none;
diff --git a/src/PageHeader/PageHeader.tsx b/src/PageHeader/PageHeader.tsx
index 8fd6258c72d..1c2fe167f4b 100644
--- a/src/PageHeader/PageHeader.tsx
+++ b/src/PageHeader/PageHeader.tsx
@@ -102,12 +102,16 @@ export type ParentLinkProps = React.PropsWithChildren<ChildrenPropTypes & LinkPr
 
 // PageHeader.ParentLink : Only visible on narrow viewports by default to let users navigate up in the hierarchy.
 const ParentLink = React.forwardRef<HTMLAnchorElement, ParentLinkProps>(
-  ({children, sx = {}, href, 'aria-label': ariaLabel, as = 'a', hidden = hiddenOnRegularAndWide}, ref) => {
+  ({children, sx = {}, href, 'aria-label': ariaLabel, as, hidden = hiddenOnRegularAndWide}, ref) => {
+    if (as !== undefined) {
+      // eslint-disable-next-line no-console
+      console.warn('ParentLink no longer accepts an as prop.')
+    }
+
     return (
       <>
         <Link
           ref={ref}
-          as={as}
           aria-label={ariaLabel}
           muted
           sx={merge<BetterSystemStyleObject>(
diff --git a/src/__tests__/__snapshots__/SideNav.test.tsx.snap b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
index d54bec24567..44c63c89af3 100644
--- a/src/__tests__/__snapshots__/SideNav.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
@@ -7,28 +7,12 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
   text-decoration: none;
 }
 
-.c0:hover {
+.c0:hover,
+.c0:focus {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c0:is(button) {
-  display: inline-block;
-  padding: 0;
-  font-size: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  background-color: transparent;
-  border: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
 .c1 {
   position: relative;
   display: block;