Add divs, spans, CSS classes, text logic and other adjustments (#13)

* Removed 'Used' * Moved evaluation title to appear with a span for styling and then have the ACR boiler plate title added. * Added <div> around major sections on the report header and individual chapter notes. * Updated report tests to include new divs. * Moved standards guidelines info into caption and added class to style the table widths. * Added a check for conformance level and if only one is selected then hide the label. Added test for that.
CivicActions · Mar 3, 2023 · 062479f · 062479f
1 parent 9d399f1
commit 062479f
Show file tree

Hide file tree

Showing 8 changed files with 169 additions and 73 deletions.
diff --git a/cypress/integration/report.test.js b/cypress/integration/report.test.js
@@ -124,7 +124,7 @@ describe("Report", () => {
     );
   });
 
-  it("should show entered level and notes for a criteria", () => {
+  it("should show entered single level and notes for a criteria without label", () => {
     cy.visit("/chapter/success_criteria_level_a");
     cy.get("button").contains("+ Expand All Sections").click();
 
@@ -140,6 +140,51 @@ describe("Report", () => {
       .should("be.focused")
       .should("contain", "Web: Supports")
       .should("contain", "Web: Does support non-text content.");
+
+    cy.get(
+      "#success_criteria_level_a-summary + table tbody tr td:nth-child(2) ul li span"
+    ).should("be.hidden");
+
+    cy.get(
+      "#success_criteria_level_a-summary + table tbody tr td:nth-child(3) ul li span"
+    ).should("be.hidden");
+  });
+
+  it("should show entered multiple level and notes for a criteria with labels", () => {
+    cy.visit("/chapter/success_criteria_level_a");
+    cy.get("button").contains("+ Expand All Sections").click();
+
+    cy.get("select[name='evaluation-1.1.1-web-level']").select("Supports");
+
+    cy.get("textarea[id='evaluation-1.1.1-web-notes']").type(
+      "Does support non-text content."
+    );
+
+    cy.get("select[name='evaluation-1.1.1-electronic-docs-level']").select(
+      "Partially Supports"
+    );
+
+    cy.get("textarea[id='evaluation-1.1.1-electronic-docs-notes']").type(
+      "Partially supports non-text content."
+    );
+
+    cy.get("a[href='/report#non-text-content-editor']").click();
+
+    cy.get("#success_criteria_level_a-summary + table tbody tr")
+      .should("be.focused")
+      .should("contain", "Electronic Documents: Partially Supports")
+      .should(
+        "contain",
+        "Electronic Documents: Partially supports non-text content."
+      );
+
+    cy.get(
+      "#success_criteria_level_a-summary + table tbody tr td:nth-child(2) ul li span"
+    ).should("be.visible");
+
+    cy.get(
+      "#success_criteria_level_a-summary + table tbody tr td:nth-child(3) ul li span"
+    ).should("be.visible");
   });
 
   it("should render markdown in notes columns for a criteria", () => {
@@ -172,7 +217,7 @@ describe("Report", () => {
 
     cy.get("button").contains("View Report").click();
 
-    cy.get("#success_criteria_level_aa-editor + p b").should(
+    cy.get("#success_criteria_level_aa-editor + div p b").should(
       "not.have.attr",
       "onclick"
     );
@@ -189,7 +234,7 @@ describe("Report", () => {
 
     cy.get("button").contains("View Report").click();
 
-    cy.get("#success_criteria_level_aaa-editor + p a")
+    cy.get("#success_criteria_level_aaa-editor + div p a")
       .should("have.attr", "href")
       .and("contains", "https://www.drupal.org/");
   });

diff --git a/src/components/report/ReportChapter.svelte b/src/components/report/ReportChapter.svelte
@@ -46,7 +46,9 @@
 <HeaderWithAnchor id={chapterId} level=3 {download}>{chapter.label}</HeaderWithAnchor>
 
 {#if $evaluation['chapters'][chapterId]['notes']}
-  Notes: {@html sanitizeMarkdown($evaluation['chapters'][chapterId]['notes'])}
+  <div id="{chapterId}-notes" class="chapter-notes-section">
+    Notes: {@html sanitizeMarkdown($evaluation['chapters'][chapterId]['notes'])}
+  </div>
 {/if}
 
 {#if $evaluation['chapters'][chapterId]['criteria'] && !$evaluation['chapters'][chapterId]['disabled'] }

diff --git a/src/components/report/ReportChapterTableResult.svelte b/src/components/report/ReportChapterTableResult.svelte
@@ -10,6 +10,14 @@
 
   $: catalogCriteria = catalogChapterCriteria(catalogName, chapterId, criteria.num);
   const extraId = download ? "-download" : "-editor";
+  let levelCount = 0;
+  if (criteria.components) {
+    criteria.components.forEach((component) => {
+      if (component.adherence.level) {
+        levelCount = levelCount + 1;
+      }
+    });
+  }
 </script>
 
 <style>
@@ -45,21 +53,21 @@
   </td>
   <td>
     {#if criteria.components}
-      <ul>
+      <ul class="component-level-count-{levelCount}">
         {#each criteria.components as component}
           {#if component.adherence.level}
-            <li>{@html catalogComponentLabel(catalogName, component.name, "html")}<p>{levelLabel(catalogName, component.adherence.level)}</p></li>
+            <li><span class="component-level-label">{@html catalogComponentLabel(catalogName, component.name, "html")}</span><p>{levelLabel(catalogName, component.adherence.level)}</p></li>
           {/if}
         {/each}
       </ul>
     {/if}
   </td>
   <td>
     {#if criteria.components}
-      <ul>
+      <ul class="component-level-count-{levelCount}">
         {#each criteria.components as component}
         {#if component.adherence.notes}
-          <li>{@html catalogComponentLabel(catalogName, component.name, "html")}{@html sanitizeMarkdown(component.adherence.notes)}</li>
+          <li><span class="component-level-label">{@html catalogComponentLabel(catalogName, component.name, "html")}</span>{@html sanitizeMarkdown(component.adherence.notes)}</li>
           {/if}
         {/each}
       </ul>

diff --git a/src/components/report/ReportHTMLDownload.svelte b/src/components/report/ReportHTMLDownload.svelte
@@ -111,6 +111,16 @@
           }
       }
     }
+    .applicable-standards-guidelines-table th:nth-child(1) {
+      width: 40%;
+    }
+    .applicable-standards-guidelines-table th:nth-child(2) {
+      width: 60%;
+    }
+    /* If only one level then hide the label. */
+    .component-level-count-1 .component-level-label {
+      display: none;
+    }
   </style>
   <main>
     <div class="grid-container">

diff --git a/src/components/report/ReportHeader.svelte b/src/components/report/ReportHeader.svelte
@@ -7,88 +7,109 @@
   import { reportFilename } from "../../utils/reportFilename.js";
   import { getCatalog } from "../../utils/getCatalogs.js";
 
-  $evaluation.title = $evaluation["product"]["name"] + " Accessibility Conformance Report";
+  $evaluation.title = $evaluation["product"]["name"];
 
   export let download = false;
   let catalog = getCatalog($evaluation.catalog);
 </script>
 
-<Header>{$evaluation.title}</Header>
+<Header><span class="evaluation-title">{$evaluation.title}</span> Accessibility Conformance Report</Header>
 
-Based on {catalog.title}
-<HeaderWithAnchor id="name-of-product-version" level=2 {download}>Name of Product/Version</HeaderWithAnchor>
-{$evaluation["product"]["name"]} {#if $evaluation["product"]["version"]} {$evaluation["product"]["version"]}{/if}
+<div class="catalog-section">Based on {catalog.title}</div>
 
-<HeaderWithAnchor id="report-date" level=2 {download}>Report Dates and Version</HeaderWithAnchor>
-<ul>
-  <li>Report Date: {$evaluation.report_date}</li>
-  <li>Last Modified Date: {$evaluation.last_modified_date}</li>
-  <li>Version: {reportFilename($evaluation)}</li>
-</ul>
+<div class="product-section">
+  <HeaderWithAnchor id="name-of-product-version" level=2 {download}>Name of Product/Version</HeaderWithAnchor>
+  {$evaluation["product"]["name"]} {#if $evaluation["product"]["version"]} {$evaluation["product"]["version"]}{/if}
+</div>
 
-{#if $evaluation["product"]["description"]}
-  <HeaderWithAnchor id="product-description" level=2 {download}>Product Description</HeaderWithAnchor>
-  {@html sanitizeMarkdown($evaluation["product"]["description"])}
-{/if}
-
-<HeaderWithAnchor id="contact-information" level=2 {download}>Contact Information</HeaderWithAnchor>
-{#if $evaluation["author"]}
-  <HeaderWithAnchor id="author" level=3 {download}>Author Information</HeaderWithAnchor>
-  <ul>
-    {#if $evaluation["author"]["name"]}<li>Name: {$evaluation["author"]["name"]}</li>{/if}
-    {#if $evaluation["author"]["company_name"]}<li>Company: {$evaluation["author"]["company_name"]}</li>{/if}
-    {#if $evaluation["author"]["address"]}<li>Address: {$evaluation["author"]["address"]}</li>{/if}
-    {#if $evaluation["author"]["email"]}<li>Email: <a href="mailto:{$evaluation['author']['email']}" target="_blank">{$evaluation["author"]["email"]} <span class="visuallyhidden">(opens in a new window or tab)</span></a></li>{/if}
-    {#if $evaluation["author"]["phone"]}<li>Phone: {$evaluation["author"]["phone"]}</li>{/if}
-    {#if $evaluation["author"]["website"]}<li>Website: <a href="{$evaluation['author']['website']}" target="_blank">{$evaluation["author"]["website"]} <span class="visuallyhidden">(opens in a new window or tab)</span></a></li>{/if}
-  </ul>
-{/if}
-{#if $evaluation["vendor"]}
-  <HeaderWithAnchor id="vendor" level=3 {download}>Vendor Information</HeaderWithAnchor>
+<div class="report-dates-ver-section">
+  <HeaderWithAnchor id="report-date" level=2 {download}>Report Dates and Version</HeaderWithAnchor>
   <ul>
-    {#if $evaluation["vendor"]["name"]}<li>Name: {$evaluation["vendor"]["name"]}</li>{/if}
-    {#if $evaluation["vendor"]["company_name"]}<li>Company: {$evaluation["vendor"]["company_name"]}</li>{/if}
-    {#if $evaluation["vendor"]["address"]}<li>Address: {$evaluation["vendor"]["address"]}</li>{/if}
-    {#if $evaluation["vendor"]["email"]}<li>Email: <a href="mailto:{$evaluation['vendor']['email']}" target="_blank">{$evaluation["vendor"]["email"]} <span class="visuallyhidden">(opens in a new window or tab)</span></a></li>{/if}
-    {#if $evaluation["vendor"]["phone"]}<li>Phone: {$evaluation["vendor"]["phone"]}</li>{/if}
-    {#if $evaluation["vendor"]["website"]}<li>Website: <a href="{$evaluation['vendor']['website']}" target="_blank">{$evaluation["vendor"]["website"]} <span class="visuallyhidden">(opens in a new window or tab)</span></a></li>{/if}
+    <li>Report Date: {$evaluation.report_date}</li>
+    <li>Last Modified Date: {$evaluation.last_modified_date}</li>
+    <li>Version: {reportFilename($evaluation)}</li>
   </ul>
+</div>
+
+{#if $evaluation["product"]["description"]}
+  <div class="description-section">
+    <HeaderWithAnchor id="product-description" level=2 {download}>Product Description</HeaderWithAnchor>
+    {@html sanitizeMarkdown($evaluation["product"]["description"])}
+  </div>
 {/if}
 
+<div id="contact-section">
+  <HeaderWithAnchor id="contact-information" level=2 {download}>Contact Information</HeaderWithAnchor>
+  {#if $evaluation["author"]}
+    <div class="author-section">
+      <HeaderWithAnchor id="author" level=3 {download}>Author Information</HeaderWithAnchor>
+      <ul>
+        {#if $evaluation["author"]["name"]}<li>Name: {$evaluation["author"]["name"]}</li>{/if}
+        {#if $evaluation["author"]["company_name"]}<li>Company: {$evaluation["author"]["company_name"]}</li>{/if}
+        {#if $evaluation["author"]["address"]}<li>Address: {$evaluation["author"]["address"]}</li>{/if}
+        {#if $evaluation["author"]["email"]}<li>Email: <a href="mailto:{$evaluation['author']['email']}" target="_blank">{$evaluation["author"]["email"]} <span class="visuallyhidden">(opens in a new window or tab)</span></a></li>{/if}
+        {#if $evaluation["author"]["phone"]}<li>Phone: {$evaluation["author"]["phone"]}</li>{/if}
+        {#if $evaluation["author"]["website"]}<li>Website: <a href="{$evaluation['author']['website']}" target="_blank">{$evaluation["author"]["website"]} <span class="visuallyhidden">(opens in a new window or tab)</span></a></li>{/if}
+      </ul>
+    </div>
+  {/if}
+  {#if $evaluation["vendor"]}
+    <div class="vendor-section">
+      <HeaderWithAnchor id="vendor" level=3 {download}>Vendor Information</HeaderWithAnchor>
+      <ul>
+        {#if $evaluation["vendor"]["name"]}<li>Name: {$evaluation["vendor"]["name"]}</li>{/if}
+        {#if $evaluation["vendor"]["company_name"]}<li>Company: {$evaluation["vendor"]["company_name"]}</li>{/if}
+        {#if $evaluation["vendor"]["address"]}<li>Address: {$evaluation["vendor"]["address"]}</li>{/if}
+        {#if $evaluation["vendor"]["email"]}<li>Email: <a href="mailto:{$evaluation['vendor']['email']}" target="_blank">{$evaluation["vendor"]["email"]} <span class="visuallyhidden">(opens in a new window or tab)</span></a></li>{/if}
+        {#if $evaluation["vendor"]["phone"]}<li>Phone: {$evaluation["vendor"]["phone"]}</li>{/if}
+        {#if $evaluation["vendor"]["website"]}<li>Website: <a href="{$evaluation['vendor']['website']}" target="_blank">{$evaluation["vendor"]["website"]} <span class="visuallyhidden">(opens in a new window or tab)</span></a></li>{/if}
+      </ul>
+    </div>
+  {/if}
+</div>
+
 {#if $evaluation["notes"]}
-  <HeaderWithAnchor id="notes" level=2 {download}>Notes</HeaderWithAnchor>
-  {@html sanitizeMarkdown($evaluation["notes"])}
+  <div class="notes-section">
+    <HeaderWithAnchor id="notes" level=2 {download}>Notes</HeaderWithAnchor>
+    {@html sanitizeMarkdown($evaluation["notes"])}
+  </div>
 {/if}
 
 {#if $evaluation["evaluation_methods_used"]}
-  <HeaderWithAnchor id="evaluation-methods" level=2 {download}>Evaluation Methods Used</HeaderWithAnchor>
-  {@html sanitizeMarkdown($evaluation["evaluation_methods_used"])}
+  <div class="eval-section">
+    <HeaderWithAnchor id="evaluation-methods" level=2 {download}>Evaluation Methods</HeaderWithAnchor>
+    {@html sanitizeMarkdown($evaluation["evaluation_methods_used"])}
+  </div>
 {/if}
 
-<HeaderWithAnchor id="applicable-standards-guidelines" level=2 {download}>Applicable Standards/Guidelines</HeaderWithAnchor>
-This report covers the degree of conformance for the following accessibility standard/guidelines:
+<div class="standards-section">
+  <HeaderWithAnchor id="applicable-standards-guidelines" level=2 {download}>Applicable Standards/Guidelines</HeaderWithAnchor>
 
-<table class="usa-table">
-  <thead>
-    <tr>
-      <th>Standard/Guideline</th>
-      <th>Included In Report</th>
-    </tr>
-  </thead>
-  <tbody>
-    {#each catalog.standards as standard }
+  <table class="usa-table applicable-standards-guidelines-table">
+    <caption>This report covers the degree of conformance for the following accessibility standard/guidelines:</caption>
+    <thead>
       <tr>
-        <td><a href="{standard.url}" target="_blank">{standard.label} <span class="visuallyhidden">(opens in a new window or tab)</span></a></td>
-        <td>{@html standardsIncluded($evaluation.catalog, standard.chapters)}</td>
+        <th>Standard/Guideline</th>
+        <th>Included In Report</th>
       </tr>
-    {/each}
-  </tbody>
-</table>
+    </thead>
+    <tbody>
+      {#each catalog.standards as standard }
+        <tr>
+          <td><a href="{standard.url}" target="_blank">{standard.label} <span class="visuallyhidden">(opens in a new window or tab)</span></a></td>
+          <td>{@html standardsIncluded($evaluation.catalog, standard.chapters)}</td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
 
-<HeaderWithAnchor id="terms" level=2 {download}>Terms</HeaderWithAnchor>
-The terms used in the Conformance Level information are defined as follows:
-<ul>
-{#each catalog.terms as term}
-  <li><strong>{term.label}</strong>: {term.description}</li>
-{/each}
-</ul>
+<div class="terms-section">
+  <HeaderWithAnchor id="terms" level=2 {download}>Terms</HeaderWithAnchor>
+  The terms used in the Conformance Level information are defined as follows:
+  <ul>
+  {#each catalog.terms as term}
+    <li><strong>{term.label}</strong>: {term.description}</li>
+  {/each}
+  </ul>
+</div>
diff --git a/src/components/report/ReportMarkdownDownload.svelte b/src/components/report/ReportMarkdownDownload.svelte
@@ -58,7 +58,7 @@ ${$evaluation["product"]["notes"]}`;
 
   if ($evaluation["product"]["evaluation_methods_used"]) {
     mdTemplate += `
-## Evaluation Methods Used
+## Evaluation Methods
 ${$evaluation["product"]["evaluation_methods_used"]}`;
   }
 

diff --git a/src/components/report/ReportZipDownload.svelte b/src/components/report/ReportZipDownload.svelte
@@ -120,6 +120,16 @@
           }
       }
     }
+    .applicable-standards-guidelines-table th:nth-child(1) {
+      width: 40%;
+    }
+    .applicable-standards-guidelines-table th:nth-child(2) {
+      width: 60%;
+    }
+    /* If only one level then hide the label. */
+    .component-level-count-1 .component-level-label {
+      display: none;
+    }
   </style>
   <main>
     <div class="grid-container">

diff --git a/src/routes/About.svelte b/src/routes/About.svelte
@@ -376,7 +376,7 @@
   </div>
 
   <div class="field">
-    <label for="evaluation-evaluation-methods-used">Evaluation Methods Used</label>
+    <label for="evaluation-evaluation-methods-used">Evaluation Methods</label>
     <textarea
       bind:value={$evaluation['evaluation_methods_used']}
       id="evaluation-evaluation-methods-used"