No criteria were added in the configuration.
";
}
configItems.forEach((item, index)_ => {
const num = item.querySelector(".acr-config-num")?.value || "";
const name = item.querySelector(".acr-config-name")?.value || "";
const level = item.querySelector(".acr-config-level")?.value || "";
const status =
item.querySelector(".acr-config-status")?.value || "";
const comments =
item.querySelector(".acr-config-comments")?.value || "";
const dashId = index + 1;
const newDashItem = document.createElement("div");
newDashItem.className = "acr-dynamic-item acr-dash-item";
// Create editable fields for the dashboard
newDashItem.innerHTML = `
`;
dashboardCriteriaList.appendChild(newDashItem);
});
}
// 4. Switch to Dashboard
showTab("acr-tab-dashboard");
});
}
// --- PDF Download Logic ---
if (pdfBtn) {
pdfBtn.addEventListener("click", function () {
// Check for jsPDF and jsPDF-AutoTable
if (
typeof window.jspdf === "undefined" ||
typeof window.jspdf.jsPDF.autoTable === "undefined"
) {
alert(
"Error: PDF libraries (jsPDF, jsPDF-AutoTable) could not be loaded. Please check your internet connection and try again."
);
console.error("jsPDF or jsPDF.autoTable is not defined.");
return;
}
try {
const { jsPDF } = window.jspdf;
const doc = new jsPDF("p", "pt", "a4");
const margin = 40;
let yPos = margin;
// --- 1. Get Data from EDITABLE DASHBOARD ---
const productName =
acrContainer.querySelector("#acr-dash-product-name")?.value || "";
const productVersion =
acrContainer.querySelector("#acr-dash-product-version")?.value || "";
const reportDate =
acrContainer.querySelector("#acr-dash-report-date")?.value || "";
const wcagVersion =
acrContainer.querySelector("#acr-dash-wcag-version")?.value || "";
const claimedLevel =
acrContainer.querySelector("#acr-dash-claimed-level")?.value || "";
// --- 2. Build PDF Header ---
doc.setFontSize(18);
doc.setFont("helvetica", "bold");
doc.text("Accessibility Conformance Report", margin, yPos);
yPos += 25;
doc.setFontSize(12);
doc.setFont("helvetica", "normal");
doc.text(`Product Name: ${productName}`, margin, yPos);
yPos += 20;
doc.text(`Product Version: ${productVersion}`, margin, yPos);
yPos += 20;
doc.text(`Report Date: ${reportDate}`, margin, yPos);
yPos += 20;
doc.text(`Guidelines: ${wcagVersion}`, margin, yPos);
yPos += 20;
doc.text(`Claimed Conformance: ${claimedLevel}`, margin, yPos);
yPos += 30;
// --- 3. Build Table Data ---
const tableHead = [["Criterion", "Level", "Status", "Comments"]];
const tableBody = [];
const dashItems = dashboardCriteriaList.querySelectorAll(
".acr-dash-item"
);
dashItems.forEach((item) => {
const name = item.querySelector(".acr-dash-name")?.value || "";
const level = item.querySelector(".acr-dash-level")?.value || "";
const status = item.querySelector(".acr-dash-status")?.value || "";
const comments =
item.querySelector(".acr-dash-comments")?.value || "";
tableBody.push([name, level, status, comments]);
});
// --- 4. Create Table ---
doc.autoTable({
startY: yPos,
head: tableHead,
body: tableBody,
theme: "striped",
headStyles: {
fillColor: [0, 115, 230], // Blue
textColor: [255, 255, 255], // White
fontSize: 10,
},
bodyStyles: {
fontSize: 9,
},
columnStyles: {
0: { cellWidth: 120 }, // Criterion
1: { cellWidth: 40 }, // Level
2: { cellWidth: 80 }, // Status
3: { cellWidth: "auto" }, // Comments
},
didDrawPage: function (data) {
// Footer (if needed, but spec says no)
},
});
// --- 5. Save PDF ---
doc.save("Accessibility-Conformance-Report.pdf");
} catch (e) {
console.error("Error generating PDF:", e);
alert("An error occurred while generating the PDF.");
}
});
}
// --- Initialization ---
// Set today's date in config
const today = new Date().toISOString().split("T")[0];
const configDate = acrContainer.querySelector("#acr-config-report-date");
if (configDate) configDate.value = today;
// Pre-populate with sample data
addCriterion({
num: "1.1.1",
name: "Non-text Content",
level: "A",
status: "Supports",
comments:
"All informational images have text alternatives (alt text). Decorative images are implemented with null alt attributes.",
});
addCriterion({
num: "1.4.3",
name: "Contrast (Minimum)",
level: "AA",
status: "Partially Supports",
comments:
"Most text meets the 4.5:1 contrast ratio. Some secondary footer text is 3.8:1 and is scheduled for remediation.",
});
// Ensure the default tab is active
showTab("acr-tab-dashboard");
});
