USWDS-Site: Add search accessibility tests page

_components/search/accessibility-tests.md

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

_components/search/search.md

@@ -10,16 +10,8 @@ redirect_from:
 - /search-bar/
 - /components/search-bar/
 subnav:
-- text: Preview
-  href: '#search-preview'
-- text: Code
-  href: '#search-code'
-- text: Guidance
-  href: '#search-guidance'
-- text: Package
-  href: '#search-package'
-- text: Latest updates
-  href: '#changelog'
+- text: Search accessibility tests
+  href: /components/search/accessibility-tests/
 title: Search
 type: component
 tags:

_data/accessibility-tests/search.yml

@@ -0,0 +1,175 @@
+title: Search
+component_status: pass
+test_items:
+# General tests
+  - summary: Color is not the only method used to convey the search button's meaning.
+    summary_additional: When using the search button, "search" text or a magnifying glass icon convey the button's meaning.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 1.4.1
+  - summary: Search button background and text meet color contrast requirements. 
+    summary_additional: |
+      When you use ANDI color contrast analyzer on the search text button, the contrast between background and lettering is at least 4.5:1.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 1.4.3
+  - summary: Search button background and icon meet color contrast requirements.
+    summary_additional: |
+      When you use ANDI color contrast analyzer on the search icon button, the contrast between the background and icon is at least 3:1.
+    test_status: conditional
+    test_type: general
+    version_tested: 3.7.1
+    wcag_criterion: 1.4.11
+  - summary: The width of the search button is at least 44 pixels.
+    summary_additional: |
+      When you select "inspect element" to review the button's size, you can see the total width of the button is at least 44 pixels.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 2.5.5
+  - summary: Search field and button views adjust on mobile.
+    summary_additional: |
+      When you rotate between portrait mode and landscape mode on a mobile device, the search button and field are not restricted to a single view.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 1.3.4
+  - summary: Page context does not change before search submission.
+    summary_additional: |
+      Updating page context or search results before expected can cause confusion for users of assistive technology. 
+      If search results are opened within a new window, advanced warning should be given alongside search 
+      instructions in the aria-label or button text.
+    test_status: conditional
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 3.2.2
+  - summary: The site search feature appears in the same location on every page of the website.
+    summary_additional: |
+      When you navigate to different pages on the website, the search feature is always in the same place.
+    test_status: conditional
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 3.2.3
+  - summary: Magnifying glass icon is only used to indicate "search" in every instance on the site.
+    summary_additional: |
+      When you see or tab to the magnifying glass icon anywhere on the site, it will always and only be 
+      used to indicate search.
+    test_status: conditional
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 3.2.4
+  - summary: Search instructions are visible, audible, and specific for intent.
+    summary_additional: |
+      When you use the search feature, you may hear instructions with a screen reader or see them on the page. 
+      Instructions may be specific depending on intent (e.g., search this site, search this directory).
+    test_status: conditional
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 3.3.2
+  - summary: Search instructions are persistent.
+    summary_additional: |
+      When using the search feature, the instructions remain on screen and do not disappear from view.
+    test_status: conditional
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 3.3.2
+  - summary: The label "search" always has the same meaning and function.
+    summary_additional: |
+      You can hear "search" when tabbing over the search button with a screen reader; you use the word "search" as a voice command to activate search. 
+      You can see the word "search" or a magnifying glass icon when looking at the search button.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 2.5.3
+  - summary: When viewing a site, a search feature is not the only means for site navigation.
+    summary_additional: |
+      When you navigate the website, there are at least two methods to reach a webpage.
+      You may choose to use search to navigate, along with using header navigation,
+      site map or other navigation elements.
+    test_status: conditional
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 2.4.5
+# Zoom/screen magnification tests
+  - summary: Using zoom does not obstruct the text field or search button.
+    summary_additional: |
+      When you zoom to 200%, you can see the text field and button. They do not overlap with other content, and no scrolling is needed.
+    test_status: pass
+    test_type: zoom
+    version_tested: 3.8.0
+    wcag_criterion: 1.4.10
+# Keyboard navigation tests
+  - summary: Search input field and search button do not trap focus.
+    summary_additional: |
+      When you use a keyboard to tab from search into other interactive elements, you don't get stuck in the search button or text input field.
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.0
+    wcag_criterion: 2.1.2
+  - summary: A mouse is not required to perform actions in the search component. 
+    summary_additional: |
+      When you use a keyboard to tab into the search component, you can type, delete, select and deselect the search 
+      button, and perform the search.
+    test_status: exception
+    status_details: | 
+      Warning: Some browsers show an "x" that lets users delete text in the search field. This is not a result of USWDS; it is built in browser behavior. 
+      Keyboard tabbing will not focus on the "x," but users can use the backspace key to delete text from the search field.
+    github_issue_number: 5834
+    github_issue_repo: uswds
+    test_type: keyboard
+    version_tested: 3.8.0
+    wcag_criterion: 2.1.1
+  - summary: Focus indicators are clearly visible.
+    summary_additional: When you use a keyboard to tab into a button, the button has 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: The focus indicator has proper size, perimeter and contrast.
+    summary_additional: |
+      When you use a keyboard to tab into the search component, the focus indicator is clearly visible with the 
+      proper size, perimeter, and contrast.
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.0
+    wcag_criterion: 2.4.13
+# Screen reader tests
+  - summary: Input search field announces purpose.
+    summary_additional: |
+      When you tab into the text input search field, you hear "search edit," so you know it's a search field you can type into.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 1.3.5
+  - summary: Icon and button announce search upon initial interaction.
+    summary_additional: |
+      When tabbing onto the search icon and button with your screen reader, you hear the words "search button."
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 1.3.6
+  - summary: Screen reader announces elements to match visual order on screen. 
+    summary_additional: |
+      When using a screen reader, the search field and button are announced in the same order that they appear on the page.
+    test_status: conditional
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 1.3.2
+  - summary: You hear the roles "button" and "text edit."
+    summary_additional: |
+      When you use a screen reader to search and you tab to the search button, you hear the role "button." 
+      When you tab to the text input field, you hear "text edit," which indicates the role of the field.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 4.1.2
+  - summary: You hear the labels for "search" and "search button."
+    summary_additional: |
+      When you use a screen reader to search, the label for the text field says "search." 
+      The button label is called "search button."
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 2.4.6

