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', () => {
Resources
GitHub Copilot
-
- Chat
-
+ Chat
,
)
@@ -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(
+
+ Resources
+ GitHub Copilot
+
+ Chat
+
+ ,
+ )
+
+ 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(
-
+ const {getByText} = render(
+
Resources
GitHub Copilot
@@ -84,11 +108,8 @@ describe('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(
({'aria-current': ariaCurrent, className, children, href, selected, ...rest}, ref) => {
return (
-
- {children}
-
+ {selected ? (
+
+ {children}
+
+ ) : (
+
+ {children}
+
+ )}
)
},