feat: added accessibility label and title in svg (anuraghazra#1787)

Adrian-Pena · May 26, 2022 · 4e2f631 · 4e2f631
1 parent f5c91cc
commit 4e2f631
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js
@@ -46,7 +46,6 @@ const createTextNode = ({
   `;
 };
 
-
 /**
  * @param {Partial<import('../fetchers/types').StatsData>} stats
  * @param {Partial<import("./types").StatCardOptions>} options
@@ -239,9 +238,26 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
 
   if (disable_animations) card.disableAnimations();
 
+  // Accessibility Labels
+  const labels = Object.keys(STATS)
+    .filter((key) => !hide.includes(key))
+    .map((key) => {
+      if (key === "commits") {
+        return `${i18n.t("statcard.commits")} ${
+          include_all_commits ? "" : `in ${new Date().getFullYear()}`
+        } : ${totalStars}`;
+      }
+      return `${STATS[key].label}: ${STATS[key].value}`;
+    })
+    .join(", ");
+
+  card.setAccessibilityLabel({
+    title: `${card.title}, Rank: ${rank.level}`,
+    desc: labels,
+  });
+
   return card.render(`
     ${rankCircle}
-
     <svg x="0" y="0">
       ${flexLayout({
         items: statItems,

diff --git a/src/common/Card.js b/src/common/Card.js
@@ -42,12 +42,22 @@ class Card {
     this.paddingY = 35;
     this.titlePrefixIcon = titlePrefixIcon;
     this.animations = true;
+    this.a11yTitle = "";
+    this.a11yDesc = "";
   }
 
   disableAnimations() {
     this.animations = false;
   }
 
+  /**
+   * @param {{title: string, desc: string}} prop
+   */
+  setAccessibilityLabel({ title, desc }) {
+    this.a11yTitle = title;
+    this.a11yDesc = desc;
+  }
+
   /**
    * @param {string} value
    */
@@ -148,7 +158,11 @@ class Card {
         viewBox="0 0 ${this.width} ${this.height}"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
+        role="img"
+        aria-labelledby="descId"
       >
+        <title id="titleId">${this.a11yTitle}</title>
+        <desc id="descId">${this.a11yDesc}</desc>
         <style>
           .header {
             font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;

diff --git a/tests/__snapshots__/renderWakatimeCard.test.js.snap b/tests/__snapshots__/renderWakatimeCard.test.js.snap
@@ -8,7 +8,11 @@ exports[`Test Render Wakatime Card should render correctly 1`] = `
         viewBox=\\"0 0 495 150\\"
         fill=\\"none\\"
         xmlns=\\"http://www.w3.org/2000/svg\\"
+        role=\\"img\\"
+        aria-labelledby=\\"descId\\"
       >
+        <title id=\\"titleId\\"></title>
+        <desc id=\\"descId\\"></desc>
         <style>
           .header {
             font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;
@@ -165,7 +169,11 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
         viewBox=\\"0 0 495 115\\"
         fill=\\"none\\"
         xmlns=\\"http://www.w3.org/2000/svg\\"
+        role=\\"img\\"
+        aria-labelledby=\\"descId\\"
       >
+        <title id=\\"titleId\\"></title>
+        <desc id=\\"descId\\"></desc>
         <style>
           .header {
             font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif;