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

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,