Added accessibility for charts (#11801)

* Added accessibility for charts and graphts

* Tiny adjustments

* Function description fix

* Improved labeling for critical products metrics section

* Added missing aria-labelledby

* More required labels added

dojo/static/dojo/js/metrics.js

@@ -738,6 +738,75 @@ function accepted_per_week_2(critical, high, medium, low) {
         options);
 }
 
+
+// This function is valid besides metrics.html also for the dashboard-metrics.html, 
+// dashboard.html, and product-metrics.html
+function updatePunchcardTable(punchcardData, ticks) {
+    let tableBody = $("#punchcard-table tbody");
+
+    const daysMap = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+    let formattedData = {};
+
+    // No table processing in case of no data
+    if (punchcardData.length === 0 || ticks.length === 0) return; 
+
+    // Removing html elements from the ticks dates
+    let ticksMap = {};
+    ticks.forEach(entry => {
+        let weekIndex = String(entry[0]);
+        let rawHtml = entry[1]; 
+
+        // Goodbye <span> + space instead of <br/> 
+        let cleanDate = rawHtml.replace(/<\/?span[^>]*>/g, "").replace(/<br\s*\/?>/g, " ");
+        cleanDate = cleanDate.trim();
+        ticksMap[weekIndex] = cleanDate;
+    });
+
+    let minWeekOffset = ticks[0][0]; 
+    let maxWeekOffset = ticks[ticks.length - 1][0]; 
+
+    for (let weekOffset = minWeekOffset; weekOffset <= maxWeekOffset; weekOffset++) {
+        let formattedDate = ticksMap[String(weekOffset)] || "Unknown Date";
+        let formattedWeek = `Week ${weekOffset - minWeekOffset + 1}, starting on ${formattedDate}`;
+
+        formattedData[formattedWeek] = {
+            "Monday": 0, "Tuesday": 0, "Wednesday": 0,
+            "Thursday": 0, "Friday": 0, "Saturday": 0, "Sunday": 0
+        };
+    }
+
+    // Populating week data
+    punchcardData.forEach(entry => {
+        let weekOffset = entry[0]; 
+        let day = daysMap[entry[1]];
+        let value = entry[3] || 0;
+
+        let formattedDate = ticksMap[String(weekOffset)] || "Unknown Date";
+        let formattedWeek = `Week ${weekOffset - minWeekOffset + 1}, starting on ${formattedDate}`;
+
+        if (formattedData[formattedWeek]) {
+            formattedData[formattedWeek][day] = value;
+        }
+    });
+
+    // Rendering accessibility table body
+    Object.entries(formattedData).forEach(([week, values]) => {
+        let newRow = `
+            <tr>
+                <td scope="row">${week}</td>
+                <td>${values.Monday || '0'}</td>
+                <td>${values.Tuesday || '0'}</td>
+                <td>${values.Wednesday || '0'}</td>
+                <td>${values.Thursday || '0'}</td>
+                <td>${values.Friday || '0'}</td>
+                <td>${values.Saturday || '0'}</td>
+                <td>${values.Sunday || '0'}</td>
+            </tr>
+        `;
+        tableBody.append(newRow);
+    });
+}
+
 /*
         product_metrics.html
 */