Skip to content

chore: fix UnderlineWrapper html structure #7097

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 3 commits into from
Oct 30, 2025
Merged

chore: fix UnderlineWrapper html structure #7097

merged 3 commits into from
Oct 30, 2025

Conversation

@francinelucca
Copy link
Member

@francinelucca francinelucca commented Oct 29, 2025 •
edited
Loading

Looks like UnderlineWrapper went from being a "div" to a "nav" in https://github.com/primer/react/pull/6874/files, reverting back to "div".

Changelog

New

  • document 'as' prop

Changed

  • UnderlineWrapper defaults to div instead of nav

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

@francinelucca francinelucca requested a review from a team as a code owner October 29, 2025 17:15
@changeset-bot
Copy link

changeset-bot bot commented Oct 29, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: dc0f77e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@primer/react Patch
@primer/styled-react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Oct 29, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Oct 29, 2025

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

Copilot AI reviewed Oct 29, 2025
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR changes the default element type for UnderlineWrapper from 'nav' to 'div'. The UnderlineWrapper is a shared internal component used by both UnderlineNav and UnderlinePanels components.

Key Changes

  • Changed the default as prop value in UnderlineWrapper from 'nav' to 'div'

packages/react/src/internal/components/UnderlineTabbedInterface.tsx

export const UnderlineWrapper = forwardRef((props, ref) => {
const {children, className, as: Component = 'nav', ...rest} = props
const {children, className, as: Component = 'div', ...rest} = props
Copy link

Copilot AI Oct 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changing the default element from 'nav' to 'div' is a breaking change that affects semantic HTML structure. The UnderlineNav component relies on this default to render as a

element, which is critical for accessibility. The test at line 67 in UnderlineNav.test.tsx expects a element, and tests at lines 68, 74, and 125 use getByRole('navigation') which will fail with this change. UnderlineNav explicitly passes as='nav' (line 144 in UnderlineNav.tsx), so this change should not break functionality, but the change removes semantic meaning from UnderlinePanels which doesn't pass an 'as' prop. Consider if this is intentional or if the default should remain 'nav' with UnderlinePanels explicitly passing as='div' if needed.

Suggested change
const {children, className, as: Component = 'div', ...rest} = props
const {children, className, as: Component = 'nav', ...rest} = props

Copilot uses AI. Check for mistakes.
@github-actions github-actions bot temporarily deployed to storybook-preview-7097 October 29, 2025 17:24 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-7097 October 29, 2025 17:40 Inactive
@primer-integration
Copy link

primer-integration bot commented Oct 29, 2025

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/5896

@github-actions github-actions bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Oct 29, 2025
@francinelucca francinelucca added this pull request to the merge queue Oct 30, 2025
Merged via the queue into main with commit 12fad7a Oct 30, 2025
43 checks passed
@francinelucca francinelucca deleted the chore/fix-underline-wrapper-html-structure branch October 30, 2025 02:08
@primer primer bot mentioned this pull request Oct 29, 2025
Merged
@primer-integration
Copy link

primer-integration bot commented Oct 30, 2025

🟢 ci completed with status success.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@pksjce pksjce pksjce approved these changes

@TylerJDev TylerJDev TylerJDev approved these changes

@jonrohan jonrohan Awaiting requested review from jonrohan jonrohan is a code owner automatically assigned from primer/engineer-reviewers

Assignees

No one assigned

Labels

integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh staff Author is a staff member

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@francinelucca @pksjce @TylerJDev