rewrites dialog popup and summary sections

Author: markconroy

index.html

@@ -23,9 +23,30 @@ <h1>Accessibility Report</h1>
     <p>Created by Mark Conroy & Big Blue Door</p>
   </footer>
   <dialog class="dialog-violations">
-    <button class="dialog-close">Close</button>
-    <h2 class="dialog-violations__title"></h2>
-    <ol class="dialog-violations__list"></ol>
+    <button class="dialog-violations__close">Close</button>
+    <div class="dialog-violations__title">
+
+      <h2>2 Landmark Unique Violations</h2>
+      <p>URL: <a href="https://www.cnn.com/">https://www.cnn.com/</a></p>
+
+    </div>
+    <ol class="dialog-violations__list">
+      <li>
+        <ul>
+          <li><strong>HTML:</strong> <code>&lt;nav data-uri="cms.cnn.com/_components/header/instances/cnn-v2@published" id="pageHeader" data-editable="settings" class="header cnn-app-display-none" data-analytics-aggregate-events="true"&gt;</code></li>
+          <li><strong>Target:</strong> #pageHeader</li>
+          <li><strong>Summary:</strong> Fix any of the following:
+The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable</li>
+        </ul>
+      </li><li>
+        <ul>
+          <li><strong>HTML:</strong> <code>&lt;nav class="user-account-nav user-account-nav--unauth" data-uri="cms.cnn.com/_components/user-account-nav/instances/user-account-nav@published" data-editable="settings" data-one-tap-enabled="false" data-one-tap-enabled-mw="false" aria-label="User Account Nav" data-avatar-enabled="false" tabindex="0" style="visibility: visible;"&gt;</code></li>
+          <li><strong>Target:</strong> #desktop-header-account-nav &gt; .user-account-nav.user-account-nav--unauth[data-one-tap-enabled="false"]</li>
+          <li><strong>Summary:</strong> Fix any of the following:
+The landmark must have a unique aria-label, aria-labelledby, or title to make landmarks distinguishable</li>
+        </ul>
+      </li>
+    </ol>
   </dialog>
   <script src="public/script.js"></script>
 </body>

public/script.js

@@ -1,5 +1,8 @@
 const app = document.querySelector('#app');
