Summary

Fixed a bug in the usa-skipnav component where the visual focus indicator on the target element would disappear after activation. This change ensures the focus indicator remains visible by removing an explicit JavaScript outline removal, improving accessibility for keyboard users.

Breaking change

This is not a breaking change.

Related issue

Closes #6474

Related pull requests

NA

Preview link

Old Functionality (Focus Indicator Disappears):
https://github.com/user-attachments/assets/63405f9d-01bf-4383-bc65-1945c67610e9

New Functionality (Focus Indicator Persists):
https://github.com/user-attachments/assets/4e9ff6e5-81e7-4949-b548-6974fc77455e

Previewed locally using Storybook. The skipnav component now correctly maintains visual focus on the target element.

Problem statement

Currently, when a user activates a skipnav link (e.g., "Skip to main content"), the target element (like <main id="main-content">) receives programmatic focus, but the visual focus indicator is immediately removed by a line of JavaScript (target.style.outline = "0";). This prevents users, particularly those relying on keyboard navigation, from visually confirming where their focus has landed on the page, negatively impacting accessibility and user orientation.

Solution

This PR fixes the disappearing focus indicator by removing the line target.style.outline = "0"; from the setTabindex function in packages/usa-skipnav/src/index.js. By removing this explicit outline suppression, the browser's default focus outline or USWDS-defined CSS focus styles will now correctly apply and remain visible on the skipnav target element. This ensures that keyboard users receive the necessary visual feedback when navigating via skip links.

Major changes

Removed target.style.outline = "0"; from packages/usa-skipnav/src/index.js.

Testing and review

1. Manually tested by activating skipnav links in a local Storybook environment. Confirmed that the target element (e.g., main-content) receives focus and that a visual focus indicator (browser default or USWDS style) is now present and persists until focus is moved again.

2. To reproduce: Navigate to a page with a skipnav component. Activate the skip link (e.g., by tabbing to it and pressing Enter or clicking). Observe that the target element now visibly displays a focus ring.

3. Ran npm run lint and npm run prettier:js and npm test successfully.