Make Button/LinkButton 'link' variant respect user underline preference

[mperrotti]

Closes https://github.com/github/primer/issues/5948

Demo

Before

After

Changelog

New

Changed

• <Button variant="link"> and <LinkButton variant="link"> will always show an underline if the user has the a11y underlines preference on

Removed

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

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 23090f2

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]

Uh oh! @mperrotti, at least one image you shared is missing helpful alt text. Check your pull request body to fix the following violations:

• Images should have meaningful alternative text (alt text) at line 9
• Images should have meaningful alternative text (alt text) at line 13

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[github-actions]

👋 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]

Pull Request Overview

This PR adds support for accessibility link underline preferences to the Button component's link variant. The changes allow link-styled buttons to respect a data-a11y-link-underlines attribute for showing or hiding underlines.

• Adds CSS rules to control underlines on link variant buttons based on data-a11y-link-underlines attribute
• Creates a new dev story to demonstrate the underline preference functionality
• Updates e2e tests to include the new story for visual regression testing

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
packages/react/src/Button/ButtonBase.module.css	Adds CSS rules for link variant underline control based on accessibility preference, including special handling for buttons with visual icons
packages/react/src/Button/Button.dev.stories.tsx	Adds dev story demonstrating link variant with underline preference enabled/disabled
packages/react/.storybook/preview.jsx	Updates decorator logic to exclude new story from default underline behavior
e2e/components/Button.test.ts	Registers new story for e2e testing

[Copilot]

Incorrect logical operator: using || (OR) makes the condition always true. This should be && (AND) to exclude both stories from the default underline behavior. With OR, any context.id will satisfy at least one condition.

Suggested change

	context.id !== 'components-link-dev--inline' ||
	context.id !== 'components-link-dev--inline' &&

[mperrotti]

I don't think this is accurate...

Human reviewers - what do you think?

[mperrotti]

Had to update Banner VRT snapshots because Banner uses <Button variant="link">