Skip to content

Commit 353e56c

Browse files
annepetersenannepetersen
authored
Merge pull request #3156 from uswds/mh/publish-input-prefix-checklist-3125
USWDS-Site: Add accessibility test results for input prefix or suffix component
2 parents cd25527 + 2b5ff0b commit 353e56c

File tree

5 files changed

+107
-11
lines changed

5 files changed

+107
-11
lines changed

‎_components/input-prefix-suffix/accessibility-tests.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
permalink: /components/input-prefix-suffix/accessibility-tests/
3+
layout: accessibility-test
4+
component:
5+
name: input prefix suffix
6+
title: Input prefix/suffix accessibility tests
7+
category: Components
8+
lead: Any USWDS input prefix or suffix component should pass these manual accessibility tests.
9+
changelog:
10+
key: 'component-input-prefix-suffix-accessibility'
11+
---
12+

‎_components/input-prefix-suffix/input-prefix-suffix.md‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,16 @@ component:
88
lead: Use input prefixes and suffixes to show symbols or abbreviations that help users enter the right type of information in a form’s text input.
99
permalink: /components/input-prefix-suffix/
1010
subnav:
11-
- text: Preview
12-
href: '#input-prefix-suffix-preview'
13-
- text: Code
14-
href: '#input-prefix-suffix-code'
15-
- text: Guidance
16-
href: '#input-prefix-suffix-guidance'
17-
- text: Package
18-
href: '#input-prefix-suffix-package'
19-
- text: Latest updates
20-
href: '#changelog'
11+
- text: Input prefix or suffix accessibility tests
12+
href: /components/input-prefix-suffix/accessibility-tests/
2113
tags:
2214
- input
2315
- form controls
2416
- credit card
2517
- masking
2618
- image
2719
- icon
28-
title: Input prefix or suffix
20+
title: Input prefix/suffix
2921
type: component
3022
variants:
3123
- variant: "`.usa-input-group--error`"

‎_data/accessibility-tests/input-prefix-suffix.yml‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
title: Input prefix suffix
2+
component_status: pass
3+
test_items:
4+
# General tests
5+
- summary: Display is consistent in mobile views.
6+
summary_additional: When you view the input prefix-suffix component on mobile devices, it displays in both portrait and landscape orientation with no loss of functionality.
7+
test_status: pass
8+
test_type: general
9+
version_tested: 3.11.0
10+
wcag_criterion: 1.3.4
11+
- summary: Color alone is not used to convey information.
12+
summary_additional: When viewing an input prefix-suffix, you do not have to rely on color alone to understand part of its meaning.
13+
test_status: pass
14+
test_type: general
15+
version_tested: 3.11.0
16+
wcag_criterion: 1.4.1
17+
- summary: Input prefix suffix meets color contrast requirements.
18+
summary_additional: When you view the input prefix suffix on a page and use ANDI or color contrast analyzer to look at the hex colors, contrast between the button background and text is at least 4.5:1.
19+
test_status: pass
20+
test_type: general
21+
version_tested: 3.11.0
22+
wcag_criterion: 1.4.3
23+
- summary: Input prefix-suffix elements have proper contrast.
24+
summary_additional: When you use a color contrast analyzer, the contrast between the outline of the text field, text inputs, and icons are at least 3:1 from their respective surrounding backgrounds.
25+
test_status: pass
26+
test_type: general
27+
version_tested: 3.11.0
28+
wcag_criterion: 1.4.11
29+
- summary: Labels or instructions are provided.
30+
summary_additional: Clear, concise instructions on the type and format of required data is visible above the input prefix-suffix.
31+
test_status: pass
32+
test_type: general
33+
version_tested: 3.11.0
34+
wcag_criterion: 3.3.2
35+
# Zoom/screen magnification tests
36+
- summary: Content remains visible and functional when screen is magnified.
37+
summary_additional: When you zoom in to 200%, text stays in position inside the text field, and the input prefix-suffix icon or text retains its position inside the field.
38+
test_status: pass
39+
test_type: zoom
40+
version_tested: 3.11.0
41+
wcag_criterion: 1.4.4
42+
# Keyboard navigation tests
43+
- summary: Field can be accessed with keyboard navigation.
44+
summary_additional: Using only a keyboard, you're able to tab into and out of the text input field associated with the input prefix-suffix.
45+
test_status: pass
46+
test_type: keyboard
47+
version_tested: 3.11.0
48+
wcag_criterion: 2.1.1
49+
- summary: Input prefix-suffix does not trap keyboard focus.
50+
summary_additional: When you access the text input area with a keyboard, you can easily move in and out to get to other content.
51+
test_status: pass
52+
test_type: keyboard
53+
version_tested: 3.11.0
54+
wcag_criterion: 2.1.2
55+
- summary: Focus indicators are clearly visible.
56+
summary_additional: When you use a keyboard to navigate through the input prefix-suffix, there will be a visible outline or other clear indication around each element where the focus is.
57+
test_status: pass
58+
test_type: keyboard
59+
version_tested: 3.11.0
60+
wcag_criterion: 2.4.7
61+
# Screen reader tests
62+
- summary: Images are hidden from screen readers.
63+
summary_additional: When using a screen reader, you hear no indication nor description of an icon.
64+
test_status: conditional
65+
test_type: screen_reader
66+
version_tested: 3.11.0
67+
wcag_criterion: 1.1.1
68+
- summary: Screen reader announces text, label or supportive text.
69+
summary_additional: When interacting with the input prefix-suffix with a screen reader, you hear the field labels, text related to the field, and whether or not the field is required.
70+
test_status: pass
71+
test_type: screen_reader
72+
version_tested: 3.11.0
73+
wcag_criterion: 1.3.1
74+
- summary: Each icon has a consistent meaning across pages.
75+
summary_additional: When you use a screen reader or view a input prefix-suffix icon, the icon’s meaning is the same across all pages.
76+
test_status: pass
77+
test_type: screen_reader
78+
version_tested: 3.11.0
79+
wcag_criterion: 3.2.4

‎_data/changelogs/component-input-prefix-suffix-accessibility.yml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
title: Input prefix or suffix accessibility tests
2+
type: component
3+
items:
4+
- date: 2025-04-24
5+
summary: Added accessibility tests page.
6+
affectsGuidance: true
7+
githubPr: 3156
8+
githubRepo: uswds-site

‎_data/changelogs/component-input-prefix-suffix.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ title: Input prefix or suffix
22
type: component
33
changelogURL:
44
items:
5+
- date: 2025-04-24
6+
summary: Added accessibility test results page.
7+
affectsGuidance: true
8+
githubPr: 3156
9+
githubRepo: uswds-site
510
- date: 2024-12-18
611
summary: Moved `.usa-input-group--[width]` classes into the `usa-input-prefix-suffix` package from `usa-form`.
712
summaryAdditional: These classes can now be used without the `usa-form` package and `.usa-form` parent element.

0 commit comments

Comments
 (0)