Merge pull request #2138 from uswds/al-prototype-a11y

USWDS-Site - Accessibility test checklist page

_components/accordion/accordion.md

@@ -11,26 +11,8 @@ redirect_from:
   - /accordions/
   - /components/accordions/
 subnav:
-- text: Preview
-  href: '#accordion-preview'
-- text: Code
-  href: '#accordion-code'
-- text: Guidance
-  href: '#accordion-guidance'
-- text: When to use
-  href: '#when-to-use-the-accordion'
-- text: When to consider something else
-  href: '#when-to-consider-something-else-accordion'
-- text: Usability guidance
-  href: '#usability-guidance-accordion'
-- text: Accessibility
-  href: '#accessibility-accordion'
-- text: Using the accordion component
-  href: '#using-the-accordion-component'
-- text: Package
-  href: '#accordion-package'
-- text: Latest updates
-  href: "#changelog"
+- text: Accordion accessibility tests
+  href: /components/accordion/checklist/
 title: Accordion
 type: component
 variants:

_components/accordion/checklist.md

@@ -0,0 +1,13 @@
+---
+permalink: /components/accordion/checklist/
+layout: styleguide
+component:
+  name: accordion
+title: Accordion accessibility tests
+category: Components
+lead: Any USWDS accordion should pass these manual accessibility tests.
+changelog:
+  key: 'component-accordion-checklist'
+---
+
+{% include accessibility-tests/index.html %}

_components/accordion/guidance/accessibility.md

@@ -1,3 +1,6 @@
 - **Code header areas in the accordion as buttons.** Using a `<button type="button">` assures accordions are usable with both screen readers and keyboards.
+- **Use meaningful expansion button labels.** Aim for informative labels like “Explore federal compliance checklists” rather than vague ones like “Click here.”
+- **Use `aria-controls` to associate an accordion button with its related content.** Connect an accordion button control with its appropriate content region by referencing the controlled element’s `id` in the button's `aria-controls` attribute.
 - **Use unique ids.** Each button has a unique name, `aria-controls="[id]"`, that associates the control with the appropriate region by referencing the controlled element’s `id`.
 - **Accordions use javascript to set the `hidden` values of their content areas.** Each content area will have its `hidden` attribute set by the component, depending on its corresponding button’s `aria-expanded` attribute. To ensure your content is accessible in the event that the JavaScript does not load or is disabled, you should not manually set `hidden` on any of your content areas.
+- **You do not need to add text alternatives for the collapsed and expanded accordion states.** These states are set programmatically with JavaScript.

_components/button/button.md

@@ -30,16 +30,8 @@ variants:
   - variant: "`.usa-button--unstyled`"
     description: A button that looks like a link.
 subnav:
-- text: Preview
-  href: '#button-preview'
-- text: Code
-  href: '#button-code'
-- text: Guidance
-  href: '#button-guidance'
-- text: Package
-  href: '#button-package'
-- text: Latest updates
-  href: '#changelog'
+- text: Button accessibility tests
+  href: /components/button/checklist/
 changelog:
   key: component-button
 ---

_components/button/checklist.md

@@ -0,0 +1,13 @@
+---
+permalink: /components/button/checklist/
+layout: styleguide
+component:
+  name: button
+title: Button accessibility tests
+category: Components
+lead: Any USWDS button should pass these manual accessibility tests.
+changelog:
+  key: 'component-button-checklist'
+---
+
+{% include accessibility-tests/index.html %}

_components/combo-box/combo-box.md

@@ -60,4 +60,3 @@ alert-content: In late 2022, we found some combo box <a href="#accessibility-com
 changelog:
   key: component-combo-box
 ---
-

_components/link/checklist.md

@@ -0,0 +1,13 @@
+---
+permalink: /components/link/checklist/
+layout: styleguide
+component:
+  name: link
+title: Link accessibility tests
+category: Components
+lead: Any USWDS link should pass these manual accessibility tests.
+changelog:
+  key: 'component-link-checklist'
+---
+
+{% include accessibility-tests/index.html %}

_components/link/link.md

@@ -28,20 +28,8 @@ permalink: /components/link/
 redirect_from:
 - /typography/02-links/
 subnav:
-  - text: Preview
-    href: '#link-preview'
-  - text: Code
-    href: '#link-code'
-  - text: Guidance
-    href: '#link-guidance'
-  - text: What you should do
-    href: '#what-you-should-do'
-  - text: Package
-    href: '#link-package'
-  - text: Research findings
-    href: '#research-findings'
-  - text: Latest updates
-    href: '#changelog'
+- text: Link accessibility tests
+  href: /components/link/checklist/
 title: Link
 variants:
   - variant: "`.usa-link--external`"

_config.yml

@@ -9,6 +9,9 @@ federalist_component_preview: "iframe.html?id="
 federalist_release_prefix: "release-"
 touchpoints:
   active: true
+github_issue_bug_url: https://github.com/uswds/uswds/issues/new?assignees=&labels=Type%3A+Bug%2CNeeds%3A+Confirmation&projects=&template=bug_report.yaml&title=USWDS+-+Bug%3A+%5BYOUR+TITLE%5D
+github_issue_feature_url: https://github.com/uswds/uswds/issues/new?assignees=&labels=Type%3A+Feature+Request&projects=&template=feature_request.yaml&title=USWDS+-+Feature%3A+%5BYOUR+TITLE%5D
+
 # this is for pages that don't have a permalink (primarily posts)
 permalink: /whats-new/updates/:year/:month/:day/:title/
 

