🔨 chore(a11y-init.js): add escapeHTML function to sanitize HTML strings

🔨 chore(a11y-init.js): add support for displaying a header for accessibility test results
🔨 chore(a11y-styles.css): add width and word-wrap properties to table cells for better readability
🔨 chore(a11y-styles.css): add background color and text color for different impact levels in the result table
🔨 chore(a11y-tester.php): update plugin version to 1.0.2
🔨 chore(readme.txt): update stable tag to 1.0.2
🔨 chore(readme.txt): add formatting improvements to the result report in the changelog

a11y-init.js

@@ -1,4 +1,10 @@
 window.addEventListener("DOMContentLoaded", function () {
+    function escapeHTML(str) {
+        const div = document.createElement("div");
+        div.appendChild(document.createTextNode(str));
+        return div.innerHTML;
+    }
+
     async function fetchPageContent(url) {
         const response = await fetch(url);
         const text = await response.text();
@@ -32,6 +38,10 @@ window.addEventListener("DOMContentLoaded", function () {
             const container = document.createElement("div");
             container.id = "a11y-results";
 
+            const resHeader = document.createElement("h2");
+            resHeader.textContent = "Accessibility Test Results";
+            container.appendChild(resHeader);
+
             results.violations.forEach((violation) => {
                 const section = document.createElement("div");
                 const button = document.createElement("button");
@@ -58,8 +68,8 @@ window.addEventListener("DOMContentLoaded", function () {
                 violation.nodes.forEach((node) => {
                     const nodeTable = document.createElement("table");
                     nodeTable.innerHTML = `
-                        <tr><th>HTML Element</th><td>${node.html}</td></tr>
-                        <tr><th>Impact</th><td>${node.impact}</td></tr>
+                        <tr><th>HTML Element</th><td><code>${escapeHTML(node.html)}</code></td></tr>
+                        <tr><th>Impact</th><td class="impact-${violation.impact}">${node.impact}</td></tr>
                         <tr><th>Failure Summary</th><td>${node.failureSummary}</td></tr>
                     `;
 

a11y-styles.css

@@ -71,13 +71,18 @@
     padding: 8px;
     text-align: left;
     border: 1px solid #ccc;
+    width: 15%;
+    white-space: normal;
+    word-wrap: break-word;
 }
 
 /* Table Data */
 #a11y-results td {
     padding: 8px;
     text-align: left;
     border: 1px solid #ccc;
+    white-space: normal;
+    word-wrap: break-word;
 }
 
 /* Links */
@@ -111,6 +116,26 @@
     color: white;
 }
 
+#a11y-results tr td.impact-minor {
+    background-color: #ffe082;
+    color: #000;
+}
+
+#a11y-results tr td.impact-moderate {
+    background-color: #90caf9;
+    color: #000;
+}
+
+#a11y-results tr td.impact-serious {
+    background-color: #ef9a9a;
+    color: #000;
+}
+
+#a11y-results tr td.impact-critical {
+    background-color: #d32f2f;
+    color: white;
+}
+
 /* Buttons */
 #run-a11y-test-button,
 #clear-a11y-test-button {

a11y-tester.php

@@ -3,7 +3,7 @@
 /**
  * Plugin Name: A11y Tester
  * Description: A plugin to test accessibility of any page or post.
- * Version: 1.0.1
+ * Version: 1.0.2
  * Author: Joe Peterson
  * Author URI: https://joepeterson.work
  */

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
+Stable tag: 1.0.2
 License: GPLv3 or later
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
 Author: Joe Peterson
@@ -59,6 +59,13 @@ The plugin comes with a predefined set of CSS styles to make the results readabl
 = 1.0 =
 Initial release, no upgrades required.
 
+= 1.0.1 =
+* Added misc security enhancements.
+* Fixed AJAX issues.
+
+= 1.0.2 =
+* Added formatting improvements to the result report.
+
 == License ==
 
 This WordPress Plugin is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License or any later version.
@@ -71,5 +78,12 @@ Contributions, issues, and feature requests are welcome! For support, visit the
 
 == Changelog ==
 
+= 1.0.2 =
+* Added formatting improvements to the result report.
+
+= 1.0.1 =
+* Added misc security enhancements.
+* Fixed AJAX issues.
+
 = 1.0 =
 * Initial release