From 1a2d00d58b4ea8cb25435f4978d8ef9370b86e9a Mon Sep 17 00:00:00 2001 From: Kevin White Date: Mon, 11 Dec 2023 16:07:31 +0000 Subject: [PATCH] Updates for WCAG 2.2 (#132) * First steps for WCAG 2.2 * Ignore package-lock * Change version of Understanding links based on WCAG version * Update contacts * Remove 4.1.1 * Fix for missing criteria when changing scope * Handle removal of 4.1.1 * Remove duplicated criteria * Correct links to 2.0 understanding documents This links to the 2.0 understanding documents within the TR space, not the ones in the WAI space. The default on opening EM Report tool is 2.2 and most people will be using that or 2.1. So the slightly less than ideal experience for 2.0 is acceptable. Agreed by @shawna-slh and @iadawn --------- Co-authored-by: mhansma96 --- .gitignore | 1 + .../form/SampleInput/SampleInput.svelte | 2 + .../pages/Evaluation/DefineScopePage.svelte | 1 - src/components/ui/Auditor/Criterion.svelte | 27 +- src/data/wcag.json | 412 ++++++++++++++++++ src/locales/en/PAGES/SCOPE.json | 3 +- src/locales/en/WCAG.json | 45 ++ src/locales/nl/WCAG.json | 45 ++ src/stores/earl/assertionStore/models.js | 1 - src/stores/earl/testStore/index.js | 20 +- src/stores/scopeStore.js | 2 +- w3c.json | 2 +- 12 files changed, 543 insertions(+), 18 deletions(-) diff --git a/.gitignore b/.gitignore index bd65a668..ffeaaae4 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,4 @@ build # but not by platforms like Github Pages. # Files prefixed with `_` are ignored by default. translations_*.json +package-lock.json diff --git a/src/components/form/SampleInput/SampleInput.svelte b/src/components/form/SampleInput/SampleInput.svelte index 10eebb42..58eb3cba 100644 --- a/src/components/form/SampleInput/SampleInput.svelte +++ b/src/components/form/SampleInput/SampleInput.svelte @@ -81,6 +81,7 @@ let valueContainer; let showHelptext = false; const { translate } = getContext('app'); + import assertions from '@app/stores/earl/assertionStore/index.js'; $: TRANSLATED = { NO_SAMPLE: $translate('PAGES.SAMPLE.NO_PAGES_DEFINED'), @@ -119,6 +120,7 @@ newValue.splice(indexSample, 1); value = newValue; // @TODO: removeSample.delete(); !required for cleanup + $assertions = $assertions.filter(assertion => assertion.subject.id !== removeSample.id); subjects.remove(removeSample); } } diff --git a/src/components/pages/Evaluation/DefineScopePage.svelte b/src/components/pages/Evaluation/DefineScopePage.svelte index ba064ecb..fe3b2053 100644 --- a/src/components/pages/Evaluation/DefineScopePage.svelte +++ b/src/components/pages/Evaluation/DefineScopePage.svelte @@ -157,7 +157,6 @@ subject = $subjects.find((subject) => { return subject.type.indexOf(TestSubjectTypes.WEBSITE) >= 0; }); - test = $tests.find(($test) => { return $test.num === check; }); diff --git a/src/components/ui/Auditor/Criterion.svelte b/src/components/ui/Auditor/Criterion.svelte index 442580be..7dff2dd4 100644 --- a/src/components/ui/Auditor/Criterion.svelte +++ b/src/components/ui/Auditor/Criterion.svelte @@ -7,13 +7,22 @@

{num}: {TRANSLATED.CRITERION.TITLE}

Level {conformanceLevel}
- - {TRANSLATED.UNDERSTAND_BUTTON} - {num} - - + {#if wcagVersion == '20'} + + {TRANSLATED.UNDERSTAND_BUTTON} + {num} + + {:else} + + {TRANSLATED.UNDERSTAND_BUTTON} + {num} + + {/if} + {TRANSLATED.HOW_TO_BUTTON} {num} @@ -133,7 +142,9 @@ import Acknowledgements from '../../pages/Acknowledgements.svelte'; export let criterionDetailsOpen = false; let criterionDetails; - const { translate, translateToObject } = getContext('app'); + const { translate, translateToObject, scopeStore } = getContext('app'); + + $: wcagVersion = $scopeStore['WCAG_VERSION'].replace(".", ""); $: TRANSLATED = { UNDERSTAND_BUTTON: $translate('PAGES.AUDIT.UNDERSTAND'), diff --git a/src/data/wcag.json b/src/data/wcag.json index 27f86d85..71489225 100644 --- a/src/data/wcag.json +++ b/src/data/wcag.json @@ -673,5 +673,417 @@ "id": "status-messages", "conformanceLevel": "AA" } + }, + "2.2": { + "1.1.1": { + "num": "1.1.1", + "id": "non-text-content", + "conformanceLevel": "A" + }, + "1.2.1": { + "num": "1.2.1", + "id": "audio-only-and-video-only-prerecorded", + "conformanceLevel": "A" + }, + "1.2.2": { + "num": "1.2.2", + "id": "captions-prerecorded", + "conformanceLevel": "A" + }, + "1.2.3": { + "num": "1.2.3", + "id": "audio-description-or-media-alternative-prerecorded", + "conformanceLevel": "A" + }, + "1.2.4": { + "num": "1.2.4", + "id": "captions-live", + "conformanceLevel": "AA" + }, + "1.2.5": { + "num": "1.2.5", + "id": "audio-description-prerecorded", + "conformanceLevel": "AA" + }, + "1.2.6": { + "num": "1.2.6", + "id": "sign-language-prerecorded", + "conformanceLevel": "AAA" + }, + "1.2.7": { + "num": "1.2.7", + "id": "extended-audio-description-prerecorded", + "conformanceLevel": "AAA" + }, + "1.2.8": { + "num": "1.2.8", + "id": "media-alternative-prerecorded", + "conformanceLevel": "AAA" + }, + "1.2.9": { + "num": "1.2.9", + "id": "audio-only-live", + "conformanceLevel": "AAA" + }, + "1.3.1": { + "num": "1.3.1", + "id": "info-and-relationships", + "conformanceLevel": "A" + }, + "1.3.2": { + "num": "1.3.2", + "id": "meaningful-sequence", + "conformanceLevel": "A" + }, + "1.3.3": { + "num": "1.3.3", + "id": "sensory-characteristics", + "conformanceLevel": "A" + }, + "1.3.4": { + "num": "1.3.4", + "id": "orientation", + "conformanceLevel": "AA" + }, + "1.3.5": { + "num": "1.3.5", + "id": "identify-input-purpose", + "conformanceLevel": "AA" + }, + "1.3.6": { + "num": "1.3.6", + "id": "identify-purpose", + "conformanceLevel": "AAA" + }, + "1.4.1": { + "num": "1.4.1", + "id": "use-of-color", + "conformanceLevel": "A" + }, + "1.4.2": { + "num": "1.4.2", + "id": "audio-control", + "conformanceLevel": "A" + }, + "1.4.3": { + "num": "1.4.3", + "id": "contrast-minimum", + "conformanceLevel": "AA" + }, + "1.4.4": { + "num": "1.4.4", + "id": "resize-text", + "conformanceLevel": "AA" + }, + "1.4.5": { + "num": "1.4.5", + "id": "images-of-text", + "conformanceLevel": "AA" + }, + "1.4.6": { + "num": "1.4.6", + "id": "contrast-enhanced", + "conformanceLevel": "AAA" + }, + "1.4.7": { + "num": "1.4.7", + "id": "low-or-no-background-audio", + "conformanceLevel": "AAA" + }, + "1.4.8": { + "num": "1.4.8", + "id": "visual-presentation", + "conformanceLevel": "AAA" + }, + "1.4.9": { + "num": "1.4.9", + "id": "images-of-text-no-exception", + "conformanceLevel": "AAA" + }, + "1.4.10": { "num": "1.4.10", "id": "reflow", "conformanceLevel": "AA" }, + "1.4.11": { + "num": "1.4.11", + "id": "non-text-contrast", + "conformanceLevel": "AA" + }, + "1.4.12": { + "num": "1.4.12", + "id": "text-spacing", + "conformanceLevel": "AA" + }, + "1.4.13": { + "num": "1.4.13", + "id": "content-on-hover-or-focus", + "conformanceLevel": "AA" + }, + "2.1.1": { "num": "2.1.1", "id": "keyboard", "conformanceLevel": "A" }, + "2.1.2": { + "num": "2.1.2", + "id": "no-keyboard-trap", + "conformanceLevel": "A" + }, + "2.1.3": { + "num": "2.1.3", + "id": "keyboard-no-exception", + "conformanceLevel": "AAA" + }, + "2.1.4": { + "num": "2.1.4", + "id": "character-key-shortcuts", + "conformanceLevel": "A" + }, + "2.2.1": { + "num": "2.2.1", + "id": "timing-adjustable", + "conformanceLevel": "A" + }, + "2.2.2": { + "num": "2.2.2", + "id": "pause-stop-hide", + "conformanceLevel": "A" + }, + "2.2.3": { + "num": "2.2.3", + "id": "no-timing", + "conformanceLevel": "AAA" + }, + "2.2.4": { + "num": "2.2.4", + "id": "interruptions", + "conformanceLevel": "AAA" + }, + "2.2.5": { + "num": "2.2.5", + "id": "re-authenticating", + "conformanceLevel": "AAA" + }, + "2.2.6": { + "num": "2.2.6", + "id": "timeouts", + "conformanceLevel": "AAA" + }, + "2.3.1": { + "num": "2.3.1", + "id": "three-flashes-or-below-threshold", + "conformanceLevel": "A" + }, + "2.3.2": { + "num": "2.3.2", + "id": "three-flashes", + "conformanceLevel": "AAA" + }, + "2.3.3": { + "num": "2.3.3", + "id": "animation-from-interactions", + "conformanceLevel": "AAA" + }, + "2.4.1": { + "num": "2.4.1", + "id": "bypass-blocks", + "conformanceLevel": "A" + }, + "2.4.2": { + "num": "2.4.2", + "id": "page-titled", + "conformanceLevel": "A" + }, + "2.4.3": { + "num": "2.4.3", + "id": "focus-order", + "conformanceLevel": "A" + }, + "2.4.4": { + "num": "2.4.4", + "id": "link-purpose-in-context", + "conformanceLevel": "A" + }, + "2.4.5": { + "num": "2.4.5", + "id": "multiple-ways", + "conformanceLevel": "AA" + }, + "2.4.6": { + "num": "2.4.6", + "id": "headings-and-labels", + "conformanceLevel": "AA" + }, + "2.4.7": { + "num": "2.4.7", + "id": "focus-visible", + "conformanceLevel": "AA" + }, + "2.4.8": { + "num": "2.4.8", + "id": "location", + "conformanceLevel": "AAA" + }, + "2.4.9": { + "num": "2.4.9", + "id": "link-purpose-link-only", + "conformanceLevel": "AAA" + }, + "2.4.10": { + "num": "2.4.10", + "id": "section-headings", + "conformanceLevel": "AAA" + }, + "2.5.1": { + "num": "2.5.1", + "id": "pointer-gestures", + "conformanceLevel": "A" + }, + "2.5.2": { + "num": "2.5.2", + "id": "pointer-cancellation", + "conformanceLevel": "A" + }, + "2.5.3": { + "num": "2.5.3", + "id": "label-in-name", + "conformanceLevel": "A" + }, + "2.5.4": { + "num": "2.5.4", + "id": "motion-actuation", + "conformanceLevel": "A" + }, + "2.5.5": { + "num": "2.5.5", + "id": "target-size", + "conformanceLevel": "AAA" + }, + "2.5.6": { + "num": "2.5.6", + "id": "concurrent-input-mechanisms", + "conformanceLevel": "AAA" + }, + "3.1.1": { + "num": "3.1.1", + "id": "language-of-page", + "conformanceLevel": "A" + }, + "3.1.2": { + "num": "3.1.2", + "id": "language-of-parts", + "conformanceLevel": "AA" + }, + "3.1.3": { + "num": "3.1.3", + "id": "unusual-words", + "conformanceLevel": "AAA" + }, + "3.1.4": { + "num": "3.1.4", + "id": "abbreviations", + "conformanceLevel": "AAA" + }, + "3.1.5": { + "num": "3.1.5", + "id": "reading-level", + "conformanceLevel": "AAA" + }, + "3.1.6": { + "num": "3.1.6", + "id": "pronunciation", + "conformanceLevel": "AAA" + }, + "3.2.1": { "num": "3.2.1", "id": "on-focus", "conformanceLevel": "A" }, + "3.2.2": { "num": "3.2.2", "id": "on-input", "conformanceLevel": "A" }, + "3.2.3": { + "num": "3.2.3", + "id": "consistent-navigation", + "conformanceLevel": "AA" + }, + "3.2.4": { + "num": "3.2.4", + "id": "consistent-identification", + "conformanceLevel": "AA" + }, + "3.2.5": { + "num": "3.2.5", + "id": "change-on-request", + "conformanceLevel": "AAA" + }, + "3.3.1": { + "num": "3.3.1", + "id": "error-identification", + "conformanceLevel": "A" + }, + "3.3.2": { + "num": "3.3.2", + "id": "labels-or-instructions", + "conformanceLevel": "A" + }, + "3.3.3": { + "num": "3.3.3", + "id": "error-suggestion", + "conformanceLevel": "AA" + }, + "3.3.4": { + "num": "3.3.4", + "id": "error-prevention-legal-financial-data", + "conformanceLevel": "AA" + }, + "3.3.5": { "num": "3.3.5", "id": "help", "conformanceLevel": "AAA" }, + "3.3.6": { + "num": "3.3.6", + "id": "error-prevention-all", + "conformanceLevel": "AAA" + }, + "4.1.2": { + "num": "4.1.2", + "id": "name-role-value", + "conformanceLevel": "A" + }, + "4.1.3": { + "num": "4.1.3", + "id": "status-messages", + "conformanceLevel": "AA" + }, + "2.4.11": { + "num": "2.4.11", + "id": "focus-not-obscured-minimum", + "conformanceLevel": "AA" + }, + "2.4.12": { + "num": "2.4.12", + "id": "focus-not-obscured-enhanced", + "conformanceLevel": "AAA" + }, + "2.4.13": { + "num": "2.4.13", + "id": "focus-appearance", + "conformanceLevel": "AAA" + }, + "2.5.7": { + "num": "2.5.7", + "id": "dragging-movements", + "conformanceLevel": "AA" + }, + "2.5.8": { + "num": "2.5.8", + "id": "target-size-minimum", + "conformanceLevel": "AA" + }, + "3.2.6": { + "num": "3.2.6", + "id": "consistent-help", + "conformanceLevel": "A" + }, + "3.3.7": { + "num": "3.3.7", + "id": "redundant-entry", + "conformanceLevel": "A" + }, + "3.3.8": { + "num": "3.3.8", + "id": "accessible-authentication-minimum", + "conformanceLevel": "AA" + }, + "3.3.9": { + "num": "3.3.9", + "id": "accessible-authentication-enhanced", + "conformanceLevel": "AAA" + } } } diff --git a/src/locales/en/PAGES/SCOPE.json b/src/locales/en/PAGES/SCOPE.json index 528f99c5..def696b5 100644 --- a/src/locales/en/PAGES/SCOPE.json +++ b/src/locales/en/PAGES/SCOPE.json @@ -11,7 +11,8 @@ "INF_SITE_SCOPE_LI2": "'All web content of the mobile version of the public website of Example Org. located at `http://m.example.org`'", "INF_SITE_SCOPE_1": "WCAG-EM Step 1.a: Define the Scope of the Website", "LABEL_WCAG_VERSION": "WCAG Version", - "INFO_WCAG_VERSION": "Select the WCAG version to use. Version 2.1 (default) or 2.0", + "INFO_WCAG_VERSION": "Select the WCAG version to use. Version 2.2 (default), 2.1 or 2.0", + "WCAG22": "WCAG 2.2", "WCAG21": "WCAG 2.1", "WCAG20": "WCAG 2.0", "LABEL_CONFORMANCE_TGT": "Conformance target", diff --git a/src/locales/en/WCAG.json b/src/locales/en/WCAG.json index 7aa54807..beb23953 100644 --- a/src/locales/en/WCAG.json +++ b/src/locales/en/WCAG.json @@ -725,6 +725,51 @@ "TITLE": "Status Messages", "DESCRIPTION": "In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.", "DETAILS": {} + }, + "2.4.11": { + "TITLE": "Focus Not Obscured (Minimum)", + "DESCRIPTION": "When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.", + "DETAILS": {} + }, + "2.4.12": { + "TITLE": "Focus Not Obscured (Enhanced)", + "DESCRIPTION": "When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.", + "DETAILS": {} + }, + "2.4.13": { + "TITLE": "Focus Appearance", + "DESCRIPTION": "When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:", + "DETAILS": {} + }, + "2.5.7": { + "TITLE": "Dragging Movements", + "DESCRIPTION": "All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.", + "DETAILS": {} + }, + "2.5.8": { + "TITLE": "Target Size (Minimum)", + "DESCRIPTION": "The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:", + "DETAILS": {} + }, + "3.2.6": { + "TITLE": "Consistent Help", + "DESCRIPTION": "If a Web page contains any of the following help mechanisms, and those mechanisms are repeated on multiple Web pages within a set of Web pages, they occur in the same order relative to other page content, unless a change is initiated by the user:", + "DETAILS": {} + }, + "3.3.7": { + "TITLE": "Redundant Entry", + "DESCRIPTION": "Information previously entered by or provided to the user that is required to be entered again in the same process is either:", + "DETAILS": {} + }, + "3.3.8": { + "TITLE": "Accessible Authentication (Minimum)", + "DESCRIPTION": "A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:", + "DETAILS": {} + }, + "3.3.9": { + "TITLE": "Accessible Authentication (Enhanced)", + "DESCRIPTION": "A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:", + "DETAILS": {} } } } diff --git a/src/locales/nl/WCAG.json b/src/locales/nl/WCAG.json index 94e89a14..2e8145d7 100644 --- a/src/locales/nl/WCAG.json +++ b/src/locales/nl/WCAG.json @@ -725,6 +725,51 @@ "TITLE": "Statusberichten", "DESCRIPTION": "In content die is geïmplementeerd met opmaaktalen kunnen statusberichten door software bepaald worden met behulp van rol (role) of eigenschappen (properties), zodat hulptechnologieën de berichten aan de gebruiker kunnen presenteren zonder dat ze de focus krijgen.", "DETAILS": {} + }, + "2.4.11": { + "TITLE": "Focus Not Obscured (Minimum)", + "DESCRIPTION": "When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.", + "DETAILS": {} + }, + "2.4.12": { + "TITLE": "Focus Not Obscured (Enhanced)", + "DESCRIPTION": "When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.", + "DETAILS": {} + }, + "2.4.13": { + "TITLE": "Focus Appearance", + "DESCRIPTION": "When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:", + "DETAILS": {} + }, + "2.5.7": { + "TITLE": "Dragging Movements", + "DESCRIPTION": "All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.", + "DETAILS": {} + }, + "2.5.8": { + "TITLE": "Target Size (Minimum)", + "DESCRIPTION": "The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:", + "DETAILS": {} + }, + "3.2.6": { + "TITLE": "Consistent Help", + "DESCRIPTION": "If a Web page contains any of the following help mechanisms, and those mechanisms are repeated on multiple Web pages within a set of Web pages, they occur in the same order relative to other page content, unless a change is initiated by the user:", + "DETAILS": {} + }, + "3.3.7": { + "TITLE": "Redundant Entry", + "DESCRIPTION": "Information previously entered by or provided to the user that is required to be entered again in the same process is either:", + "DETAILS": {} + }, + "3.3.8": { + "TITLE": "Accessible Authentication (Minimum)", + "DESCRIPTION": "A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:", + "DETAILS": {} + }, + "3.3.9": { + "TITLE": "Accessible Authentication (Enhanced)", + "DESCRIPTION": "A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:", + "DETAILS": {} } } } diff --git a/src/stores/earl/assertionStore/models.js b/src/stores/earl/assertionStore/models.js index d8fa359e..a9d732c2 100644 --- a/src/stores/earl/assertionStore/models.js +++ b/src/stores/earl/assertionStore/models.js @@ -5,7 +5,6 @@ export const AssertionTypes = ['Assertion']; export class Assertion extends BaseModel { constructor(options = {}) { super(options); - const REQUIRED_OPTIONS = ['subject', 'test']; if (REQUIRED_OPTIONS.some((option) => options[option] === undefined)) { diff --git a/src/stores/earl/testStore/index.js b/src/stores/earl/testStore/index.js index 4f5fc266..4cdbf371 100644 --- a/src/stores/earl/testStore/index.js +++ b/src/stores/earl/testStore/index.js @@ -14,16 +14,26 @@ import { TestRequirement } from './models.js'; * @type {Array} */ const LATEST_WCAG_VERSION = WCAG_VERSIONS.slice(-1)[0]; -const initialTestStore = wcagCriteriaDictionary[LATEST_WCAG_VERSION].map( +console.log(LATEST_WCAG_VERSION); +console.log(wcagCriteriaDictionary); +let initialTestStore = []; +for (const property in wcagCriteriaDictionary) { + console.log(property); + let temp = wcagCriteriaDictionary[property].map( (criterion) => { const newTest = new TestRequirement(criterion); - const wcagVersionLd = `WCAG${LATEST_WCAG_VERSION.replace('.', '')}`; + const wcagVersionLd = `WCAG${property.replace('.', '')}`; newTest.id = `${wcagVersionLd}:${criterion.id}`; newTest.num = criterion.num; - + return newTest; - } -); + }); + + temp.forEach((t) => { + initialTestStore.push(t); + }); +} +console.log(initialTestStore); /** * $tests diff --git a/src/stores/scopeStore.js b/src/stores/scopeStore.js index de2d5025..a231cd51 100644 --- a/src/stores/scopeStore.js +++ b/src/stores/scopeStore.js @@ -5,7 +5,7 @@ export const initialScopeStore = { AS_BASELINE: '', CONFORMANCE_TARGET: 'AA', SITE_NAME: '', - WCAG_VERSION: '2.1', + WCAG_VERSION: '2.2', WEBSITE_SCOPE: '' }; diff --git a/w3c.json b/w3c.json index 7bb5732a..5b183d80 100644 --- a/w3c.json +++ b/w3c.json @@ -1,6 +1,6 @@ { "group": 35532 -, "contacts": [ "nitedog", "hidde", "slhenry" ] +, "contacts": [ "iadawn", "slhenry" ] , "policy": "open" , "repo-type": "article" }