_data/changelogs/component-accordion-checklist.yml

@@ -0,0 +1,9 @@
+title: Accordion checklist
+type: component
+changelogURL:
+items:
+  - date: 2024-01-17
+    summary: Added accessibility tests page.
+    affectsGuidance: true
+    githubPr: 2138
+    githubRepo: uswds-site

_data/changelogs/component-accordion.yml

@@ -2,6 +2,11 @@ title: Accordion
 type: component
 changelogURL:
 items:
+  - date: 2024-01-17
+    summary: Added WCAG compliance tag and accessibility test status section.
+    affectsGuidance: true
+    githubPr: 2138
+    githubRepo: uswds-site
   - date: 2023-11-20
     summary: Added `usa-icon` to the dependency list and removed `usa-list`.
     affectsGuidance: true

_data/changelogs/component-button-checklist.yml

@@ -0,0 +1,9 @@
+title: Button checklist
+type: component
+changelogURL:
+items:
+  - date: 2024-01-17
+    summary: Added accessibility tests page.
+    affectsGuidance: true
+    githubPr: 2138
+    githubRepo: uswds-site

_data/changelogs/component-button.yml

@@ -2,6 +2,11 @@ title: Button
 type: component
 changelogURL:
 items:
+  - date: 2024-01-17
+    summary: Added WCAG compliance tag and accessibility test status section.
+    affectsGuidance: true
+    githubPr: 2138
+    githubRepo: uswds-site
   - date: 2023-11-20
     summary: Updated summaries in the "Using the button component" section.
     affectsGuidance: true

_data/changelogs/component-link-checklist.yml

@@ -0,0 +1,9 @@
+title: Link checklist
+type: component
+changelogURL:
+items:
+  - date: 2024-01-17
+    summary: Added accessibility tests page.
+    affectsGuidance: true
+    githubPr: 2138
+    githubRepo: uswds-site

_data/changelogs/component-link.yml

@@ -2,6 +2,11 @@ title: Link
 type: component
 changelogURL:
 items:
+  - date: 2024-01-17
+    summary: Added WCAG compliance tag and accessibility test status section.
+    affectsGuidance: true
+    githubPr: 2138
+    githubRepo: uswds-site
   - date: 2023-11-20
     summary: Added `uswds-fonts` and `usa-icon` to list of dependencies.
     affectsGuidance: true

_data/checklists/_README.md

@@ -0,0 +1,62 @@
+# Creating checklists
+
+## Available data keys
+
+| Key                 | Description                              | Optional | Value type | Standard values                        | Displayed |
+| :------------------ | :--------------------------------------- | -------- | ---------- | -------------------------------------- | --------- |
+| title               | Component name                           | no       | string     | N/A                                    | No        |
+| component_status    | WCAG status for entire component         | no       | string     | pass, fail                             | Yes       |
+| summary             | Short description of the test            | no       | string     | N/A                                    | yes       |
+| summary_additional  | Additional description of the test       | no       | string     | N/A                                    | yes       |
+| test_status         | Outcome of the individual test           | no       | string     | pass, fail, conditional, exception     | yes       |
+| test_type           | Type of assistive technology used        | no       | string     | general, zoom, keyboard, screen_reader | yes       |
+| status_details      | Additional details about the status      | yes      | string     | N/A                                    | yes       |
+| github_issue_number | Related GitHub issue number              | yes      | number     | N/A                                    | Yes       |
+| github_issue_repo   | Related GitHub issue repo                | yes      | string     | uswds, uswds-site                      | Yes       |
+| version_tested      | The USWDS version number that was tested | no       | string     | N/A                                    | yes       |
+| wcag_criterion      | The related WCAG criterion number        | no       | string     | N/A                                    | yes       |
+
+## Creating a new checklist file
+
+1. Create a new .yml file in the _data/checklists directory.
+2. Give it a name that matches the component.name on the related component's checklist markdown file.
+3. Copy the following template into the file:
+```yaml
+title:
+component_status:
+test_items:
+# General tests
+  - summary:
+    summary_additional:
+    test_status:
+    test_type: general
+    version_tested:
+    wcag_criterion:
+# Zoom/screen magnification tests
+  - summary:
+    summary_additional:
+    test_status:
+    test_type: zoom
+    version_tested:
+    wcag_criterion:
+# Keyboard navigation tests
+  - summary:
+    summary_additional:
+    test_status:
+    test_type: keyboard
+    version_tested:
+    wcag_criterion:
+# Screen reader tests
+  - summary:
+    summary_additional:
+    test_status:
+    test_type: screen_reader
+    version_tested:
+    wcag_criterion:
+```
+4. Fill in the data according to the data table above.
+   Create a new data item for each test performed and group the items by the type of assistive technology used in the test.
+
+## Using .yml files
+
+ - Tab spacing matters in yaml files. Incorrect spacing can cause errors, so make sure your items line up.