Merge pull request #2963 from uswds/rc-file-input-checklist

USWDS-Site: Added file input accessibility test page

_components/file-input/accessibility-tests.md

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

_components/file-input/file-input.md

@@ -7,19 +7,11 @@ component:
 lead: File input allows users to attach one or multiple files.
 permalink: /components/file-input/
 redirect_from:
-- /form-controls/08-file-input/
+  - /form-controls/08-file-input/
 type: component
 subnav:
-- text: Preview
-  href: '#file-input-preview'
-- text: Code
-  href: '#file-input-code'
-- text: Guidance
-  href: '#file-input-guidance'
-- text: Package
-  href: '#file-input-package'
-- text: Latest updates
-  href: '#changelog'
+  - text: File input accessibility tests
+    href: /components/file-input/accessibility-tests/
 tags:
   - document
   - upload

_data/accessibility-tests/file-input.yml

@@ -0,0 +1,103 @@
+title: File input
+component_status: pass
+test_items:
+  # General tests
+  - summary: File input works on mobile devices.
+    summary_additional: When you use a mobile device or tablets, file inputs should work in both portrait and landscape views 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 you view the file input component, focus indicators, text labels, field descriptions and messaging all help establish meaning.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 1.4.1
+  - summary: File input text meets color contrast requirements.
+    summary_additional: When you use a color contrast checker to view the file input, contrast between the text color and background color is at least 4.5:1.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 1.4.3
+  - summary: File input elements have proper contrast.
+    summary_additional: When you use a color contrast analyzer, the contrast between the file input and all of its elements 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: Error text indicates an incorrect file type.
+    summary_additional: When you drag an incorrect file type into the file upload box, text appears describing the error.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 3.3.1
+  - summary: Instructions for file type and use are present.
+    summary_additional: When you view a file input box, you see clear, brief instructions for selecting and uploading the correct file type.
+    test_status: pass
+    test_type: general
+    version_tested: 3.8.0
+    wcag_criterion: 3.3.2
+  # Zoom/screen magnification tests
+  - summary: File input box is visible and functional when screen is magnified.
+    summary_additional: When you zoom in to 200%, the file input box and content remain visible and retain functionality.
+    test_status: pass
+    test_type: zoom
+    version_tested: 3.8.0
+    wcag_criterion: 1.4.4
+  # Keyboard navigation tests
+  - summary: Focus indicator is clearly visible.
+    summary_additional: When you use a keyboard to focus on a file input box you will see a visible outline or other clear indication of focus.
+    test_status: exception
+    status_details: The focus indicator is clearly visible, but the focus indicator wraps around both the "Drag files" area and the "choose from folder" action link at the same time. To meet user expectations, these actions should be distinct focusable elements.
+    github_issue_number: 5616
+    github_issue_repo: uswds
+    test_type: keyboard
+    version_tested: 3.8.0
+    wcag_criterion: 2.4.7
+  - summary: File can be input with only a keyboard.
+    summary_additional: You can successfully upload a file using only a keyboard. No mouse or dragging action is required.
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.0
+    wcag_criterion: 2.5.7
+  - summary: Content doesn't change until the user takes an action to change it.
+    summary_additional: When you access the file input with a keyboard, content stays the same until you use keys to make changes.
+    test_status: pass
+    test_type: keyboard
+    version_tested: 3.8.0
+    wcag_criterion: 3.2.2
+  # Screen reader tests
+  - summary: Screen reader announces file input.
+    summary_additional: Screen reader announces file input. When you navigate with arrow keys and the tab key while using a screen reader, you hear the prompt to “drag file here or choose from folder” and you hear any related hints, instructions, or errors.
+    test_status: exception
+    status_details: The file input appropriately announces the component instructions and hints to the screen reader. However, it does not announce an error message when an invalid file type is added.
+    github_issue_number: 6157
+    github_issue_repo: uswds
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 1.3.1
+  - summary: Fields and labels are read in the same order that they appear on the page.
+    summary_additional: When you use a screen reader and navigate through file input labels and fields, you hear each text label and field announced in the same order in which they appear on the page.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 1.3.2
+  - summary: File input field announces purpose.
+    summary_additional: When you tab into the file input using a screen reader, you hear messaging that helps you identify where you need to input the file for upload.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 1.3.5
+  - summary: Screen reader announces all labels.
+    summary_additional: When you use a screen reader and navigate to a file input using arrow and tab keys, you hear labels and status messaging for selection state.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 2.4.6
+  - summary: Screen readers identify file input boxes the same way when more than one is on a page.
+    summary_additional: When you tab to a file input on a page that has other file inputs, you will hear "file input" every time you tab into a new one.
+    test_status: pass
+    test_type: screen_reader
+    version_tested: 3.8.0
+    wcag_criterion: 3.2.4

_data/changelogs/component-file-input-accessibility.yml

@@ -0,0 +1,8 @@
+title: File input accessibility tests
+type: component
+items:
+  - date: 2024-11-19
+    summary: Added accessibility tests page.
+    affectsGuidance: true
+    githubPr: 2963
+    githubRepo: uswds-site

_data/changelogs/component-file-input.yml

@@ -2,8 +2,13 @@ title: File input
 type: component
 changelogURL:
 items:
+  - date: 2024-11-19
+    summary: Added WCAG compliance tag and accessibility test status section.
+    affectsGuidance: true
+    githubPr: 2963
+    githubRepo: uswds-site
   - date: 2024-11-13
-    summary:  Fixed a bug that caused image previews to break when a Content Security Policy is enabled.
+    summary: Fixed a bug that caused image previews to break when a Content Security Policy is enabled.
     summaryAdditional: The component now uses event listeners in place of inline JavaScript to handle error states.
     affectsJavascript: true
     githubPr: 5997
@@ -24,7 +29,8 @@ items:
     versionUswds: 3.5.0
   - date: 2023-06-09
     summary: Improved the file input experience for voice command and screen reader users.
-    summaryAdditional: Voice command users can now interact with the component by speaking the visible instructions text.
+    summaryAdditional:
+      Voice command users can now interact with the component by speaking the visible instructions text.
       Additionally, screen reader users now have access to both the instructions text
       and the file selection status.
     affectsAccessibility: true

_includes/accessibility-tests/wcag-details.html

@@ -152,6 +152,11 @@
   {% assign criterion_name = "Focus Not Obscured (Minimum) (WCAG 2.2)" %}
   {% assign criterion_url = "https://www.w3.org/TR/WCAG22/#focus-not-obscured-minimum" %}
 {% endif %}
+{% if item.wcag_criterion == "2.5.7" %}
+  {% assign criterion_level = "AA" %}
+  {% assign criterion_name = "Dragging movements (WCAG 2.2)" %}
+  {% assign criterion_url = "https://www.w3.org/TR/WCAG22/#dragging-movements" %}
+{% endif %}
 {% if item.wcag_criterion == "2.5.8" %}
   {% assign criterion_level = "AA" %}
   {% assign criterion_name = "Target Size (WCAG 2.2)" %}
@@ -206,4 +211,9 @@
   {% assign criterion_level = "A" %}
   {% assign criterion_name = "Name, role, value" %}
   {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#name-role-value" %}
-{% endif %}
+{% endif %}
+{% if item.wcag_criterion == "4.1.3" %}
+  {% assign criterion_level = "AA" %}
+  {% assign criterion_name = "Status Messages" %}
+  {% assign criterion_url = "https://www.w3.org/TR/WCAG21/#status-messages" %}
+{% endif %}