_data/changelogs/component-search-accessibility.yml

@@ -0,0 +1,8 @@
+title: Search accessibility tests
+type: component
+items:
+- date: NNNN-NN-NN
+  summary: Added accessibility tests page.
+  affectsGuidance: true
+  githubPr: 2694
+  githubRepo: uswds-site

_data/changelogs/component-search.yml

@@ -2,6 +2,11 @@ title: Search
 type: component
 changelogURL:
 items:
+- date: NNNN-NN-NN
+  summary: Added WCAG compliance tag and accessibility test status section
+  affectsGuidance: true
+  githubPr: 2694
+  githubRepo: uswds-site
 - date: 2023-06-09
   summary: Improved legibility in forced colors mode.
   summaryAdditional: Adds a consistent border in forced colors mode.

_includes/accessibility-tests/wcag-details.html

@@ -17,6 +17,11 @@
   {% assign criterion_name = "Meaningful sequence" %}
   {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#meaningful-sequence" %}
 {% endif %}
+{% if item.wcag_criterion == "1.3.4" %}
+  {% assign criterion_level = "AA" %}
+  {% assign criterion_name = "Orientation" %}
+  {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#orientation" %}
+{% endif %}
 {% if item.wcag_criterion == "1.3.5" %}
   {% assign criterion_level = "AA" %}
   {% assign criterion_name = "Identify input purpose" %}
@@ -77,11 +82,16 @@
   {% assign criterion_name = "Focus order" %}
   {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#focus-order" %}
 {% endif %}
+{% if item.wcag_criterion == "2.4.5" %}
+  {% assign criterion_level = "AA" %}
+  {% assign criterion_name = "Multiple ways" %}
+  {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#multiple-ways" %}
+{% endif %}
 {% if item.wcag_criterion == "2.4.6" %}
   {% assign criterion_level = "AA" %}
   {% assign criterion_name = "Headings and labels" %}
   {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#headings-and-labels" %}
-  {% endif %}
+{% endif %}
 {% if item.wcag_criterion == "2.4.7" %}
   {% assign criterion_level = "AA" %}
   {% assign criterion_name = "Focus visible" %}
@@ -92,6 +102,11 @@
   {% assign criterion_name = "Focus appearance (WCAG 2.2)" %}
   {% assign criterion_url = "https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html" %}
 {% endif %}
+{% if item.wcag_criterion == "2.5.3" %}
+  {% assign criterion_level = "A" %}
+  {% assign criterion_name = "Label in name" %}
+  {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#label-in-name" %}
+{% endif %}
 {% if item.wcag_criterion == "2.5.5" %}
   {% assign criterion_level = "AAA" %}
   {% assign criterion_name = "Target size" %}
@@ -102,6 +117,16 @@
   {% assign criterion_name = "Reading level" %}
   {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#reading-level" %}
 {% endif %}
+{% if item.wcag_criterion == "3.2.2" %}
+  {% assign criterion_level = "A" %}
+  {% assign criterion_name = "On input" %}
+  {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#on-input" %}
+{% endif %}
+{% if item.wcag_criterion == "3.2.3" %}
+  {% assign criterion_level = "AA" %}
+  {% assign criterion_name = "Consistent navigation" %}
+  {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#consistent-navigation" %}
+{% endif %}
 {% if item.wcag_criterion == "3.2.4" %}
   {% assign criterion_level = "AA" %}
   {% assign criterion_name = "Consistent identification" %}