Update a11y-link-in-text-block rule to skip HTML anchors with ID attributes

Co-authored-by: TylerJDev <26746305+TylerJDev@users.noreply.github.com>

Author: Copilot

.changeset/spicy-pans-listen.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": patch
+---
+
+Update a11y-link-in-text-block rule to ignore HTML anchor elements with ID attributes

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

@@ -18,6 +18,7 @@ The lint rule will flag:
 There are certain edge cases that the linter skips to avoid false positives including:
 
 - `<Link className="...">` or `<a className="...">` because there may be distinguishing styles applied.
+- `<a id="...">` because these may have a unique purpose or special behavior.
 - `<Link sx={{fontWeight:...}}>` or `<Link sx={{fontFamily:...}}>` because these technically may provide sufficient distinguishing styling.
 - `<Link>` or `<a>` where the only adjacent text is a period, since that can't really be considered a text block.
 - `<Link>` or `<a>` where the children is a JSX component, rather than a string literal, because then it might be an icon link rather than a text link.

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

@@ -132,6 +132,9 @@ ruleTester.run('a11y-link-in-text-block', rule, {
     `<p>
       <a href="/about" className="custom-link">About us</a>
     </p>`,
+    `<p>
+      <a href="/about" id="about-link">About us</a>
+    </p>`,
     `<div>
       <a href="/contact"><CustomIcon /> Contact</a>
     </div>`,

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

@@ -80,9 +80,10 @@ module.exports = {
           // Skip if anchor is nested inside of a heading
           if (parentsToSkip.includes(parentName)) return
 
-          // Skip if anchor has className (might have distinguishing styles)
+          // Skip if anchor has className or id (might have distinguishing styles or unique purpose)
           const classNameAttribute = getJSXOpeningElementAttribute(node.openingElement, 'className')
-          if (classNameAttribute) return
+          const idAttribute = getJSXOpeningElementAttribute(node.openingElement, 'id')
+          if (classNameAttribute || idAttribute) return
 
           // Check for anchor in text block
           if (isNodeInTextBlock(node)) {