fix(svg): add accessible title and desc tags (JhaSourav07#116)

Fixes JhaSourav07#70 
## Summary

Added semantic `<title>` and `<desc>` tags inside generated SVGs to
improve accessibility for screen readers.

## Changes Made

* Added `role="img"` to SVG elements
* Added dynamic `<title>` tags
* Added dynamic `<desc>` tags using contribution stats
* Updated both standard and auto-theme SVG generators

## Pillar

* [ ] 🎨 Pillar 1 — New Theme Design
* [ ] 📐 Pillar 2 — Geometric SVG Improvement
* [ ] 🕐 Pillar 3 — Timezone Logic Optimization
* [x] 🛠️ Other (Bug fix, refactoring, docs)

## Visual Preview

N/A — accessibility-focused update with no visual rendering changes.

## Checklist before requesting a review:

* [x] I have read the `CONTRIBUTING.md` file.
* [ ] I have tested these changes locally
(`localhost:3000/api/streak?user=YOUR_USERNAME`).
* [ ] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
* [x] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
* [ ] I have updated `README.md` if I added a new theme or URL
parameter.
* [x] I have started the repo.
* [x] I have made sure that i have only one commit to merge in this PR.
* [x] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).


## Result

Screen readers can now interpret contribution statistics without
affecting visual rendering.

Author: JhaSourav07

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, '&')
+    .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" />