Merge branch 'main' into cm-release-notes-update

.snyk

@@ -2707,8 +2707,8 @@ ignore:
         expires: '2022-01-27T21:29:25.295Z'
     - '*':
         reason: No available upgrade or patch
-        expires: 2023-12-30T19:33:21.268Z
-        created: 2023-11-30T19:33:21.304Z
+        expires: 2024-03-21T16:21:14.318Z
+        created: 2024-02-20T16:21:14.362Z
   SNYK-JS-AXIOS-1579269:
     - uswds > @frctl/fractal > @frctl/web > browser-sync > localtunnel > axios:
         reason: None given
@@ -3498,8 +3498,8 @@ ignore:
   SNYK-JS-UNSETVALUE-2400660:
     - '*':
         reason: No available upgrade or patch
-        expires: 2023-12-30T19:33:21.268Z
-        created: 2023-11-30T19:33:21.304Z
+        expires: 2024-03-21T16:21:11.452Z
+        created: 2024-02-20T16:21:11.490Z
   SNYK-JS-DECODEURICOMPONENT-3149970:
     - '*':
         reason: No available upgrade or patch
@@ -3523,8 +3523,8 @@ ignore:
   SNYK-JS-INFLIGHT-6095116:
     - '*':
         reason: No available upgrade or patch
-        expires: 2023-12-30T19:33:21.268Z
-        created: 2023-11-30T19:33:21.304Z
+        expires: 2024-03-21T16:21:17.293Z
+        created: 2024-02-20T16:21:17.327Z
 # patches apply the minimum changes required to fix a vulnerability
 patch:
   'npm:minimatch:20160620':

_components/accordion/accessibility.md

@@ -0,0 +1,13 @@
+---
+permalink: /components/accordion/accessibility-tests/
+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-accessibility'
+---
+
+{% include accessibility-tests/index.html %}

_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/accessibility-tests/
 title: Accordion
 type: component
 variants:

_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/accessibility.md

@@ -0,0 +1,13 @@
+---
+permalink: /components/button/accessibility-tests/
+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-accessibility'
+---
+
+{% include accessibility-tests/index.html %}

_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/accessibility-tests/
 changelog:
   key: component-button
 ---

_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/identifier/guidance/accessibility.md

@@ -1,3 +1,3 @@
 - **Use proper landmarks for each identifier section.** Each identifier section should be either a `section` or a `nav`, and include an appropriate `aria-label` property.
-- **Add an `alt` attribute to each logo image.** Use `[Agency shortname] logo` as the alt text for each logo image you add..
-- **Use `image` role for any SVG images.** Use `role="img"` with any SVG logo image.
+- **Add an `alt` attribute to each logo image.** Use `[Agency shortname] logo` as the alt text for each logo image you add.
+- **Use `image` role for any SVG images.** Use `role="img"` with any SVG logo image.

_components/link/accessibility.md

@@ -0,0 +1,13 @@
+---
+permalink: /components/link/accessibility-tests/
+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-accessibility'
+---
+
+{% 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/accessibility-tests/
 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/accessibility-tests/_README.md

@@ -0,0 +1,62 @@
+# Creating accessibility test 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/accessibility-tests directory.
+2. Give it a name that matches the component's name field in its respective accessibility.md 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.