Revert "Remove svg-skip rule"

This reverts commit b6b0160.

apps/browser_extension/src/i18n/en.json

@@ -112,6 +112,7 @@
   "No name attribute": "No name attribute",
   "Ungrouped radio button": "Ungrouped radio button",
   "Unknown role": "Unknown role",
+  "May be skipped": "May be skipped",
   "Small target": "Small target",
   "Heading level": "Heading level",
   "Page language": "Page language",

apps/browser_extension/src/i18n/ja.json

@@ -112,6 +112,7 @@
   "No name attribute": "name属性なし",
   "Ungrouped radio button": "グループ化されていないラジオボタン",
   "Unknown role": "不明なロール",
+  "May be skipped": "読み飛ばされる可能性あり",
   "Small target": "ターゲットが小さい",
   "Heading level": "見出しレベル",
   "Page language": "ページの言語",

apps/browser_extension/src/i18n/ko.json

@@ -112,6 +112,7 @@
   "No name attribute": "name 속성 없음",
   "Ungrouped radio button": "라디오 버튼 그룹 없음",
   "Unknown role": "Unknown role",
+  "May be skipped": "May be skipped",
   "Small target": "Small target",
   "Heading level": "헤딩 레벨",
   "Page language": "Page language",

apps/browser_extension/src/rules/Rules.ts

@@ -26,6 +26,7 @@ import { PageLang } from "./page-lang";
 import { PageTitle } from "./page-title";
 import { RadioGroup } from "./radio-group";
 import { Role } from "./role";
+import { SvgSkip } from "./svg-skip";
 import { TableHeader } from "./table-header";
 import { TablePosition } from "./table-position";
 import { TableSize } from "./table-size";
@@ -53,6 +54,7 @@ export const Rules = [
   PageTitle,
   PageLang,
   RadioGroup,
+  SvgSkip,
   TableHeader,
   TablePosition,
   TableSize,

apps/browser_extension/src/rules/svg-skip/index.test.ts

@@ -0,0 +1,64 @@
+import { describe, test, expect, afterEach } from "vitest";
+import { SvgSkip } from ".";
+
+describe("svg-skip", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+  test('svg with role="img"', () => {
+    const element = document.createElement("svg");
+    element.innerHTML = "<title>title</title>";
+    element.setAttribute("role", "img");
+    document.body.appendChild(element);
+    const result = SvgSkip.evaluate(element, { enabled: true }, {});
+    expect(result).toBeUndefined();
+  });
+
+  test("svg without role but with title", () => {
+    const element = document.createElement("svg");
+    element.innerHTML = "<title>title</title>";
+    document.body.appendChild(element);
+    const result = SvgSkip.evaluate(element, { enabled: true }, {});
+    expect(result).toBeUndefined();
+  });
+
+  test("svg without role and without title", () => {
+    const element = document.createElement("svg");
+    document.body.appendChild(element);
+    const result = SvgSkip.evaluate(element, { enabled: true }, {});
+    expect(result).toEqual([
+      {
+        type: "warning",
+        ruleName: "svg-skip",
+        message: "May be skipped",
+      },
+    ]);
+  });
+
+  test('svg with role="presentation"', () => {
+    const element = document.createElement("svg");
+    element.innerHTML = "<title>title</title>";
+    element.setAttribute("role", "presentation");
+    document.body.appendChild(element);
+    const result = SvgSkip.evaluate(element, { enabled: true }, {});
+    expect(result).toBeUndefined();
+  });
+
+  test('svg with aria-hidden="true"', () => {
+    const element = document.createElement("svg");
+    element.setAttribute("aria-hidden", "true");
+    document.body.appendChild(element);
+    const result = SvgSkip.evaluate(element, { enabled: true }, {});
+    expect(result).toBeUndefined();
+  });
+
+  test("svg is presentational children", () => {
+    const element = document.createElement("svg");
+    element.innerHTML = "<title>title</title>";
+    const button = document.createElement("button");
+    button.appendChild(element);
+    document.body.appendChild(button);
+    const result = SvgSkip.evaluate(element, { enabled: true }, {});
+    expect(result).toBeUndefined();
+  });
+});

apps/browser_extension/src/rules/svg-skip/index.ts

@@ -0,0 +1,43 @@
+import { RuleObject } from "../type";
+import { isPresentationalChildren } from "../../dom/isPresentationalChildren";
+
+type Options = {
+  enabled: boolean;
+};
+type Condition = { role?: string | null };
+const ruleName = "svg-skip";
+const defaultOptions: Options = {
+  enabled: true,
+};
+
+export const SvgSkip: RuleObject<Options, Condition> = {
+  ruleName,
+  defaultOptions,
+  tagNames: ["svg"],
+  evaluate: (element: Element, { enabled }: Options = defaultOptions) => {
+    if (!enabled) {
+      return undefined;
+    }
+    const tagName = element.tagName.toLowerCase();
+
+    // Check if SVG has title element for accessible name
+    const hasTitle = element.querySelector("title");
+
+    if (
+      tagName === "svg" &&
+      element.getAttribute("aria-hidden") !== "true" &&
+      !element.hasAttribute("role") &&
+      !hasTitle &&
+      !isPresentationalChildren(element)
+    ) {
+      return [
+        {
+          type: "warning",
+          message: "May be skipped",
+          ruleName: ruleName,
+        },
+      ];
+    }
+    return undefined;
+  },
+};