Updated confirm text for switching catalog. Updated titles and help t…

…ext (GSA#55)

* Updated confirm text for switching catalog. Updated titles and help text.

* Adjusted the confirm text and help text for select catalog.

* Shifting the report type change confirmation to a button instead of the radio. Fix GSA/openacr#341.

* Added reset button.

* Updated confirm dialog.

* Changed default catalog and tests.

.gitignore

@@ -4,3 +4,4 @@ public/build
 .vscode
 cypress/results
 .nova
+.DS_Store

cypress/fixtures/drupal-9.yaml

@@ -22,6 +22,7 @@ license: GPL-2.0-or-later
 related_openacrs:
   - url: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_section508.html
     type: secondary
+catalog: "2.4-edition-wcag-2.0-508-en"
 chapters:
   success_criteria_level_a:
     notes: "Drupal doesn't make a strong distinction between the front-end & back-end accessibility. Many administration interfaces can be exposed to users in a more interactive site. Generally this report focuses the Conformance Level / Remarks and Explainations so that Web comments are about elements that are typically public, while Authoring Tool is typically for authors and administrators. The goal of the authoring interface is to support ATAG 2.0 AA (Part A and B). The Drupal community strives to beek up with the latest WCAG recommendation."

cypress/fixtures/govready-0.9.yaml

@@ -25,6 +25,7 @@ evaluation_methods_used: >
   Testing was done through a combination of manual and automated testing. We leveraged automated tools WebAim's WAVE Toolbar and Microsoft's Accessibility Insights. Accessibility Insights leverages Deque's open source Axe accessibility engine. Manual testing was done using keyboard interactions and Apple's VoiceOver. Chrome v84 was used as the browser for all tests. Unique patterns were identified and tested to see where barriers might exist. Extensive testing of the site's functionality has been done based on this.
 legal_disclaimer: >
   The information herein is provided in good faith based on the analysis of the web application at the time of the review and does not represent a legally-binding claim. Please contact us to report any accessibility errors or conformance claim errors for re-evaluation and correction, if necessary.
+catalog: "2.4-edition-wcag-2.0-508-en"
 chapters:
   success_criteria_level_a:
     notes: "GovReady-Q is a web application and an authoring tool. As such the Software & Authoring Tool Notes are all included within the Web for the 'Conformance Level' and 'Remarks and Explanations'. There are some elements here that clearly fail WCAG 2.0 A."

cypress/integration/about.test.js

@@ -79,7 +79,7 @@ describe("About", () => {
 
     cy.get(".your-report__description").should(
       "contain",
-      `Reported on\n  0\n  of\n  258\n  Total Criteria.`
+      `Reported on\n  0\n  of\n  326\n  Total Criteria.`
     );
   });
 });

cypress/integration/catalog.test.js

@@ -1,23 +1,29 @@
 /// <reference types="Cypress" />
 
-const catalogs = [
-  "2.4-edition-wcag-2.0-508-en",
-  "2.4-edition-wcag-2.1-en",
-  "2.4-edition-wcag-2.1-508-en",
-];
+const catalogs = ["2.4-edition-wcag-2.1-en", "2.4-edition-wcag-2.0-508-en"];
 const chapters = [
   "success_criteria_level_a",
   "success_criteria_level_aa",
   "success_criteria_level_aaa",
 ];
