From ae04798cfef303f474c8ddeeca839336430a7c02 Mon Sep 17 00:00:00 2001
From: Reza Rahman <13340707+rezrah@users.noreply.github.com>
Date: Tue, 26 Nov 2024 13:55:40 +0000
Subject: [PATCH] apply correct semantics to selected breadcrumb items

---
 .changeset/sharp-pets-thank.md                |  5 +++
 .../src/Breadcrumbs/Breadcrumbs.test.tsx      | 41 ++++++++++++++-----
 .../react/src/Breadcrumbs/Breadcrumbs.tsx     | 24 +++++++----
 3 files changed, 51 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/sharp-pets-thank.md

diff --git a/.changeset/sharp-pets-thank.md b/.changeset/sharp-pets-thank.md
new file mode 100644
index 000000000..dbd209217
--- /dev/null
+++ b/.changeset/sharp-pets-thank.md
@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Remove tab focus from aria-current / selected breadcrumb items
diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.test.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.test.tsx
index aa4a78643..df410cc83 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.test.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.test.tsx
@@ -29,9 +29,7 @@ describe('Breadcrumbs', () => {
       <Breadcrumbs>
         <Breadcrumbs.Item href="/">Resources</Breadcrumbs.Item>
         <Breadcrumbs.Item href="/copilot">GitHub Copilot</Breadcrumbs.Item>
-        <Breadcrumbs.Item href="/copilot/chat" selected>
-          Chat
-        </Breadcrumbs.Item>
+        <Breadcrumbs.Item href="/copilot/chat">Chat</Breadcrumbs.Item>
       </Breadcrumbs>,
     )
 
@@ -54,8 +52,34 @@ describe('Breadcrumbs', () => {
     const item3 = breadcrumbLinkEls[2]
     expect(item3.textContent).toBe('Chat')
     expect(item3.getAttribute('href')).toBe('/copilot/chat')
-    expect(item3.classList).toContain('Breadcrumbs__link--selected')
+  })
+
+  it('renders selected items correctly into the document', () => {
+    const {getByText, getAllByRole} = render(
+      <Breadcrumbs>
+        <Breadcrumbs.Item href="/">Resources</Breadcrumbs.Item>
+        <Breadcrumbs.Item href="/copilot">GitHub Copilot</Breadcrumbs.Item>
+        <Breadcrumbs.Item href="/copilot/chat" selected>
+          Chat
+        </Breadcrumbs.Item>
+      </Breadcrumbs>,
+    )
+
+    const breadcrumbLinkEls = getAllByRole('link')
+    expect(breadcrumbLinkEls).toHaveLength(2)
+
+    const item1 = breadcrumbLinkEls[0]
+    expect(item1.textContent).toBe('Resources')
+    expect(item1.getAttribute('href')).toBe('/')
+
+    const item2 = breadcrumbLinkEls[1]
+    expect(item2.textContent).toBe('GitHub Copilot')
+    expect(item2.getAttribute('href')).toBe('/copilot')
+
+    const item3 = getByText('Chat')
     expect(item3).toHaveAttribute('aria-current', 'page')
+    expect(item3.tagName).toBe('span'.toUpperCase())
+    expect(item3.classList).toContain('Breadcrumbs__link--selected')
   })
 
   it('renders accent variant correctly into the document', () => {
@@ -74,8 +98,8 @@ describe('Breadcrumbs', () => {
   })
 
   it('accepts a custom aria-current value to override the default', () => {
-    const {getByRole} = render(
-      <Breadcrumbs variant="accent">
+    const {getByText} = render(
+      <Breadcrumbs>
         <Breadcrumbs.Item href="/">Resources</Breadcrumbs.Item>
         <Breadcrumbs.Item href="/copilot">GitHub Copilot</Breadcrumbs.Item>
         <Breadcrumbs.Item href="/copilot/chat" selected aria-current="location">
@@ -84,11 +108,8 @@ describe('Breadcrumbs', () => {
       </Breadcrumbs>,
     )
 
-    const breadcrumbsEl = getByRole('navigation')
-    expect(breadcrumbsEl).toHaveClass('Breadcrumbs--accent')
+    const item3 = getByText('Chat')
 
-    const breadcrumbLinkEls = breadcrumbsEl.querySelectorAll('a')
-    const item3 = breadcrumbLinkEls[2]
     expect(item3).toHaveAttribute('aria-current', 'location')
   })
 })
diff --git a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
index 0030d60e4..50f66f3ff 100644
--- a/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
+++ b/packages/react/src/Breadcrumbs/Breadcrumbs.tsx
@@ -10,6 +10,7 @@ import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/compone
 /** * Main Stylesheet (as a CSS Module) */
 import styles from './Breadcrumbs.module.css'
 import {InlineLink} from '../InlineLink'
+import {Text} from '../Text'
 
 export const BreadcrumbVariants = ['default', 'accent'] as const
 
@@ -46,15 +47,20 @@ const _Item = forwardRef<HTMLAnchorElement, ItemProps>(
   ({'aria-current': ariaCurrent, className, children, href, selected, ...rest}, ref) => {
     return (
       <li className={styles.Breadcrumbs__item}>
-        <InlineLink
-          href={href}
-          ref={ref}
-          className={clsx(styles.Breadcrumbs__link, selected && styles['Breadcrumbs__link--selected'], className)}
-          aria-current={ariaCurrent ? ariaCurrent : selected ? 'page' : undefined}
-          {...rest}
-        >
-          {children}
-        </InlineLink>
+        {selected ? (
+          <Text
+            variant="muted"
+            className={clsx(styles.Breadcrumbs__link, styles['Breadcrumbs__link--selected'], className)}
+            aria-current={ariaCurrent ? ariaCurrent : 'page'}
+            {...rest}
+          >
+            {children}
+          </Text>
+        ) : (
+          <InlineLink href={href} ref={ref} className={clsx(styles.Breadcrumbs__link, className)} {...rest}>
+            {children}
+          </InlineLink>
+        )}
       </li>
     )
   },