USWDS-Site: Added combo box accessibility tests page

_components/combo-box/accessibility-tests.md

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

_components/combo-box/combo-box.md

@@ -35,16 +35,8 @@ permalink: /components/combo-box/
 redirect_from:
   - /form-controls/03-combo-box/
 subnav:
-- text: Preview
-  href: '#combo-box-preview'
-- text: Code
-  href: '#combo-box-code'
-- text: Guidance
-  href: '#combo-box-guidance'
-- text: Package
-  href: '#combo-box-package'
-- text: Latest updates
-  href: '#changelog'
+- text: Combo box accessibility tests
+  href: /components/combo-box/accessibility-tests/
 tags:
   - form
   - forms

_data/accessibility-tests/combo-box.yml

@@ -0,0 +1,97 @@
+title: Combo box
+component_status: pass
+test_items:
+# General tests
+  - summary: Combo box works on mobile devices. 
+    summary_additional: On mobile devices and tablets, combo box should work in both portrait and landscape orientation with no loss of functionality.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 1.3.4
+  - summary: Color is not the only method used to convey meaning. 
+    summary_additional: When viewing a combo box, you never have to rely only on color to understand content.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 1.4.1
+  - summary: Text content inside the combo box has proper contrast.
+    summary_additional: When viewing the combo box, the text content within it has 4.5:1 contrast for both selected and deselected states.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 1.4.3
+  - summary: Combo box icon elements have proper contrast.
+    summary_additional: When you use a color contrast analyzer, the contrast between the clear content "x" button and dropdown arrow is at least 3:1 from their respective surrounding backgrounds.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 1.4.11
+  - summary: Combo box has appropriate labels and instructions.
+    summary_additional: When you view or interact with the combo box component on your page, it is accompanied by a descriptive label.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 2.4.6
+  - summary: Page context does not change before form submission.
+    summary_additional: Unless notified beforehand, page content stays the same until you submit the form. If selection results are opened within a new window, an advanced warning should be given alongside combo box instructions.
+    test_status: conditional
+    test_type: general
+    version_tested: 3.8.1
+    wcag_criterion: 3.2.2
+# Zoom/screen magnification tests
+  - summary: Using zoom does not obstruct the combo box. 
+    summary_additional: When you zoom to 400%, you can see the combo box input and initial dropdown options. It does not overlap with other content and no scrolling is needed to see the dropdown has opened.
+    test_status: pass
+    test_type: zoom
+    version_tested: 3.8.0
+    wcag_criterion: 1.4.10
+# Keyboard navigation tests
+  - summary: Focus indicator is clearly visible around combo box.
+    summary_additional: When you tab into a combo box, a visible outline or other clear indication of focus appears around the combo box and options within.
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.0
+    wcag_criterion: 2.4.7
+  - summary: Tabbing into the combo box doesn't trigger a change of context.
+    summary_additional: When using a keyboard to access the combo box, there is no change until you activate with enter key or spacebar.
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.0
+    wcag_criterion: 3.2.1
+  - summary: Keyboard actions can access all combo box functionality.
+    summary_additional: You can type, select, clear input and perform all other functions in a combo box element using only your keyboard.
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.0
+    wcag_criterion: 2.1.1
+# Screen reader tests
+  - summary: Screen reader announces type and number of options.
+    summary_additional: When interacting with the combo box with a screen reader, you hear the component's label, the option names, and how many options there are.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 1.3.1
+  - summary: Screen reader announces "combo box" upon initial interaction. 
+    summary_additional: When you tab onto a combo box with a screen reader, you hear "combo box" along with instructions needed to complete the combo box.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 1.3.5
+  - summary: Screen readers identify combo boxes the same way when more than one is on a page.
+    summary_additional: When you tab to a combo box on a page that has other combo boxes, you will hear "combo box" every time you tab to a new combo box.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 3.2.4
+  - summary: Combo box offers visual and auditory instructions.
+    summary_additional: When you use the combo box component, you hear details about the purpose of the input with a screen reader and see them on the page. The instructions are specific to the form's intent (e.g., "Select a state", "Select a fruit").
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 3.3.2
+  - summary: Screen reader announces label, role, value, and controls for combo box. 
+    summary_additional: When using a screen reader with a combo box, you hear the label of the combo box, the role and the state. For example, the label is announced as "Select an option", the role is announced as "combo box", and the value is announced as "expanded". 
+    test_status: conditional
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 4.1.2

_data/changelogs/component-combo-box-accessibility.yml

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

_data/changelogs/component-combo-box.yml

@@ -2,6 +2,11 @@ title: Combo box
 type: component
 changelogURL:
 items:
+  - date: 2024-09-18
+    summary: Added WCAG compliance tag and accessibility test status section.
+    affectsGuidance: true
+    githubPr: 2811
+    githubRepo: uswds-site
   - date: 2024-03-13
     summary: Added known issues section.
     summaryAdditional: