newspack-components 4.5.0 → 4.6.0

package/src/tabbed-navigation/index.js

@@ -1,60 +1,207 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+import { Tabs } from '@wordpress/ui';
+
 /**
  * External dependencies.
  */
 import classnames from 'classnames';
-import findIndex from 'lodash/findIndex';
 import Router from '../proxied-imports/router';
 
 /**
  * Internal dependencies.
  */
+import { matchesRoute } from '../route-match';
 import './style.scss';
 
-const { NavLink, useHistory } = Router;
+const { useHistory, useLocation } = Router;
 
-const TabbedNavigation = ( { items, className, disableUpcoming, children = null } ) => {
+const getItemValue = ( item, index ) => item.path || item.href || `item-${ index }`;
+
+export const isItemActive = ( item, pathname ) => {
+	if ( item.selected ) {
+		return true;
+	}
+	if ( null === pathname ) {
+		return Boolean( item.href ) && window.location.href === item.href;
+	}
+	return matchesRoute( item, pathname );
+};
+
+/**
+ * Default layout when `Page` doesn't inject one: bar above content.
+ */
+const defaultRenderShell = ( bar, content ) => (
+	<>
+		{ bar }
+		{ content }
+	</>
+);
+
+/**
+ * Router-driven tabs: a real WAI-ARIA tabs widget. The routed page content
+ * renders inside the active tab's `Tabs.Panel`, so each tab's `aria-controls`
+ * points at the panel that actually contains its content — or, when no visible
+ * tab owns the route, as a sibling of the panels (see `unownedContent` below).
+ */
+const RoutedTabbedNavigation = ( { items, className, disableUpcoming, content = null, renderShell = defaultRenderShell, children = null } ) => {
+	const history = useHistory();
+	const { pathname } = useLocation();
 	const displayedItems = items.filter( item => ! item.isHiddenInTabbedNavigation );
-	const { location } = useHistory();
-	const currentIndex = findIndex( displayedItems, [ 'path', location.pathname ] );
 
-	function isActive( item, match, pathname ) {
-		if ( item.path === pathname ) {
-			return true;
+	// Most-specific match wins, so a tab is never outranked by a sibling that
+	// happens to prefix-match the same pathname.
+	const activeIndex = displayedItems.reduce( ( best, item, index ) => {
+		if ( ! isItemActive( item, pathname ) ) {
+			return best;
 		}
-		if ( Array.isArray( item?.activeTabPaths ) ) {
-			return item.activeTabPaths.some( path => {
-				if ( path.endsWith( '*' ) ) {
-					const basePath = path.slice( 0, -1 );
-					return pathname.startsWith( basePath );
-				}
-				return item.activeTabPaths.includes( pathname );
-			} );
+		if ( best === -1 || ( item.path?.length || 0 ) > ( displayedItems[ best ].path?.length || 0 ) ) {
+			return index;
 		}
-		return match;
-	}
+		return best;
+	}, -1 );
+	const activeValue = activeIndex > -1 ? getItemValue( displayedItems[ activeIndex ], activeIndex ) : null;
 
-	return (
+	const onTabClick = ( event, item ) => {
+		// Modified clicks (new tab/window) keep native anchor behavior. Middle
+		// clicks never reach onClick (they dispatch auxclick), so the anchor's
+		// href handles those natively too.
+		if ( event.defaultPrevented || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey ) {
+			return;
+		}
+		// Route through the history object so navigation guards registered via
+		// history.block() (unsaved-changes prompts) are consulted.
+		event.preventDefault();
+		if ( item.path !== pathname ) {
+			history.push( item.path );
+		}
+	};
+
+	const bar = (
 		<div className={ classnames( 'newspack-tabbed-navigation', className ) }>
-			<ul>
-				{ displayedItems.map( ( item, index ) => (
-					<li key={ index }>
-						<NavLink
-							to={ item.path }
-							isActive={ ( match, { pathname } ) => isActive( item, match, pathname ) }
-							exact={ item.hasOwnProperty( 'exact' ) ? item.exact : true }
-							activeClassName={ 'selected' }
-							className={ classnames( {
-								disabled: disableUpcoming && index > currentIndex,
-							} ) }
+			<Tabs.List activateOnFocus={ false }>
+				{ displayedItems.map( ( item, index ) => {
+					const isDisabled = disableUpcoming && index > activeIndex;
+					const href = item.path ? `#${ item.path }` : item.href;
+					return (
+						<Tabs.Tab
+							key={ getItemValue( item, index ) }
+							value={ getItemValue( item, index ) }
+							disabled={ isDisabled }
+							nativeButton={ false }
+							render={
+								// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid -- content is supplied via the Tab children through @wordpress/ui's render prop, and disabled tabs intentionally drop the href.
+								<a
+									href={ isDisabled ? undefined : href }
+									onClick={ isDisabled || ! item.path ? undefined : event => onTabClick( event, item ) }
+								/>
+							}
 						>
 							{ item.label }
-						</NavLink>
-					</li>
-				) ) }
-			</ul>
+						</Tabs.Tab>
+					);
+				} ) }
+			</Tabs.List>
 			{ children }
 		</div>
 	);
+
+	// Panels must stay 1:1 with the tabs above (@wordpress/ui validates the
+	// pairing in development builds); only the active panel holds the content.
+	const panels = displayedItems.map( ( item, index ) => {
+		const value = getItemValue( item, index );
+		return (
+			<Tabs.Panel key={ value } value={ value } tabIndex={ -1 } className="newspack-tabbed-navigation__panel">
+				{ value === activeValue ? content : null }
+			</Tabs.Panel>
+		);
+	} );
+
+	// A route no visible tab owns — a hidden sub-view (an edit screen), or a path
+	// with no matching tab at all — still has to render its content, outside the
+	// panels: with no active tab there is no panel entitled to hold it. Without
+	// this the page body is blank, and because the router's own fallback (the
+	// wizard's trailing `<Redirect>`) lives inside that content, it never mounts
+	// to correct the route either.
+	//
+	// This renders without the panels' `__panel` class, which is styleless today.
+	// Keep it that way: styling `__panel` would silently indent/pad owned routes
+	// only, and the divergence would be hard to trace back to here.
+	const unownedContent = null === activeValue ? content : null;
+
+	return (
+		<Tabs.Root value={ activeValue } className="newspack-tabbed-navigation__root">
+			{ renderShell(
+				bar,
+				<>
+					{ panels }
+					{ unownedContent }
+				</>
+			) }
+		</Tabs.Root>
+	);
+};
+
+/**
+ * Link-driven "tabs": plain navigation for items that trigger full page loads
+ * (e.g. the PHP-rendered wizards admin header). These are not tabs in the ARIA
+ * sense — there is no in-page panel to control — so they render as a `nav` of
+ * links with `aria-current`, styled to match the tabs widget.
+ */
+const LinkTabbedNavigation = ( { items, className, content = null, renderShell = defaultRenderShell, children = null } ) => {
+	const displayedItems = items.filter( item => ! item.isHiddenInTabbedNavigation );
+	const bar = (
+		<nav
+			className={ classnames( 'newspack-tabbed-navigation', 'newspack-tabbed-navigation--links', className ) }
+			aria-label={ __( 'Secondary navigation', 'newspack-plugin' ) }
+		>
+			{ displayedItems.map( ( item, index ) => (
+				<a
+					key={ getItemValue( item, index ) }
+					href={ item.href }
+					className="newspack-tabbed-navigation__link"
+					aria-current={ isItemActive( item, null ) ? 'page' : undefined }
+				>
+					{ item.label }
+				</a>
+			) ) }
+			{ children }
+		</nav>
+	);
+	return renderShell( bar, content );
+};
+
+/**
+ * Tabbed navigation over `{ label, path? | href?, exact?, activeTabPaths?, selected?, isHiddenInTabbedNavigation? }` items.
+ *
+ * Items with router `path`s render as a real tabs widget whose active panel
+ * contains `content`; href-only items render as plain navigation links.
+ *
+ * When no visible tab owns the current route — a hidden sub-view, or an unknown
+ * URL — `content` renders as a sibling of the panels with no tab selected. That
+ * is a safety net, not the preferred shape: for a route that is conceptually a
+ * sub-view of a tab, give that tab an `activeTabPaths` entry (e.g.
+ * `activeTabPaths: [ '/edit/*' ]`) so it stays selected and its panel keeps
+ * owning the content.
+ *
+ * `renderShell( bar, content )` is a layout injection point used by `Page` to
+ * place the bar inside its sticky header region while the content flows below.
+ *
+ * @param {Object}  props
+ * @param {Array}   props.items             Navigation items.
+ * @param {boolean} [props.disableUpcoming] Disable tabs after the active one (setup flows).
+ * @param {*}       [props.content]         Page content, rendered inside the active tab's panel — or
+ *                                          as a sibling of the panels when no visible tab owns the route.
+ * @param {*}       [props.renderShell]     Layout callback `( bar, content ) => element`.
+ * @param {string}  [props.className]
+ * @param {*}       [props.children]        Extra elements rendered inside the bar (e.g. error notices).
+ * @return {JSX.Element} Tabbed navigation.
+ */
+const TabbedNavigation = props => {
+	const hasRoutedItems = props.items.some( item => item.path );
+	return hasRoutedItems ? <RoutedTabbedNavigation { ...props } /> : <LinkTabbedNavigation { ...props } />;
 };
 
 export default TabbedNavigation;

package/src/tabbed-navigation/index.test.js

@@ -0,0 +1,228 @@
+/**
+ * External dependencies.
+ */
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { MemoryRouter, Redirect, useHistory } from 'react-router-dom';
+
+/**
+ * Internal dependencies.
+ */
+import TabbedNavigation, { isItemActive } from './index';
+
+const HistoryGrabber = ( { historyRef } ) => {
+	historyRef.current = useHistory();
+	return null;
+};
+
+const ITEMS = [
+	{ label: 'Stories', path: '/stories' },
+	{ label: 'Budgets', path: '/budgets' },
+	{ label: 'Sites', path: '/sites' },
+];
+
+const renderTabs = ( { initialEntries = [ '/stories' ], ...props } = {} ) => {
+	const historyRef = { current: null };
+	render(
+		<MemoryRouter initialEntries={ initialEntries }>
+			<HistoryGrabber historyRef={ historyRef } />
+			<TabbedNavigation items={ ITEMS } content={ <div>Routed content</div> } { ...props } />
+		</MemoryRouter>
+	);
+	return historyRef.current;
+};
+
+const getTab = name => screen.getByRole( 'tab', { name } );
+
+describe( 'isItemActive', () => {
+	it( 'treats an explicitly selected item as active regardless of pathname', () => {
+		expect( isItemActive( { selected: true, path: '/other' }, '/current' ) ).toBe( true );
+		expect( isItemActive( { selected: true }, null ) ).toBe( true );
+	} );
+
+	describe( 'outside a router (pathname is null)', () => {
+		afterEach( () => {
+			delete window.location;
+			window.location = new URL( 'http://localhost/' );
+		} );
+
+		it( 'is active when the href matches the current URL', () => {
+			delete window.location;
+			window.location = new URL( 'http://example.com/wp-admin/admin.php?page=ads' );
+			expect( isItemActive( { href: 'http://example.com/wp-admin/admin.php?page=ads' }, null ) ).toBe( true );
+		} );
+
+		it( 'is inactive when the href does not match', () => {
+			delete window.location;
+			window.location = new URL( 'http://example.com/wp-admin/admin.php?page=ads' );
+			expect( isItemActive( { href: 'http://example.com/wp-admin/admin.php?page=other' }, null ) ).toBe( false );
+		} );
+
+		it( 'is inactive when the item has no href', () => {
+			expect( isItemActive( { path: '/ads' }, null ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'inside a router (delegates to the shared route matcher)', () => {
+		it( 'matches a path as a prefix by default', () => {
+			expect( isItemActive( { path: '/stories' }, '/stories' ) ).toBe( true );
+			expect( isItemActive( { path: '/stories' }, '/stories/new' ) ).toBe( true );
+			expect( isItemActive( { path: '/stories' }, '/budgets' ) ).toBe( false );
+		} );
+
+		it( 'matches exactly when the item opts in via exact', () => {
+			expect( isItemActive( { path: '/stories', exact: true }, '/stories/new' ) ).toBe( false );
+		} );
+
+		it( 'keeps the parent tab active on a hidden subpage via wildcard', () => {
+			const item = { path: '/additional-brands', activeTabPaths: [ '/additional-brands/*' ] };
+			expect( isItemActive( item, '/additional-brands/new' ) ).toBe( true );
+		} );
+	} );
+} );
+
+describe( 'TabbedNavigation with routed items', () => {
+	it( 'renders the routed content inside the active tab panel', () => {
+		renderTabs( { initialEntries: [ '/budgets' ] } );
+		expect( getTab( 'Budgets' ) ).toHaveAttribute( 'aria-selected', 'true' );
+
+		const content = screen.getByText( 'Routed content' );
+		const panel = content.closest( '[role="tabpanel"]' );
+		expect( panel ).not.toBeNull();
+		expect( getTab( 'Budgets' ) ).toHaveAttribute( 'aria-controls', panel.id );
+	} );
+
+	it( 'keeps the tab active and the content in its panel on a nested route', () => {
+		renderTabs( { initialEntries: [ '/stories/new' ] } );
+		expect( getTab( 'Stories' ) ).toHaveAttribute( 'aria-selected', 'true' );
+		expect( screen.getByText( 'Routed content' ).closest( '[role="tabpanel"]' ) ).not.toBeNull();
+	} );
+
+	it( 'prefers the most specific tab when paths nest', () => {
+		render(
+			<MemoryRouter initialEntries={ [ '/stories/new' ] }>
+				<TabbedNavigation
+					items={ [
+						{ label: 'Stories', path: '/stories' },
+						{ label: 'New story', path: '/stories/new' },
+					] }
+				/>
+			</MemoryRouter>
+		);
+		expect( getTab( 'New story' ) ).toHaveAttribute( 'aria-selected', 'true' );
+		expect( getTab( 'Stories' ) ).toHaveAttribute( 'aria-selected', 'false' );
+	} );
+
+	it( 'navigates through history.push on click', () => {
+		const history = renderTabs();
+		fireEvent.click( getTab( 'Sites' ) );
+		expect( history.location.pathname ).toBe( '/sites' );
+		expect( getTab( 'Sites' ) ).toHaveAttribute( 'aria-selected', 'true' );
+	} );
+
+	it( 'leaves modified clicks to the browser', () => {
+		const history = renderTabs();
+		fireEvent.click( getTab( 'Sites' ), { metaKey: true } );
+		expect( history.location.pathname ).toBe( '/stories' );
+	} );
+
+	it( 'consults history.block guards before navigating', () => {
+		const history = renderTabs();
+		const unblock = history.block( () => false );
+		fireEvent.click( getTab( 'Sites' ) );
+		expect( history.location.pathname ).toBe( '/stories' );
+		expect( getTab( 'Stories' ) ).toHaveAttribute( 'aria-selected', 'true' );
+		unblock();
+	} );
+
+	it( 'disables tabs after the active one with disableUpcoming', () => {
+		renderTabs( { initialEntries: [ '/budgets' ], disableUpcoming: true } );
+		expect( getTab( 'Stories' ) ).toHaveAttribute( 'href' );
+		expect( getTab( 'Sites' ) ).not.toHaveAttribute( 'href' );
+		expect( getTab( 'Sites' ) ).toHaveAttribute( 'aria-disabled', 'true' );
+
+		fireEvent.click( getTab( 'Sites' ) );
+		expect( getTab( 'Budgets' ) ).toHaveAttribute( 'aria-selected', 'true' );
+	} );
+
+	it( 'disables every tab with disableUpcoming when no route matches', () => {
+		renderTabs( { initialEntries: [ '/unknown' ], disableUpcoming: true } );
+		ITEMS.forEach( ( { label } ) => {
+			expect( getTab( label ) ).toHaveAttribute( 'aria-disabled', 'true' );
+		} );
+	} );
+
+	it( 'renders the content outside the panels when no tab owns the route', () => {
+		// A route no tab matches — an edit screen registered as hidden, or a stale
+		// URL. The content must still mount, or the page body is blank.
+		renderTabs( { initialEntries: [ '/edit/123' ] } );
+
+		// Assert positively: with nothing selected the panels unmount entirely, so
+		// a `closest( '[role=tabpanel]' )` check alone would pass even if the
+		// content rendered somewhere wrong. Exactly one copy also guards the mutual
+		// exclusivity with the in-panel render.
+		const matches = screen.getAllByText( 'Routed content' );
+		expect( matches ).toHaveLength( 1 );
+		expect( matches[ 0 ].closest( '.newspack-tabbed-navigation__root' ) ).not.toBeNull();
+		expect( matches[ 0 ].closest( '[role="tabpanel"]' ) ).toBeNull();
+		ITEMS.forEach( ( { label } ) => {
+			expect( getTab( label ) ).toHaveAttribute( 'aria-selected', 'false' );
+		} );
+	} );
+
+	it( 'renders the content when the only matching item is hidden from the bar', () => {
+		// The wizard routes hidden sections but filters them out of the bar, so the
+		// item exists and yet can never own the route.
+		render(
+			<MemoryRouter initialEntries={ [ '/edit/123' ] }>
+				<TabbedNavigation
+					items={ [ ...ITEMS, { label: 'Edit', path: '/edit/:id', isHiddenInTabbedNavigation: true } ] }
+					content={ <div>Routed content</div> }
+				/>
+			</MemoryRouter>
+		);
+		expect( screen.getAllByText( 'Routed content' ) ).toHaveLength( 1 );
+		expect( screen.queryByRole( 'tab', { name: 'Edit' } ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'renders unowned content even when disableUpcoming disables every tab', () => {
+		// The setup wizard's Welcome and Completed screens are hidden from the bar
+		// AND use disableUpcoming, so `index > activeIndex` disables every tab. The
+		// content still has to render — this is the case that left onboarding blank.
+		renderTabs( { initialEntries: [ '/unowned' ], disableUpcoming: true } );
+		expect( screen.getAllByText( 'Routed content' ) ).toHaveLength( 1 );
+		ITEMS.forEach( ( { label } ) => {
+			expect( getTab( label ) ).toHaveAttribute( 'aria-disabled', 'true' );
+		} );
+	} );
+
+	it( 'mounts unowned content so a router fallback inside it still runs', () => {
+		// The wizard's trailing <Redirect> lives inside this content, so dropping
+		// it would strand the route instead of correcting it.
+		renderTabs( { initialEntries: [ '/unknown' ], content: <Redirect to="/stories" /> } );
+		expect( getTab( 'Stories' ) ).toHaveAttribute( 'aria-selected', 'true' );
+	} );
+
+	it( 'navigates when the active tab changes so panels follow the route', () => {
+		const history = renderTabs();
+		act( () => history.push( '/budgets' ) );
+		expect( getTab( 'Budgets' ) ).toHaveAttribute( 'aria-selected', 'true' );
+		expect( screen.getByText( 'Routed content' ).closest( '[role="tabpanel"]' ).id ).toBe( getTab( 'Budgets' ).getAttribute( 'aria-controls' ) );
+	} );
+} );
+
+describe( 'TabbedNavigation with href-only items', () => {
+	const LINK_ITEMS = [
+		{ label: 'Newsletters', href: 'http://example.com/wp-admin/admin.php?page=newsletters', selected: true },
+		{ label: 'Ads', href: 'http://example.com/wp-admin/admin.php?page=ads' },
+	];
+
+	it( 'renders plain navigation links instead of a tabs widget', () => {
+		render( <TabbedNavigation items={ LINK_ITEMS } /> );
+		expect( screen.queryByRole( 'tab' ) ).not.toBeInTheDocument();
+		expect( screen.getByRole( 'navigation' ) ).toBeInTheDocument();
+
+		const active = screen.getByRole( 'link', { name: 'Newsletters' } );
+		expect( active ).toHaveAttribute( 'aria-current', 'page' );
+		expect( screen.getByRole( 'link', { name: 'Ads' } ) ).not.toHaveAttribute( 'aria-current' );
+	} );
+} );

package/src/tabbed-navigation/style.scss

@@ -2,81 +2,101 @@
  * Tabbed Navigation
  */
 
+@use "../../../colors/colors.module" as colors;
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
+
+// The Tabs.Root wrapper spans the tab bar and the tab panels so the panels can
+// contain the routed content; it plays no layout role of its own.
+.newspack-tabbed-navigation__root {
+	display: contents;
+}
 
 .newspack-tabbed-navigation {
-	background: white;
+	background: wp-colors.$white;
+	border-bottom: var( --wpds-border-width-xs, #{wp-vars.$border-width} ) solid var( --wpds-color-stroke-surface-neutral-weak, #{wp-colors.$gray-100} );
 	width: 100%;
 
-	@media only screen and ( min-width: 600px ) {
-		position: sticky;
-		top: 46px;
-		z-index: 3;
-	}
-
-	@media only screen and ( min-width: 783px ) {
-		top: 32px;
-	}
+	/* stylelint-disable-next-line plugin-wpds/no-setting-wpds-custom-properties -- deliberate Newspack brand override of the indicator token. */
+	--wpds-color-stroke-interactive-neutral-strong: #{colors.$primary-600};
 
-	ul {
-		box-shadow: 0 -1px 0 inset wp-colors.$gray-300;
-		display: flex;
-		flex-wrap: wrap;
-		margin: 0;
-	}
+	a[role="tab"] {
+		text-decoration: none;
 
-	li {
-		margin-bottom: 0;
-		width: 100%;
+		// wp-admin's unlayered `a { color }` beats every rule inside the design
+		// system's @layer wp-ui, so anchor tabs need their colors restated here:
+		// gray-900 for enabled tabs, and the DS disabled token for disabled ones.
+		&:not([data-disabled]):not([aria-disabled="true"]) {
+			color: wp-colors.$gray-900;
 
-		@media screen and ( min-width: 600px ) {
-			width: auto;
+			&:hover,
+			&:active,
+			&[aria-selected="true"] {
+				color: wp-colors.$gray-900;
+			}
 		}
 
-		a {
-			align-items: center;
-			color: wp-colors.$gray-900;
-			display: flex;
-			font-weight: bold;
-			height: 48px;
+		// wp-admin's common.css and the wizard shell both decorate a:focus with a
+		// box-shadow ring, a 2px border-radius, and a transparent outline. Reset
+		// all three so the component's own :focus-visible ring (an inset outline
+		// on its ::after, shipped by @wordpress/ui) is the only focus treatment.
+		&:focus {
+			border-radius: 0;
+			box-shadow: none;
 			outline: none;
-			padding: 12px 15px;
-			text-decoration: none;
+		}
 
-			@media screen and ( min-width: 600px ) {
-				border-bottom: 4px solid transparent;
-				padding-bottom: 8px;
-			}
+		// Square the component's focus ring corners.
+		&::after {
+			border-radius: 0;
+		}
 
-			&:active,
-			&:focus,
-			&:hover {
-				color: var(--wp-admin-theme-color);
-			}
+		&[data-disabled],
+		&[aria-disabled="true"] {
+			color: var( --wpds-color-foreground-interactive-neutral-disabled, #{wp-colors.$gray-600} );
+			pointer-events: none;
+		}
+	}
 
-			&:focus-visible {
-				outline: 2px solid var(--wp-admin-theme-color);
-				outline-offset: -2px;
-			}
+	// Link-driven variant: plain navigation styled to match the tabs widget.
+	&--links {
+		align-items: stretch;
+		display: flex;
+		overflow-x: auto;
+	}
 
-			&.selected {
-				box-shadow: inset 0 0 0 2px white, inset 0 0 0 4px var(--wp-admin-theme-color);
+	.newspack-tabbed-navigation__link {
+		align-items: center;
+		color: wp-colors.$gray-900;
+		display: flex;
+		font-size: var( --wpds-typography-font-size-md, #{wp-vars.$default-font-size} );
+		height: wp-vars.$grid-unit-60; // Matches @wordpress/ui's horizontal tab height.
+		line-height: 1.2;
+		padding-inline: var( --wpds-dimension-padding-lg, #{wp-vars.$grid-unit-20} );
+		text-decoration: none;
+		white-space: nowrap;
 
-				@media screen and ( min-width: 600px ) {
-					border-color: var(--wp-admin-theme-color);
-					box-shadow: none;
-				}
-			}
+		&:hover,
+		&:active,
+		&:focus {
+			color: wp-colors.$gray-900;
+		}
 
-			&.disabled {
-				cursor: not-allowed;
-				opacity: 0.3;
-				pointer-events: none;
+		// Mirror the tabs widget's focus ring (an inset outline) with plain
+		// outline + offset, replacing wp-admin's box-shadow focus decoration.
+		&:focus {
+			border-radius: 0;
+			box-shadow: none;
+			outline: none;
+		}
 
-				&:hover {
-					color: inherit;
-				}
-			}
+		&:focus-visible {
+			outline: var( --wpds-border-width-focus, var( --wp-admin-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) ) solid var( --wpds-color-stroke-focus, var( --wp-admin-theme-color ) );
+			outline-offset: calc( var( --wpds-dimension-padding-md, #{wp-vars.$grid-unit-15} ) * -1 );
+		}
+
+		&[aria-current="page"] {
+			box-shadow: inset 0 calc( var( --wpds-border-width-focus, #{wp-vars.$border-width-focus-fallback} ) * -1 ) 0 var( --wpds-color-stroke-interactive-neutral-strong, #{colors.$primary-600} );
 		}
 	}
 }