From 090f301e8caa315f2603711c49e357f8ed4612e1 Mon Sep 17 00:00:00 2001 From: Daniel Mundra Date: Mon, 7 Mar 2022 16:35:58 -0800 Subject: [PATCH] Updated confirm text for switching catalog. Updated titles and help text (#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 https://github.com/GSA/openacr/issues/341. * Added reset button. * Updated confirm dialog. * Changed default catalog and tests. --- .gitignore | 1 + cypress/fixtures/drupal-9.yaml | 1 + cypress/fixtures/govready-0.9.yaml | 1 + cypress/integration/about.test.js | 2 +- cypress/integration/catalog.test.js | 82 ++++++++++++++++++++++++----- cypress/integration/chapter.test.js | 12 ++--- cypress/integration/import.test.js | 4 ++ cypress/integration/report.test.js | 4 +- src/data/helpText.yaml | 5 +- src/routes/About.svelte | 25 +++++++-- src/utils/getCatalogs.js | 8 +-- 11 files changed, 114 insertions(+), 31 deletions(-) diff --git a/.gitignore b/.gitignore index 324d5d1..fb14725 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ public/build .vscode cypress/results .nova +.DS_Store diff --git a/cypress/fixtures/drupal-9.yaml b/cypress/fixtures/drupal-9.yaml index 838ce28..d3d4ae7 100644 --- a/cypress/fixtures/drupal-9.yaml +++ b/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." diff --git a/cypress/fixtures/govready-0.9.yaml b/cypress/fixtures/govready-0.9.yaml index ea3f823..4c73605 100644 --- a/cypress/fixtures/govready-0.9.yaml +++ b/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." diff --git a/cypress/integration/about.test.js b/cypress/integration/about.test.js index b5edad6..504413f 100644 --- a/cypress/integration/about.test.js +++ b/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.` ); }); }); diff --git a/cypress/integration/catalog.test.js b/cypress/integration/catalog.test.js index 17feb6f..bf9a9b4 100644 --- a/cypress/integration/catalog.test.js +++ b/cypress/integration/catalog.test.js @@ -1,23 +1,29 @@ /// -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" + ); + }); }); diff --git a/cypress/integration/chapter.test.js b/cypress/integration/chapter.test.js index 9ebcbe7..a225693 100644 --- a/cypress/integration/chapter.test.js +++ b/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", () => { diff --git a/cypress/integration/import.test.js b/cypress/integration/import.test.js index 0e69353..272e78f 100644 --- a/cypress/integration/import.test.js +++ b/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( diff --git a/cypress/integration/report.test.js b/cypress/integration/report.test.js index 1fda9d1..154d289 100644 --- a/cypress/integration/report.test.js +++ b/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" diff --git a/src/data/helpText.yaml b/src/data/helpText.yaml index b1b6261..9189928 100644 --- a/src/data/helpText.yaml +++ b/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." diff --git a/src/routes/About.svelte b/src/routes/About.svelte index cbb97ca..4f74e2d 100644 --- a/src/routes/About.svelte +++ b/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); @@ -121,7 +131,7 @@
- Select catalog + Select report type and catalog

{helpText["catalog"]["intro"]}

{#each catalogChoices as catalogChoice} @@ -130,14 +140,21 @@ {catalogChoice.title} + {/each} + + {#if $evaluation['catalog'] !== selectedCatalog } +

Select Switch Catalogs to save your new selection.

+ {/if} + +
diff --git a/src/utils/getCatalogs.js b/src/utils/getCatalogs.js index 8120b43..18befed 100644 --- a/src/utils/getCatalogs.js +++ b/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; }