Update a11y-link-in-text-block rule to include HTML anchor elements #345

Copilot · 2025-05-19T18:41:19Z

This PR adds support for detecting HTML anchor elements (<a>) in text blocks to the existing a11y-link-in-text-block rule. The rule now recommends converting HTML anchors to Link components from @primer/react for consistent styling and accessibility.

Changes

Enhanced the rule to detect HTML anchor elements within text blocks
Added autofix functionality to automatically replace HTML anchors with Link components
Updated documentation to include information about the new HTML anchor check
Added tests to verify the HTML anchor detection and autofix functionality

Examples

Before (Flagged by this rule):

<p>Please <a href="https://github.com">visit our site</a> for more information.</p>

After autofix:

<p>Please <Link href="https://github.com">visit our site</Link> for more information.</p>

Similar to the existing check for Link components, the rule skips certain cases to avoid false positives:

Anchor elements with a className attribute
Anchor elements with JSX element children
Anchor elements in headings
Anchor elements where the only adjacent text is a period

Fixes #344.

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

changeset-bot · 2025-05-19T18:41:23Z

🦋 Changeset detected

Latest commit: cb31a75

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

This PR includes changesets to release 1 package

Name	Type
eslint-plugin-primer-react	Minor

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

Co-authored-by: TylerJDev <[email protected]>

TylerJDev · 2025-05-23T14:31:06Z

@copilot, can we ignore HTML anchor elements that have className, or an ID? There might be unique cases where a <Link> doesn't need to be utilized, so we should only focus on anchor elements with minimal attributes added.

Copilot · 2025-05-23T14:35:34Z

@copilot, can we ignore HTML anchor elements that have className, or an ID? There might be unique cases where a <Link> doesn't need to be utilized, so we should only focus on anchor elements wit...

I've updated the rule to ignore HTML anchor elements with id attributes in addition to those with className. The changes have been implemented in commit 873d8c1, which includes:

Updated logic in the rule to check for and skip anchors with ID attributes
Added a test case to verify the behavior
Updated the rule documentation to mention this exception

This follows the same pattern as the existing skip for anchors with className, since both may have special styling or behavior that differentiates them from regular text.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

cdn.fwupd.org
- Triggering command: /usr/bin/fwupdmgr refresh (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to my firewall allow list

Copilot

Pull Request Overview

This PR extends the existing a11y-link-in-text-block ESLint rule to also detect plain HTML <a> elements in text blocks, auto-fix them to use Primer’s Link component, and document/tests these changes.

Added isHTMLElement check, detection logic, and autofix for HTML anchors in text blocks
Expanded tests to cover valid/invalid HTML anchor scenarios
Updated rule documentation to describe new anchor conversion behavior

Reviewed Changes

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

File	Description
src/rules/a11y-link-in-text-block.js	Added HTML anchor detection in text blocks, autofix to `Link`
src/rules/tests/a11y-link-in-text-block.test.js	Added valid/invalid cases for HTML `<a>` conversion
docs/rules/a11y-link-in-text-block.md	Updated documentation and examples for HTML anchor conversion
.changeset/odd-pumas-care.md	Bumped version and noted HTML anchor detection feature

Copilot · 2025-05-23T14:46:40Z

src/rules/a11y-link-in-text-block.js

+      })
+
+      const index = siblings.findIndex(childNode => {
+        return childNode.range === node.range


Comparing arrays with === always returns false; use object identity (e.g., childNode === node) or compare numeric range values instead to correctly find the node’s index.

Suggested change

return childNode.range === node.range

return (

childNode.range[0] === node.range[0] &&

childNode.range[1] === node.range[1]

)

Copilot · 2025-05-23T14:46:41Z

src/rules/a11y-link-in-text-block.js

+                const attributes = node.openingElement.attributes.map(attr => sourceCode.getText(attr)).join(' ')
+
+                // Create the Link component opening and closing tags
+                const openingTag = `<Link ${attributes}>`


When converting HTML anchors to Link, the rule should add the inline prop for consistency with the linkInTextBlock rule; include inline in the opening tag (e.g., <Link inline ${attributes}>).

Suggested change

const openingTag = `<Link ${attributes}>`

const openingTag = `<Link inline ${attributes}>`

Copilot · 2025-05-23T14:46:41Z

docs/rules/a11y-link-in-text-block.md


 There are certain edge cases that the linter skips to avoid false positives including:

- `<Link className="...">` because there may be distinguishing styles applied.
+- `<Link className="...">` or `<a className="...">` because there may be distinguishing styles applied.


Documentation should also mention that <a> elements with an id attribute are skipped by the rule, since the code filters on id similarly to className.

Suggested change

- `<Link className="...">` or `<a className="...">` because there may be distinguishing styles applied.

- `<Link className="...">`, `<a className="...">`, or `<a id="...">` because there may be distinguishing styles or behaviors applied.

Initial plan for issue

f46c671

Copilot AI assigned Copilot and TylerJDev May 19, 2025

Implement HTML anchor elements check in a11y-link-in-text-block rule

67629e9

Co-authored-by: TylerJDev <[email protected]>

Copilot AI changed the title ~~[WIP] Update a11y-link-in-text-block rule to include HTML anchor elements~~ Update a11y-link-in-text-block rule to include HTML anchor elements May 19, 2025

Copilot AI requested a review from TylerJDev May 19, 2025 18:51

TylerJDev mentioned this pull request May 20, 2025

Link underline rule should run on <a href> #341

Open

TylerJDev added 2 commits May 23, 2025 10:24

Format

21c4540

Add changeset

a4ad769

TylerJDev force-pushed the copilot/fix-344 branch from 873d8c1 to a4ad769 Compare May 23, 2025 14:37

Add check for ID(s)

cb31a75

TylerJDev marked this pull request as ready for review May 23, 2025 14:44

Copilot AI review requested due to automatic review settings May 23, 2025 14:44

TylerJDev requested a review from a team as a code owner May 23, 2025 14:44

Copilot AI reviewed May 23, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update a11y-link-in-text-block rule to include HTML anchor elements #345

Update a11y-link-in-text-block rule to include HTML anchor elements #345

Uh oh!

Copilot AI commented May 19, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented May 19, 2025 •

edited

Loading

Uh oh!

TylerJDev commented May 23, 2025

Uh oh!

Copilot AI commented May 23, 2025 •

edited

Loading

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI May 23, 2025

Uh oh!

Copilot AI May 23, 2025

Uh oh!

Copilot AI May 23, 2025

Uh oh!

Uh oh!

-        return childNode.range === node.range
+        return (
+          childNode.range[0] === node.range[0] &&
+          childNode.range[1] === node.range[1]
+        )

	const openingTag = `<Link ${attributes}>`
	const openingTag = `<Link inline ${attributes}>`

	- `<Link className="...">` or `<a className="...">` because there may be distinguishing styles applied.
	- `<Link className="...">`, `<a className="...">`, or `<a id="...">` because there may be distinguishing styles or behaviors applied.

Update a11y-link-in-text-block rule to include HTML anchor elements #345

Are you sure you want to change the base?

Update a11y-link-in-text-block rule to include HTML anchor elements #345

Uh oh!

Conversation

Copilot AI commented May 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Examples

Uh oh!

changeset-bot bot commented May 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

TylerJDev commented May 23, 2025

Uh oh!

Copilot AI commented May 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI May 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 23, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI May 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI commented May 19, 2025 •

edited

Loading

changeset-bot bot commented May 19, 2025 •

edited

Loading

Copilot AI commented May 23, 2025 •

edited

Loading