+const wcag21Criteria = "2.1.4";
 
 describe("Catalogs", () => {
   catalogs.forEach((catalog) => {
-    it(`select catalog ${catalog} and load WCAG chapters and report without errors`, () => {
+    it(`select catalog ${catalog}, confirm and can load WCAG chapters and report without errors`, () => {
       cy.visit("/about");
 
+      cy.get("button").contains("Switch Catalogs").should("be.disabled");
+
       cy.get(`input[value="${catalog}"]`).check();
 
+      cy.get("p").should(
+        "contain",
+        "Select Switch Catalogs to save your new selection."
+      );
+
+      cy.get("button").contains("Switch Catalogs").click();
+
       chapters.forEach((chapter) => {
         cy.visit(`/chapter/${chapter}`, {
           onBeforeLoad(win) {
@@ -36,15 +42,15 @@ describe("Catalogs", () => {
     });
   });
 
-  it(`toggle catalog and confirm a WCAG 2.1 criteria appears and disappears`, () => {
-    const wcag21Criteria = "2.1.4";
-
+  it("toggle catalog, confirm and check for WCAG 2.1 criteria appearing and disappearing", () => {
     cy.visit("/about");
 
     // Switch to WCAG 2.1 catalog.
-    cy.get(`input[value="${catalogs[1]}"]`).check();
+    cy.get("input[value='2.4-edition-wcag-2.1-en']").check();
 
-    cy.visit(`/chapter/${chapters[0]}`);
+    cy.get("button").contains("Switch Catalogs").click();
+
+    cy.visit("/chapter/success_criteria_level_a");
 
     cy.get(`div[id="${wcag21Criteria}"]`).should("exist");
 
@@ -58,9 +64,11 @@ describe("Catalogs", () => {
     cy.visit("/about");
 
     // Switch back to WCAG 2.0 508 catalog.
-    cy.get(`input[value="${catalogs[0]}"]`).check();
+    cy.get("input[value='2.4-edition-wcag-2.0-508-en']").check();
+
+    cy.get("button").contains("Switch Catalogs").click();
 
-    cy.visit(`/chapter/${chapters[0]}`);
+    cy.visit("/chapter/success_criteria_level_a");
 
     cy.get(`div[id="${wcag21Criteria}"]`).should("not.exist");
 
@@ -71,4 +79,52 @@ describe("Catalogs", () => {
       wcag21Criteria
     );
   });
+
+  it("toggle catalog, click confirm and see a confirmation dialog", () => {
+    cy.visit("/about");
+
+    cy.on("window:confirm", cy.stub().as("confirmation"));
+
+    // Switch to WCAG 2.1 catalog.
+    cy.get("input[value='2.4-edition-wcag-2.1-en']").check();
+
+    cy.get("button").contains("Switch Catalogs").click();
+
+    cy.get("@confirmation")
+      .should("have.been.calledOnce")
+      .and(
+        "have.been.calledWith",
+        "Switching catalogs may remove entered data and notes from your ACR that are not part of the newly selected catalog.\n\nPlease download your report before switching catalogs to avoid losing information. Select Cancel to save before switching."
+      );
+  });
+
+  it("toggle catalog and reset it", () => {
+    cy.visit("/about");
+
+    // Switch to WCAG 2.1 catalog.
+    cy.get("input[value='2.4-edition-wcag-2.1-en']").check();
+
+    cy.get("button").contains("Reset").click();
+
+    cy.get(`input[value="2.4-edition-wcag-2.1-508-en"]`).should("be.checked");
+  });
+
+  it("toggle catalog and cancel confirmation", () => {
+    cy.visit("/about");
+
+    // Cancel the confirmation of toggling the catalog.
+    cy.on("window:confirm", () => false);
+
+    // Switch to WCAG 2.1 catalog.
+    cy.get("input[value='2.4-edition-wcag-2.1-en']").check();
+
+    cy.get("button").contains("Switch Catalogs").click();
+
+    cy.get("button").contains("View Report").click();
+
+    cy.get("#content").should(
+      "contain",
+      "Based on VPAT® 2.4 WCAG 2.1 and Revised Section 508 Edition"
+    );
+  });
 });

cypress/integration/chapter.test.js

@@ -52,27 +52,27 @@ describe("Chapter", () => {
 
     cy.get(nonTextContentWebComponentLevelField).select("Supports");
 
-    cy.get(progressBarA).should("contain", "1 of 100");
+    cy.get(progressBarA).should("contain", "1 of 120");
 
     cy.get(nonTextContentWebComponentLevelField).select("Partially Supports");
 
-    cy.get(progressBarA).should("contain", "1 of 100");
+    cy.get(progressBarA).should("contain", "1 of 120");
 
     cy.get(nonTextContentWebComponentLevelField).select("Does Not Support");
 
-    cy.get(progressBarA).should("contain", "1 of 100");
+    cy.get(progressBarA).should("contain", "1 of 120");
 
     cy.get(nonTextContentWebComponentLevelField).select("Not Applicable");
 
-    cy.get(progressBarA).should("contain", "1 of 100");
+    cy.get(progressBarA).should("contain", "1 of 120");
 
     cy.get(nonTextContentWebComponentLevelField).select("Not Evaluated");
 
-    cy.get(progressBarA).should("contain", "1 of 100");
+    cy.get(progressBarA).should("contain", "1 of 120");
 
     cy.get(nonTextContentWebComponentLevelField).select("");
 
-    cy.get(progressBarA).should("contain", "0 of 100");
+    cy.get(progressBarA).should("contain", "0 of 120");
   });
 
   it("type notes and should see a message after adding 1 character, then a different message after more than 50 characters, and no message for 0 characters", () => {

cypress/integration/import.test.js

@@ -207,6 +207,8 @@ describe("Import", () => {
       .get(`input[value="2.4-edition-wcag-2.1-508-en"]`)
       .check();
 
+    cy.get("button").contains("Switch Catalogs").click();
+
     cy.get("@alerted")
       .should("have.been.calledTwice")
       .and(
@@ -227,6 +229,8 @@ describe("Import", () => {
       .get(`input[value="2.4-edition-wcag-2.0-508-en"]`)
       .check();
 
+    cy.get("button").contains("Switch Catalogs").click();
+
     cy.get("@alerted")
       .should("have.been.calledThrice")
       .and(

cypress/integration/report.test.js

@@ -134,7 +134,7 @@ describe("Report", () => {
       "Does support non-text content."
     );
 
-    cy.get("a[href='/report#text-equiv-all-editor']").click();
+    cy.get("a[href='/report#non-text-content-editor']").click();
 
     cy.get("#success_criteria_level_a-editor + table tbody tr")
       .should("be.focused")
@@ -152,7 +152,7 @@ describe("Report", () => {
       "[Drupal 8](https://www.drupal.org/) requires alt text for images by default."
     );
 
-    cy.get("a[href='/report#text-equiv-all-editor']").click();
+    cy.get("a[href='/report#non-text-content-editor']").click();
 
     cy.get(
       "#success_criteria_level_a-editor + table tbody tr td:nth-child(3) a"

src/data/helpText.yaml

@@ -44,4 +44,7 @@ disabled_chapters:
   software: ""
   support_documentation_and_services: ""
 catalog:
-  intro: "Select which catalog you will be using for the OpenACR."
+  intro: "Select which catalog you want to use for this OpenACR."
+  2.4-edition-wcag-2.0-508-en: "These are the minimum standards required for Section 508 conformance in the United States of America."
+  2.4-edition-wcag-2.1-en: "This is a web-specific ACR that follows the global best practices for web accessibility."
+  2.4-edition-wcag-2.1-508-en: "This is the current best practice standard in the United States of America."

src/routes/About.svelte

@@ -23,6 +23,7 @@
   const location = useLocation();
   let catalog = getCatalog($evaluation.catalog);
   let catalogChoices = getListOfCatalogs();
+  let selectedCatalog = $evaluation.catalog;
 
   onMount(() => {
     currentPage.update(currentPage => "About");
@@ -84,15 +85,24 @@
   }
 
   function updateCatalog(e) {
+    selectedCatalog = e.target.value;
+  }
+
+  function confirmCatalogChange(e) {
     if (
       window.confirm(
-        "This may remove any entered criteria from your ACR that are not in the selected catalog. Download a copy of the report if you have not already. Are you sure that's what you'd like to do?"
+        "Switching catalogs may remove entered data and notes from your ACR that are not part of the newly selected catalog.\n\nPlease download your report before switching catalogs to avoid losing information. Select Cancel to save before switching."
       )
     ) {
-      updateEvaluation(e.target.value, $evaluation);
+      $evaluation['catalog'] = selectedCatalog;
+      updateEvaluation(selectedCatalog, $evaluation);
     }
   }
 
+  function resetCatalogChange() {
+    selectedCatalog = $evaluation['catalog'];
+  }
+
   $: versionPrefix = reportFilename($evaluation, false);
 </script>
 
@@ -121,7 +131,7 @@
 
 <details open>
   <summary>
-    <HeaderWithAnchor id="select-catalog" level=2>Select catalog</HeaderWithAnchor>
+    <HeaderWithAnchor id="select-catalog" level=2>Select report type and catalog</HeaderWithAnchor>
   </summary>
   <p>{helpText["catalog"]["intro"]}</p>
   {#each catalogChoices as catalogChoice}
@@ -130,14 +140,21 @@
         <input
           type="radio"
           value={catalogChoice.catalog}
-          bind:group="{$evaluation['catalog']}"
+          bind:group="{selectedCatalog}"
           id="evaluation-catalog-{catalogChoice.catalog}"
           on:change={updateCatalog} />
 
         {catalogChoice.title}
       </label>
+      <HelpText type="catalog" field="{catalogChoice.catalog}" />
     </div>
   {/each}
+
+  {#if $evaluation['catalog'] !== selectedCatalog }
+    <p><em>Select Switch Catalogs to save your new selection.</em></p>
+  {/if}
+  <button class="button" on:click={confirmCatalogChange} disabled={$evaluation['catalog'] === selectedCatalog}>Switch Catalogs</button>
+  <button class="button" on:click={resetCatalogChange} disabled={$evaluation['catalog'] === selectedCatalog}>Reset</button>
 </details>
 
 <details open>

src/utils/getCatalogs.js

@@ -20,19 +20,19 @@ export function getListOfCatalogs() {
   return [
     {
       catalog: wcag20508catalogName,
-      title: `${wcag20508catalog.title} (WCAG 2.0)`,
+      title: "VPAT® 2.4 508: Revised Section 508 Edition (WCAG 2.0)",
     },
     {
       catalog: wcag21508catalogName,
-      title: `${wcag21508catalog.title}`,
+      title: "VPAT® 2.4 508 + WCAG: Revised Section 508 Edition (WCAG 2.1)",
     },
     {
       catalog: wcag21catalogName,
-      title: `${wcag21catalog.title} (WCAG 2.1)`,
+      title: "VPAT® 2.4 WCAG: WCAG 2.1",
     },
   ];
 }
 
 export function getDefaultCatalogName() {
-  return wcag20508catalogName;
+  return wcag21508catalogName;
 }