Fix missing key

a11yproject · May 9, 2021 · 370ada4 · 370ada4
1 parent 5e6b030
commit 370ada4
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 1 deletion.
diff --git a/src/_data/checklists.json b/src/_data/checklists.json
@@ -29,7 +29,81 @@
 		]
 	},
 	"global code": {
-		"preface": "Global code is code that affects your entire website or web app."
+		"preface": "Global code is code that affects your entire website or web app.",
+		"tasks": [
+			{
+				"title": "Validate your HTML.",
+				"checkboxId": "validate-html",
+				"wcag": "4.1.1 Parsing",
+				"url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-parses.html",
+				"description": "<a href='https://validator.w3.org/nu/'>Valid HTML</a> helps to provide an consistent, expected experience across all browsers and assistive technology.",
+				"wcagLevel": "A"
+			},
+			{
+				"title": "Use a <code>lang</code> attribute on the <code>html</code> element.",
+				"checkboxId": "use-lang-attribute",
+				"wcag": "3.1.1 Language of Page",
+				"url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-doc-lang-id.html",
+				"description": "This helps assistive technology such as screen readers to <a href='https://github.com/FreedomScientific/VFO-standards-support/issues/188'>pronounce content correctly</a>.",
+				"wcagLevel": "A"
+			},
+			{
+				"title": "Provide a unique <code>title</code> for each page or view.",
+				"checkboxId": "provide-unique-page-title",
+				"wcag": "2.4.2 Page Titled",
+				"url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html",
+				"description": "The <code>title</code> element, contained in the document's <code>head</code> element, is often the first piece of information announced by assistive technology. This helps tell people what page or view they are going to start navigating.",
+				"wcagLevel": "A"
+			},
+			{
+				"title": "Ensure that viewport zoom is not disabled.",
+				"checkboxId": "dont-disable-zoom",
+				"wcag": "1.4.4 Resize text",
+				"url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html",
+				"description": "Some people need to increase the size of text to a point where they can read it. Do not stop them from doing this, even for web apps with a native app-like experience. Even native apps should respect Operating System settings for resizing text.",
+				"wcagLevel": "AA"
+			},
+			{
+				"title": "Use landmark elements to indicate important content regions.",
+				"checkboxId": "use-landmark-elements",
+				"wcag": "4.1.2 Name, Role, Value",
+				"url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html",
+				"description": "<a href='https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html'>Landmark regions</a> help communicate the layout and important areas of a page or view, and can allow quick access to these regions. For example, use the <code>nav</code> element to wrap a site's navigation, and the <code>main</code> element to contain the primary content of a page.",
+				"wcagLevel": "A"
+			},
+			{
+				"title": "Ensure a linear content flow.",
+				"checkboxId": "linear-content-flow",
+				"wcag": "2.4.3 Focus Order",
+				"url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html",
+				"description": "Remove <code>tabindex</code> attribute values that aren't either <code>0</code> or <code>-1</code>. Elements that are inherently focusable, such as links or <code>button</code> elements, do not require a <code>tabindex</code>. Elements that are not inherently focusable should not have a <code>tabindex</code> applied to them outside of very specific use cases.",
+				"wcagLevel": "A"
+			},
+			{
+				"title": "Avoid using the <code>autofocus</code> attribute.",
+				"checkboxId": "avoid-autofocus",
+				"wcag": "2.4.3 Focus Order",
+				"url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-order.html",
+				"description": " People who are blind or who have low vision may be disoriented when focus is moved without their permission. Additionally, <code>autofocus</code> can be problematic for people with motor control disabilities, as it may create extra work for them to navigate out from the autofocused area and to other locations on the page/view.",
+				"wcagLevel": "A"
+			},
+			{
+				"title": "Remove session timeouts.",
+				"checkboxId": "remove-timeouts",
+				"wcag": "2.2.1 Timing Adjustable",
+				"url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html",
+				"description": "If you cannot, let the person using your site know the timeout exists ahead of time, and provide significant notice before the timer runs out.",
+				"wcagLevel": "A"
+			},
+			{
+				"title": "Remove <code>title</code> attribute tooltips.",
+				"checkboxId": "remove-title-attribute",
+				"wcag": "4.1.2 Name, Role, Value",
+				"url": "https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html",
+				"description": "<a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title#Accessibility_concerns'>The <code>title</code> attribute has numerous issues</a>, and should not be used if the information provided is important for all people to access. An acceptable use for the <code>title</code> attribute would be labeling an <code>iframe</code> element to indicate what content it contains.",
+				"wcagLevel": "A"
+			}
+		]
 	},
 	"keyboard": {
 		"preface": "It is important that your interface and content can be operated, and navigated by use of a keyboard. Some people cannot use a mouse, or may be using other assistive technologies that may not allow for hovering or precise clicking.",

diff --git a/src/js/checklist.js b/src/js/checklist.js
@@ -8,6 +8,25 @@
 	Element.prototype.matches = Element.prototype.msMatchesSelector;
 }
 
+var checklistCategoryExpanded = {
+  "content": false,
+  "global-code": false,
+  "keyboard": false,
+  "images": false,
+  "headings": false,
+  "lists": false,
+  "controls": false,
+  "tables": false,
+  "forms": false,
+  "media": false,
+  "video": false,
+  "audio": false,
+  "appearance": false,
+  "animation": false,
+  "color-contrast": false,
+  "mobile-and-touch": false
+}
+
 /**
  * If someone opens the checklist page using a checklist item's "Share link" (ex: a11yproject.com/checklist/#validate-your-html) the item with the corresponding id will scroll into view. Then, if JS is enabled, this function will open its associated <details> element
  */
@@ -65,3 +84,24 @@ function processChecklist() {
 
 openLinkedCheckListItem();
 processChecklist();
+
+function toggleChecklistGroup() {
+	document.addEventListener("click", function (event) {
+		var target = event.target;
+		if (target.matches("[data-toggle-category]")) {
+			var categoryName = target.getAttribute("data-toggle-category");
+			var categoryWrapper = target.closest(
+				'[data-checklist-category="' + categoryName + '"]'
+			);
+			var checklistItems = categoryWrapper.querySelectorAll("details");
+			var willExpandAll = categoryWrapper.querySelectorAll('details[open]').length === 0
+			console.log(willExpandAll)
+			for (var i = 0; i < checklistItems.length; ++i) {
+				var item = checklistItems[i];
+				item.open = willExpandAll
+			}
+		}
+	});
+}
+
+toggleChecklistGroup();