apply correct semantics to selected breadcrumb items

primer · Nov 26, 2024 · ae04798 · ae04798
1 parent 4800771
commit ae04798
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 19 deletions.
diff --git a/.changeset/sharp-pets-thank.md 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
@@ -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
@@ -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>
     )
   },