Add id field to AccessibilityError and interpolate URLs (#199)

* Initial plan

* Add id field to AccessibilityError interface and all rules

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

* Interpolate URLs and remove query parameters from all rules and tests

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

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: koddsson <[email protected]>

Author: Copilot

src/rules/accesskeys.ts

@@ -1,8 +1,8 @@
 import { AccessibilityError } from "../scanner";
 
+const id = "accesskeys";
 const text = "Ensures every accesskey attribute value is unique";
-const url =
-  "https://dequeuniversity.com/rules/axe/4.4/accesskeys?application=RuleDescription";
+const url = `https://dequeuniversity.com/rules/axe/4.4/${id}`;
 
 export default function (element: Element): AccessibilityError[] {
   const errors: AccessibilityError[] = [];
@@ -33,6 +33,7 @@ export default function (element: Element): AccessibilityError[] {
     if (elementsWithKey.length > 1) {
       for (const el of elementsWithKey) {
         errors.push({
+          id,
           element: el,
           text,
           url,

src/rules/area-alt.ts

@@ -1,9 +1,9 @@
 import { AccessibilityError } from "../scanner";
 import { querySelectorAll, labelledByIsValid } from "../utils";
 
+const id = "area-alt";
 const text = "Elements must only use allowed ARIA attributes";
-const url =
-  "https://dequeuniversity.com/rules/axe/4.4/area-alt?application=RuleDescription";
+const url = `https://dequeuniversity.com/rules/axe/4.4/${id}`;
 
 export function areaAlt(element_: Element): AccessibilityError[] {
   const errors = [];
@@ -13,6 +13,7 @@ export function areaAlt(element_: Element): AccessibilityError[] {
     if (element.getAttribute("aria-label")) continue;
     if (labelledByIsValid(element)) continue;
     errors.push({
+      id,
       element,
       text,
       url,

src/rules/aria-allowed-attr.ts

@@ -1,9 +1,9 @@
 import { querySelectorAll } from "../utils";
 import { AccessibilityError } from "../scanner";
 
+const id = "aria-allowed-attr";
 const text = "Elements must only use allowed ARIA attributes";
-const url =
-  "https://dequeuniversity.com/rules/axe/4.4/aria-allowed-attr?application=RuleDescription";
+const url = `https://dequeuniversity.com/rules/axe/4.4/${id}`;
 
 // TODO: Fill out the rest of the mappings from https://www.w3.org/TR/html-aria/#docconformance
 const ariaMappings: Record<string, string | undefined> = {
@@ -18,6 +18,7 @@ export function ariaAllowedAttr(element_: Element): AccessibilityError[] {
     if (element.getAttribute("role") === ariaMappings[element.tagName])
       continue;
     errors.push({
+      id,
       element,
       text,
       url,

src/rules/aria-command-name.ts

@@ -1,8 +1,9 @@
 import { AccessibilityError } from "../scanner";
 import { querySelectorAll, hasAccessibleText } from "../utils";
 
+const id = "aria-command-name";
 const text = "ARIA button, link, and menuitem must have an accessible name";
-const url = "https://dequeuniversity.com/rules/axe/4.4/aria-command-name";
+const url = `https://dequeuniversity.com/rules/axe/4.4/${id}`;
 
 /*
 <div role="link" id="al" aria-label="Name"></div>
@@ -27,7 +28,7 @@ export default function (el: Element): AccessibilityError[] {
 
   for (const element of elements) {
     if (hasAccessibleText(element)) continue;
-    errors.push({ element, text, url });
+    errors.push({ id, element, text, url });
   }
   return errors;
 }

src/rules/aria-dialog-name.ts

@@ -4,7 +4,7 @@ import { labelledByIsValid, querySelectorAll } from "../utils";
 // Metadata
 const id = "aria-dialog-name";
 const text = "ARIA dialog and alertdialog nodes must have an accessible name";
-const url = `https://dequeuniversity.com/rules/axe/4.4/${id}?application=RuleDescription`;
+const url = `https://dequeuniversity.com/rules/axe/4.4/${id}`;
 
 /**
  * Check if an element has an accessible name via aria-label, aria-labelledby, or title
@@ -43,6 +43,7 @@ export default function (element: Element): AccessibilityError[] {
   for (const el of elements) {
     if (!hasAccessibleName(el)) {
       errors.push({
+        id,
         element: el,
         url,
         text,

src/rules/aria-hidden-body.ts

@@ -1,14 +1,15 @@
 import { AccessibilityError } from "../scanner";
 
+const id = "aria-hidden-body";
 const text = 'aria-hidden="true" must not be present on the document <body>';
-const url =
-  "https://dequeuniversity.com/rules/axe/4.4/aria-hidden-body?application=RuleDescription";
+const url = `https://dequeuniversity.com/rules/axe/4.4/${id}`;
 
 export function ariaHiddenBody(element_: Element): AccessibilityError[] {
   const element = element_.ownerDocument.body;
   if (element.getAttribute("aria-hidden") === "true") {
     return [
       {
+        id,
         element,
         text,
         url,

src/rules/aria-hidden-focus.ts

@@ -1,8 +1,9 @@
 import { AccessibilityError } from "../scanner";
 import { querySelectorAll, isVisible } from "../utils";
 
+const id = "aria-hidden-focus";
 const text = "aria-hidden elements do not contain focusable elements";
-const url = "https://dequeuniversity.com/rules/axe/4.4/aria-hidden-focus";
+const url = `https://dequeuniversity.com/rules/axe/4.4/${id}`;
 
 const focusableSelector = [
   "a[href]",
@@ -94,6 +95,7 @@ export default function ariaHiddenFocus(
 
     if (hasOffendingFocusable) {
       errors.push({
+        id,
         element: hiddenElement,
         text,
         url,

src/rules/aria-input-field-name.ts

@@ -4,7 +4,7 @@ import { labelledByIsValid, querySelectorAll } from "../utils";
 // Metadata
 const id = "aria-input-field-name";
 const text = "ARIA input fields must have an accessible name";
-const url = `https://dequeuniversity.com/rules/axe/4.4/${id}?application=RuleDescription`;
+const url = `https://dequeuniversity.com/rules/axe/4.4/${id}`;
 
 // ARIA roles that are considered input fields
 const inputFieldRoles = [
@@ -54,6 +54,7 @@ export default function (element: Element): AccessibilityError[] {
   for (const el of elements) {
     if (!hasAccessibleName(el)) {
       errors.push({
+        id,
         element: el,
         url,
         text,

src/rules/aria-meter-name.ts

@@ -4,7 +4,7 @@ import { labelledByIsValid, querySelectorAll } from "../utils";
 // Metadata
 const id = "aria-meter-name";
 const text = "ARIA meter must have an accessible name";
-const url = `https://dequeuniversity.com/rules/axe/4.4/${id}?application=RuleDescription`;
+const url = `https://dequeuniversity.com/rules/axe/4.4/${id}`;
 
 /**
  * Check if an element has an accessible name via aria-label, aria-labelledby, or title
@@ -43,6 +43,7 @@ export default function (element: Element): AccessibilityError[] {
   for (const el of elements) {
     if (!hasAccessibleName(el)) {
       errors.push({
+        id,
         element: el,
         url,
         text,

src/rules/aria-progressbar-name.ts

@@ -4,7 +4,7 @@ import { labelledByIsValid, querySelectorAll } from "../utils";
 // Metadata
 const id = "aria-progressbar-name";
 const text = "ARIA progressbar must have an accessible name";
-const url = `https://dequeuniversity.com/rules/axe/4.4/${id}?application=RuleDescription`;
+const url = `https://dequeuniversity.com/rules/axe/4.4/${id}`;
 
 /**
  * Check if an element has an accessible name via aria-label, aria-labelledby, or title
@@ -43,6 +43,7 @@ export default function (element: Element): AccessibilityError[] {
   for (const el of elements) {
     if (!hasAccessibleName(el)) {
       errors.push({
+        id,
         element: el,
         url,
         text,