-const violations = fetch('violations.json').then(response => response.json());
+const dialog = document.querySelector('.dialog-violations');
+const dialogViolationsList = dialog.querySelector('.dialog-violations__list');
+const dialogViolationsTitle = dialog.querySelector('.dialog-violations__title');
+
 // Helper function to convert to sentence case
 const toSentenceCase = (string) => {
   return string
@@ -8,6 +11,7 @@ const toSentenceCase = (string) => {
     .map(word => word.charAt(0).toUpperCase() + word.slice(1))
     .join(' ');
 };
+
 const replaceHyphensWithSpaces = (string) => string.replace(/-/g, ' ');
 
 // Helper function to escape HTML
@@ -20,12 +24,12 @@ const escapeHtml = (unsafe) => {
     .replace(/'/g, "'");
 };
 
-const dialog = document.querySelector('.dialog-violations');
-const violationsList = dialog.querySelector('.dialog-violations__list');
+const violations = fetch('violations.json').then(response => response.json());
 
 violations.then(data => {
   const numberOfURLsTested = data.numberOfURLsTested;
   const allViolations = data.violations;
+  const numberOfViolations = allViolations.length;
 
   // Group violations by type
   const violationsByType = allViolations.reduce((acc, violation) => {
@@ -43,36 +47,63 @@ violations.then(data => {
     return acc;
   }, {});
 
-  // Count the number of nodes in color-contrast violations
-  // const numberOfColorContrastNodes = violationVariables['color-contrast'].reduce((acc, violation) => acc + violation.nodes.length, 0);
-
   // Get unique URLs with violations
   const uniqueURLsWithViolations = [...new Set(allViolations.map(violation => violation.url))];
 
+  // Count the number of issues for each impact level
+  const impactCounts = allViolations.reduce((acc, violation) => {
+    const impact = violation.impact || 'unknown';
+    if (!acc[impact]) {
+      acc[impact] = 0;
+    }
+    acc[impact] += 1;
+    return acc;
+  }, {});
+
+  // Set the content of the app element
   app.innerHTML = `
     <h2 id="summary">Summary</h2>
     <h3>URLs with violations</h3>
     <p>We tested <strong>${numberOfURLsTested} URLs</strong> and found <strong>${uniqueURLsWithViolations.length} URLs</strong> with accessibility violations <strong>(${(uniqueURLsWithViolations.length / numberOfURLsTested * 100).toFixed(2)}%</strong> of URLs).</p>
+    <p>The total number of violations found was <strong>${numberOfViolations}</strong></p>
+
+    <h3>Issues by Impact</h3>
+    <ul>
+      ${Object.entries(impactCounts).map(([impact, count]) => `
+        <li>${toSentenceCase(impact)}: ${count}</li>
+      `).join('')}
+    </ul>
+
+    <h3>Issues by Type</h3>
+    <ul>
+      ${violationTypes.map(type => `
+        <li>
+          ${violationVariables[type].length} ${replaceHyphensWithSpaces(toSentenceCase(type))}
+        </li>
+      `).join('')}
+    </ul>
+
     <ul>
       ${uniqueURLsWithViolations.map(url => `
         <li>
           <a href="${url}">${url}</a>
         </li>
       `).join('')}
     </ul>
+
     <h2 id="violations">Accessibility Violations</h2>
-    <div class="grid grid--2">
+    <div class="grid">
     ${violationTypes.map(type => `
       <article class="violations">
         <h3>${toSentenceCase(replaceHyphensWithSpaces(type))}</h3>
         <p>There are <strong>${violationVariables[type].length} ${type} violations</strong> across <strong>${uniqueURLsWithViolations.length} URLs</strong>.</p>
+        <p>Impact: <span class="impact impact--${violationVariables[type][0]['impact']}">${toSentenceCase(violationVariables[type][0]['impact'])}</span></p>
+        <p>Description: ${violationVariables[type][0]['description']}</p>
         <ol class="violations__list">
           ${violationVariables[type].map((violation, index) => `
             <li>
               <a href="${violation.url}">${violation.url}</a>
               <ul>
-                <li>Description: ${violation.description}</li>
-                <li>Impact: <span class="impact impact--${violation.impact}">${toSentenceCase(violation.impact)}</span></li>
                 <li>Instances: ${violation.nodes.length} - <button data-index="${index}" data-type="${type}" class="view-violations" type="button">View All</button></li>
               </ul>
             </li>
@@ -89,26 +120,34 @@ violations.then(data => {
       const type = event.target.getAttribute('data-type');
       const index = event.target.getAttribute('data-index');
       const violation = violationVariables[type][index];
-      violationsList.innerHTML = '';
+      const numberOfInstances = violation.nodes.length;
+      const violationSummary = violation.nodes[0]['failureSummary'];
+      dialogViolationsList.innerHTML = '';
+      dialogViolationsTitle.innerHTML = '';
+
+      dialogViolationsTitle.innerHTML = `
+        <h2>${numberOfInstances} ${toSentenceCase(replaceHyphensWithSpaces(type))} Violations</h2>
+        <p>URL: <a href="${violation.url}">${violation.url}</a></p>
+        <p>Summary: ${violationSummary}</p>
+      `;
 
       violation.nodes.forEach(node => {
-        console.log(node);
         const listItem = document.createElement('li');
         listItem.innerHTML = `
-          <p><strong>HTML:</strong></p>
-          <code>${escapeHtml(node.html)}</code>
-          <p><strong>Target:</strong> ${node.target.join(' > ')}</p>
-          <p><strong>Summary:</strong> ${node.failureSummary}</p>
+          <ul>
+            <li><strong>HTML:</strong> <code>${escapeHtml(node.html)}</code></li>
+            <li><strong>Target:</strong> ${node.target.join(' > ')}</li>
+          </ul>
         `;
-        violationsList.appendChild(listItem);
+        dialogViolationsList.appendChild(listItem);
       });
 
       dialog.showModal();
     });
   });
 
   // Event listener for the close dialog button
-  dialog.querySelector('.dialog-close').addEventListener('click', () => {
+  dialog.querySelector('.dialog-violations__close').addEventListener('click', () => {
     document.querySelector('.dialog-violations').close();
   });
 

public/style.css

@@ -75,7 +75,7 @@ h2 ~ h2 {
   background-color: #d4cd00;
 }
 .impact--serious {
-  background-color: #c86e00;
+  background-color: #b36200;
   color: var(--color-white);
 }
 .impact--critical {
@@ -88,6 +88,44 @@ dialog::backdrop {
   opacity: 0.9;
 }
 
+dialog {
+  width: 90%;
+  height: 90%;
+  max-width: 900px;
+  max-height: 600px;
+  padding: 2rem;
+  background-color: var(--color-white);
+  border: var(--border);
+}
+
+.dialog-violations__close {
+  display: block;
+  margin-inline-start: auto;
+}
+
+.dialog-violations__title {
+  margin-block-start: 2rem;
+  padding-block-start: 1rem;
+  border-block-start: var(--border);
+}
+
+.dialog-violations__list {
+  padding-block-start: 2rem;
+  margin-block-start: 2rem;
+  border-block-start: var(--border);
+}
+
+.dialog-violations__list > li {
+  margin-block-end: 2rem;
+  padding-block-end: 2rem;
+  border-bottom: var(--border);
+}
+
+.dialog-violations__list > li li {
+  list-style-type: disc;
+  margin-block-start: 0.5rem;
+}
+
 button {
   padding: 0.25rem 0.5rem;
   background-color: var(--color-primary);