USWDS-Site: Added radio button accessibility test page

_components/radio-buttons/accessibility-tests.md

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

_components/radio-buttons/radio-buttons.md

@@ -9,16 +9,8 @@ permalink: /components/radio-buttons/
 redirect_from:
 - /form-controls/09-radio-buttons/
 subnav:
-- text: Preview
-  href: '#radio-buttons-preview'
-- text: Code
-  href: '#radio-buttons-code'
-- text: Guidance
-  href: '#radio-buttons-guidance'
-- text: Package
-  href: '#radio-buttons-package'
-- text: Latest updates
-  href: '#changelog'
+- text: Radio button accessibility tests
+  href: /components/radio-buttons/accessibility-tests/
 title: Radio buttons
 type: component
 variants:

_data/accessibility-tests/radio-buttons.yml

@@ -0,0 +1,66 @@
+title: Radio buttons
+component_status: pass
+test_items:
+# General tests
+  - summary: Radio button labels are descriptive, brief and clear.
+    summary_additional: When you view radio buttons, 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
+  - summary: Touch target size for all clickable elements meets height and width requirements.
+    summary_additional: The size and spacing of the touch target are at least 24px wide and 24px tall.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 2.5.8
+  - summary: Visible instructions explain radio button requirements.
+    summary_additional: Each radio button group 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
+# Keyboard navigation tests
+  - summary: Radio button focus can be moved and selection can be selected or deselected.
+    summary_additional: When you use the spacebar and arrow keys on a keyboard, you can toggle between selections and clearly see when the choice is selected or not.
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.0
+    wcag_criterion: 3.2.1
+  - summary: Radio button focus follows logical content order.
+    summary_additional: When you tab through the radio button group 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: Radio buttons are still fully functional using only keystrokes.
+    summary_additional: When you use a keyboard to navigate to the radio button option, you are able to move focus, check and uncheck buttons, and move focus into and out of the radio group. If none of the radio buttons are checked, focus is set on the first radio button in the group.
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.0
+    wcag_criterion: 2.1.1
+  - summary: Focus indicator on radio button is clearly visible.
+    summary_additional: When you use a keyboard to focus on a radio button 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
+# Screen reader tests
+  - summary: Screen reader announces question before any radio button and then related elements.
+    summary_additional: When listening to the radio button using a screen reader, you hear the question related to the radio button read first. Then you will hear the radio button and label and its checked state.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.2
+    wcag_criterion: 4.1.2
+  - summary: Screen reader values for radio buttons match screen display.
+    summary_additional: When using a screen reader, you can hear the same value for the radio 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 number and focus position inside radio button group.
+    summary_additional: When you use a screen reader and navigate to a radio button group, you hear focus position, and how many other button options there are within that group.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 1.3.1

_data/changelogs/component-radio-buttons-accessibility.yml

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

_data/changelogs/component-radio-buttons.yml

@@ -2,6 +2,11 @@ title: Radio buttons
 type: component
 changelogURL:
 items:
+- date: 2024-09-18
+  summary: Added WCAG compliance tag and accessibility test status section.
+  affectsGuidance: true
+  githubPr: 2821
+  githubRepo: uswds-site
 - date: 2023-09-29
   summary: Updated radio and checkbox tile styling to have lighter borders.
   summaryAdditional: