Repository: ymrl/a11y-visualizer
Pull request #111 (2024-06-06 15:46:37)

:+1: changed WAI-ARIA status message to human-friendly


Patch:
diff --git a/src/content/components/Tip.tsx b/src/content/components/Tip.tsx
index e592667..3a82583 100644
--- a/src/content/components/Tip.tsx
+++ b/src/content/components/Tip.tsx
@@ -103,7 +103,9 @@ export const Tip = ({
       {!hideLabel &&
         (tip.type === "level"
           ? `${t("messages.headingLevel")}${tip.content}`
-          : tip.type === "warning" || tip.type === "error"
+          : tip.type === "warning" ||
+              tip.type === "error" ||
+              tip.type === "ariaStatus"
             ? t(tip.content)
             : tip.content)}
     </div>
diff --git a/src/content/dom/tips/globalTips.ts b/src/content/dom/tips/globalTips.ts
index ef25809..8c8876c 100644
--- a/src/content/dom/tips/globalTips.ts
+++ b/src/content/dom/tips/globalTips.ts
@@ -120,7 +120,10 @@ export const globalTips = (el: Element): ElementTip[] => {
   for (const state of globalAriaStates) {
     const value = el.getAttribute(state);
     if (value) {
-      result.push({ type: "ariaStatus", content: `${state}="${value}"` });
+      result.push({
+        type: "ariaStatus",
+        content: `ariaStatus.${state}.${value}`,
+      });
     }
   }
 
@@ -130,7 +133,7 @@ export const globalTips = (el: Element): ElementTip[] => {
       if (ariaStateValue) {
         result.push({
           type: "ariaStatus",
-          content: `${ariaState}="${ariaStateValue}"`,
+          content: `ariaStatus.${ariaState}.${ariaStateValue}`,
         });
       }
     }
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 3aa1dd8..783100d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -41,6 +41,47 @@
     "warning": "Warning",
     "error": "Error"
   },
+  "ariaStatus": {
+    "aria-busy": {
+      "true": "Refreshing",
+      "false": "No expected updates"
+    },
+    "aria-checked": {
+      "true": "Checked",
+      "false": "Not checked",
+      "mixed": "Mixed",
+      "undefined": "Cannot check"
+    },
+    "aria-current": {
+      "true": "Current item",
+      "page": "Current page",
+      "step": "Current step",
+      "location": "Current location",
+      "date": "Current date",
+      "time": "Current time",
+      "false": "Not current"
+    },
+    "aria-disabled": {
+      "true": "Disabled",
+      "false": "Enabled"
+    },
+    "aria-expanded": {
+      "true": "Expanded",
+      "false": "Collapsed",
+      "undefined": "Not expandable"
+    },
+    "aria-pressed": {
+      "true": "Pressed",
+      "false": "Not pressed",
+      "mixed": "Mixed",
+      "undefined": "Cannot be pressed"
+    },
+    "aria-selected": {
+      "true": "Selected",
+      "false": "Not selected",
+      "undefined": "Cannot be selected"
+    }
+  },
   "messages": {
     "noAltImage": "No alt attribute",
     "emptyAltImage": "Image has alt=\"\"",
diff --git a/src/i18n/ja.json b/src/i18n/ja.json
index 6fe9862..2b9b119 100644
--- a/src/i18n/ja.json
+++ b/src/i18n/ja.json
@@ -41,6 +41,53 @@
     "warning": "警告",
     "error": "エラー"
   },
+  "ariaStatus": {
+    "aria-busy": {
+      "true": "更新中",
+      "false": "更新の予定なし"
+    },
+    "aria-checked": {
+      "true": "チェック中",
+      "false": "未チェック",
+      "mixed": "混在",
+      "undefined": "チェックできない"
+    },
+    "aria-current": {
+      "true": "現在の項目",
+      "page": "現在のページ",
+      "step": "現在のステップ",
+      "location": "現在の場所",
+      "date": "現在の日付",
+      "time": "現在の時刻",
+      "false": "現在の項目ではない"
+    },
+    "aria-disabled": {
+      "true": "無効",
+      "false": "有効"
+    },
+    "aria-expanded": {
+      "true": "展開されている",
+      "false": "折りたたまれている",
+      "undefined": "展開されない"
+    },
+    "aria-invalid": {
+      "grammer": "文法エラー",
+      "false": "エラーなし",
+      "spelling": "スペルエラー",
+      "true": "エラー"
+    },
+    "aria-pressed": {
+      "true": "押されている",
+      "false": "押されていない",
+      "mixed": "混在",
+      "undefined": "押されている状態にできない"
+    },
+    "aria-selected": {
+      "true": "選択中",
+      "false": "未選択",
+      "undefined": "選択できない"
+    }
+  },
   "messages": {
     "noAltImage": "alt属性のない画像",
     "emptyAltImage": "alt=\"\"の画像",


Test patch:
diff --git a/src/content/dom/tips/globalTips.test.ts b/src/content/dom/tips/globalTips.test.ts
index a0ae4b2..8c85112 100644
--- a/src/content/dom/tips/globalTips.test.ts
+++ b/src/content/dom/tips/globalTips.test.ts
@@ -57,7 +57,7 @@ describe("globalTips()", () => {
     const element = document.createElement("div");
     element.setAttribute("aria-busy", "true");
     expect(globalTips(element)).toEqual([
-      { type: "ariaStatus", content: 'aria-busy="true"' },
+      { type: "ariaStatus", content: "ariaStatus.aria-busy.true" },
     ]);
   });
 
@@ -65,7 +65,7 @@ describe("globalTips()", () => {
     const element = document.createElement("div");
     element.setAttribute("aria-current", "page");
     expect(globalTips(element)).toEqual([
-      { type: "ariaStatus", content: 'aria-current="page"' },
+      { type: "ariaStatus", content: "ariaStatus.aria-current.page" },
     ]);
   });
 
@@ -73,7 +73,7 @@ describe("globalTips()", () => {
     const element = document.createElement("button");
     element.setAttribute("aria-disabled", "true");
     expect(globalTips(element)).toEqual([
-      { type: "ariaStatus", content: 'aria-disabled="true"' },
+      { type: "ariaStatus", content: "ariaStatus.aria-disabled.true" },
     ]);
   });