🔧 fix(a11y-init.js): comment out unused table header elements to impr…

…ove code readability

✨ feat(a11y-init.js): add a new div to wrap the violations table and provide a header for the table
✨ feat(a11y-init.js): add a subheader to provide instructions for interacting with the violation details
✨ feat(a11y-styles.css): add transition effect to improve visual experience when expanding/collapsing violation details
✨ feat(a11y-styles.css): update padding for table headers to improve spacing
✨ feat(a11y-styles.css): update padding and text alignment for table data to improve readability
✨ feat(a11y-styles.css): add new styles for the summary container and violations table wrapper to improve layout
✨ feat(a11y-styles.css): align the content to the middle for the summary and violations table
✨ feat(a11y-styles.css): add new styles for links to improve visibility
📝 docs(readme.txt): update stable tag to 1.0.7
📝 docs(readme.txt): add changelog entry for version 1.0.7
✨ feat(readme.txt): add changelog entry for version 1.0.7

a11y-init.js

@@ -47,8 +47,8 @@ function createSummarySection(results) {
     // Create the violations table
     const violationsTable = document.createElement("table");
     violationsTable.id = "violations-table";
-    const tableHeader = document.createElement("thead");
-    const tableHeaderRow = document.createElement("tr");
+    // const tableHeader = document.createElement("thead");
+    // const tableHeaderRow = document.createElement("tr");
 
     // Create the table header
     // ["Severity", "Count"].forEach((headerText) => {
@@ -77,9 +77,16 @@ function createSummarySection(results) {
 
     violationsTable.appendChild(tableBody);
 
+    const violationsDiv = document.createElement("div");
+    violationsDiv.id = "a11y-violations-table-wrapper";
+    const violationsHeader = document.createElement("h3");
+    violationsHeader.textContent = "Violations Summary";
+    violationsDiv.appendChild(violationsHeader);
+    violationsDiv.appendChild(violationsTable);
+
     // Append the summary and table to the main flex container
     flexContainer.appendChild(summaryDiv);
-    flexContainer.appendChild(violationsTable);
+    flexContainer.appendChild(violationsDiv);
 
     return flexContainer;
 }
@@ -123,6 +130,14 @@ function appendViolationSections(container, violations) {
         button.className = `collapsible impact-${violation.impact}`;
         content.className = "a11y-content";
 
+        const caretSpan = document.createElement("span");
+        caretSpan.className = "dashicons dashicons-arrow-down";
+        caretSpan.setAttribute("aria-hidden", "true");
+
+        button.innerHTML = `${violation.id} - ${violation.impact} `;
+        button.className = `collapsible impact-${violation.impact}`;
+
+        button.appendChild(caretSpan);
         section.appendChild(button);
         section.appendChild(content);
 
@@ -235,9 +250,12 @@ async function runA11yTests(event) {
                 const summarySection = createSummarySection(results);
                 container.appendChild(summarySection);
 
-                const resHeader = document.createElement("h2");
-                resHeader.textContent = "Accessibility Test Results";
+                const resHeader = document.createElement("h3");
+                resHeader.textContent = "Violation Details";
                 container.appendChild(resHeader);
+                const resSubHeader = document.createElement("p");
+                resSubHeader.textContent = "Click on a violation to see more details.";
+                container.appendChild(resSubHeader);
 
                 appendViolationSections(container, results.violations);
 
@@ -294,6 +312,14 @@ window.addEventListener("DOMContentLoaded", () => {
 window.addEventListener("click", (e) => {
     if (e.target && e.target.classList.contains("collapsible")) {
         const content = e.target.nextElementSibling;
-        content.style.display = content.style.display === "block" ? "none" : "block";
+        const caret = e.target.querySelector(".dashicons");
+
+        if (content.style.display === "block") {
+            content.style.display = "none";
+            if (caret) caret.className = "dashicons dashicons-arrow-down";
+        } else {
+            content.style.display = "block";
+            if (caret) caret.className = "dashicons dashicons-arrow-up";
+        }
     }
 });

a11y-styles.css

@@ -43,6 +43,7 @@
     padding: 10px;
     border-radius: var(--border-radius);
     box-sizing: border-box;
+    transition: all 0.3s ease-in-out;
 }
 
 /* Container for each violation section */
@@ -104,7 +105,7 @@
 /* Table Headers */
 #a11y-results th {
     background-color: var(--table-header-bg);
-    padding: 8px;
+    padding: 2px;
     text-align: left;
     border: 1px solid var(--table-border);
     width: 15%;
@@ -114,13 +115,32 @@
 
 /* Table Data */
 #a11y-results td {
-    padding: 8px;
-    text-align: left;
+    padding: 2px 10px;
+    text-align: center;
     border: 1px solid var(--table-border);
     white-space: normal;
     word-wrap: break-word;
 }
 
+#a11y-summary-container {
+    display: flex;
+    align-items: flex-start; /* Aligns headers at the top */
+}
+
+#a11y-summary,
+#a11y-violations-table-wrapper {
+    flex: 1; /* Makes both divs take equal width */
+    display: flex;
+    flex-direction: column;
+}
+
+/* Align the content to the middle for both divs */
+#a11y-summary ul,
+#a11y-violations-table-wrapper table {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
 /* Links */
 #a11y-results a {
     color: #1a73e8;

readme.txt

@@ -4,7 +4,7 @@ Tags: accessibility, a11y, testing, axe-core
 Requires at least: 4.7
 Tested up to: 5.9
 Requires PHP: 7.0
-Stable tag: 1.0.6
+Stable tag: 1.0.7
 License: GPLv3 or later
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
 Author: Joe Peterson
@@ -89,6 +89,8 @@ Initial release, no upgrades required.
 * Implemented iframe scoping to securely run accessibility tests.
 * Enhanced performance and security by refactoring the iframe generation and execution code.
 
+= 1.0.7 = 
+* Improved results look & feel
 
 == License ==
 
@@ -102,6 +104,9 @@ Contributions, issues, and feature requests are welcome! For support, visit the
 
 == Changelog ==
 
+= 1.0.7 = 
+* Improved results look & feel
+
 = 1.0.6 =
 * Implemented iframe scoping to securely run accessibility tests.
 * Enhanced performance and security by refactoring the iframe generation and execution code.