Merge pull request #2803 from uswds/rc-publish-checkbox-checklist

USWDS-Site: Added checkbox accessibility test page

_components/checkbox/checkbox.md

@@ -10,16 +10,8 @@ permalink: /components/checkbox/
 redirect_from:
 - /form-controls/02-checkboxes/
 subnav:
-- text: Preview
-  href: '#checkbox-preview'
-- text: Code
-  href: '#checkbox-code'
-- text: Guidance
-  href: '#checkbox-guidance'
-- text: Package
-  href: '#checkbox-package'
-- text: Latest updates
-  href: '#changelog'
+- text: Checkbox accessibility tests
+  href: /components/checkbox/accessibility-tests/
 tags:
   - form
   - forms

_components/checkbox/guidance/accessibility-tests.md

@@ -0,0 +1,11 @@
+---
+permalink: /components/checkbox/accessibility-tests/
+layout: accessibility-test
+component:
+ name: checkbox
+title: Checkbox accessibility tests
+category: Components
+lead: Any USWDS checkbox component should pass these manual accessibility tests.
+changelog:
+ key: 'component-checkbox-accessibility'
+---

_data/accessibility-tests/checkbox.yml

@@ -0,0 +1,54 @@
+title: Checkbox
+component_status: pass
+test_items:
+# General tests
+  - summary: Visible instructions explain checkbox requirements. 
+    summary_additional: The checkbox has a visible label above it to indicate its purpose. For example, "Select your state."
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 3.3.2
+  - summary: Checkbox labels are descriptive, brief and clear.
+    summary_additional: When you view or interact with the checkbox component on your page, all labels have short descriptions that are easy to understand and act on. 
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 2.4.6
+# Keyboard navigation tests
+  - summary: Focus indicator on checkbox is clearly visible.
+    summary_additional: When you use a keyboard to focus on a checkbox group, you will see a visible outline or other clear indication of focus. 
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.0
+    wcag_criterion: 2.4.7
+  - summary: Checkbox focus follows logical content order.
+    summary_additional: When you tab through the checkbox with a keyboard, the focus stays in order of the content as intended. 
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.0
+    wcag_criterion: 2.4.3
+  - summary: Users can access and select checkbox items using only a keyboard. 
+    summary_additional: When you use a keyboard to navigate to the checkbox, you are able to move focus using `tab` and can select options with `spacebar`.
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.0
+    wcag_criterion: 2.1.1
+# Screen reader tests
+  - summary: Screen reader announces the checkbox group label and then announces each checkbox.
+    summary_additional: When listening to the checkbox button using a screen reader, you hear the question related to the checkbox read first. Then you will hear the checkbox group and labels within the checkbox and their checked state. 
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 4.1.2
+  - summary: Screen reader values for checkbox buttons match screen display.
+    summary_additional: When using a screen reader, you can hear the same value for the checkbox button that is shown on the screen.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 2.5.3
+  - summary: Screen reader announces all labels. 
+    summary_additional: When you use a screen reader and navigate to a checkbox you hear every label or title associated with that check box.
+    test_status: conditional
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 1.3.1

_data/changelogs/component-checkbox-accessibility.yml

@@ -0,0 +1,8 @@
+title: Checkbox
+type: component
+items:
+ - date: 2024-09-18
+   summary: Added accessibility tests page.
+   affectsGuidance: true
+   githubPr: 2803
+   githubRepo: uswds-site

_data/changelogs/component-checkbox.yml

@@ -2,6 +2,11 @@ title: Checkbox
 type: component
 changelogURL:
 items:
+  - date: 2024-09-18
+    summary: Added WCAG compliance tag and accessibility test status section.
+    affectsGuidance: true
+    githubPr: 2803
+    githubRepo: uswds-site
   - date: 2024-04-26
     summary: Added indeterminate styles for checkboxes.
     summaryAdditional: Checkboxes will now display as indeterminate when you set `input.indeterminate = true` via JavaScript or add the `data-indeterminate` attribute. This is currently only a style addition and does not affect checkbox functionality.