From 6c02e50943d5ed24f6f31ee91b46551b4986d996 Mon Sep 17 00:00:00 2001 From: "skllzrmy.tez" Date: Wed, 25 Oct 2023 15:32:35 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix(a11y-init.js):=20comment=20o?= =?UTF-8?q?ut=20unused=20table=20header=20elements=20to=20improve=20code?= =?UTF-8?q?=20readability=20=E2=9C=A8=20feat(a11y-init.js):=20add=20a=20ne?= =?UTF-8?q?w=20div=20to=20wrap=20the=20violations=20table=20and=20provide?= =?UTF-8?q?=20a=20header=20for=20the=20table=20=E2=9C=A8=20feat(a11y-init.?= =?UTF-8?q?js):=20add=20a=20subheader=20to=20provide=20instructions=20for?= =?UTF-8?q?=20interacting=20with=20the=20violation=20details=20=E2=9C=A8?= =?UTF-8?q?=20feat(a11y-styles.css):=20add=20transition=20effect=20to=20im?= =?UTF-8?q?prove=20visual=20experience=20when=20expanding/collapsing=20vio?= =?UTF-8?q?lation=20details=20=E2=9C=A8=20feat(a11y-styles.css):=20update?= =?UTF-8?q?=20padding=20for=20table=20headers=20to=20improve=20spacing=20?= =?UTF-8?q?=E2=9C=A8=20feat(a11y-styles.css):=20update=20padding=20and=20t?= =?UTF-8?q?ext=20alignment=20for=20table=20data=20to=20improve=20readabili?= =?UTF-8?q?ty=20=E2=9C=A8=20feat(a11y-styles.css):=20add=20new=20styles=20?= =?UTF-8?q?for=20the=20summary=20container=20and=20violations=20table=20wr?= =?UTF-8?q?apper=20to=20improve=20layout=20=E2=9C=A8=20feat(a11y-styles.cs?= =?UTF-8?q?s):=20align=20the=20content=20to=20the=20middle=20for=20the=20s?= =?UTF-8?q?ummary=20and=20violations=20table=20=E2=9C=A8=20feat(a11y-style?= =?UTF-8?q?s.css):=20add=20new=20styles=20for=20links=20to=20improve=20vis?= =?UTF-8?q?ibility=20=F0=9F=93=9D=20docs(readme.txt):=20update=20stable=20?= =?UTF-8?q?tag=20to=201.0.7=20=F0=9F=93=9D=20docs(readme.txt):=20add=20cha?= =?UTF-8?q?ngelog=20entry=20for=20version=201.0.7=20=E2=9C=A8=20feat(readm?= =?UTF-8?q?e.txt):=20add=20changelog=20entry=20for=20version=201.0.7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y-init.js | 38 ++++++++++++++++++++++++++++++++------ a11y-styles.css | 26 +++++++++++++++++++++++--- readme.txt | 7 ++++++- 3 files changed, 61 insertions(+), 10 deletions(-) diff --git a/a11y-init.js b/a11y-init.js index 9e8e520..773d5aa 100644 --- a/a11y-init.js +++ b/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"; + } } }); diff --git a/a11y-styles.css b/a11y-styles.css index 1f684c5..2f9db07 100644 --- a/a11y-styles.css +++ b/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; diff --git a/readme.txt b/readme.txt index 8120772..26ec376 100644 --- a/readme.txt +++ b/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.