From c47033af7f81bdda5d64a08df0549fdc14b664ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sheev=20Dav=C3=A9?= Date: Wed, 22 Jan 2025 13:23:05 -0800 Subject: [PATCH 01/11] Update pull_request_template.md added more a11y specific checks --- .github/pull_request_template.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 7ffbbc290..a659829b2 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -23,5 +23,7 @@ Please enter a detailed description here. ## A11y Checks (if applicable) -* Conduct automated tests through [AxeDevTools](https://www.deque.com/axe/devtools/) and [WAVE](https://wave.webaim.org/) +* Double check work is getting picked up by the automated E2E tests +* Conduct browser-based tests through [AxeDevTools](https://www.deque.com/axe/devtools/) and [WAVE](https://wave.webaim.org/) * Review the [Manual Checklist](https://docs.google.com/document/d/192bBXStebdXWtYhZQ73qaWMJhGcuSB1W6c9YBXhWZvc/edit?usp=sharing) +* Make sure there are no linting errors in VSCode or other IDE of choice From 4e335561e338a98fd54e9028ba806e21d3babb46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sheev=20Dav=C3=A9?= Date: Thu, 23 Jan 2025 11:57:37 -0800 Subject: [PATCH 02/11] Update issue_template.yml added "This includes items related to accessibility." to 3 sections --- .github/ISSUE_TEMPLATE/issue_template.yml | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/issue_template.yml b/.github/ISSUE_TEMPLATE/issue_template.yml index 576af0095..d5ca9c768 100644 --- a/.github/ISSUE_TEMPLATE/issue_template.yml +++ b/.github/ISSUE_TEMPLATE/issue_template.yml @@ -37,7 +37,7 @@ body: - type: textarea id: acceptanceCriteria attributes: - label: "Detailed condition or criteria that must be met for the user story to be considered complete." + label: "Detailed condition or criteria that must be met for the user story to be considered complete. This includes items related to accessibility." description: "List the acceptance criteria for the user story." validations: required: true @@ -59,7 +59,7 @@ body: - type: textarea id: dependencies attributes: - label: "List any dependencies that need to be resolved before starting or completing this user story." + label: "List any dependencies that need to be resolved before starting or completing this user story. This includes items related to accessibility." description: "Specify any dependencies related to the user story." validations: required: false @@ -70,7 +70,7 @@ body: - type: textarea id: notes attributes: - label: "Any additional information or context that might be useful for the team." + label: "Any additional information or context that might be useful for the team. This includes items related to accessibility." description: "Provide any extra notes or context for the user story." validations: required: false From 22fcc703f5f877cd0d918d2e901bffb78d9355ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sheev=20Dav=C3=A9?= Date: Mon, 27 Jan 2025 12:53:47 -0800 Subject: [PATCH 03/11] Update issue_template.yml --- .github/ISSUE_TEMPLATE/issue_template.yml | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/issue_template.yml b/.github/ISSUE_TEMPLATE/issue_template.yml index d5ca9c768..ca458b6a5 100644 --- a/.github/ISSUE_TEMPLATE/issue_template.yml +++ b/.github/ISSUE_TEMPLATE/issue_template.yml @@ -37,7 +37,7 @@ body: - type: textarea id: acceptanceCriteria attributes: - label: "Detailed condition or criteria that must be met for the user story to be considered complete. This includes items related to accessibility." + label: "Detailed condition or criteria that must be met for the user story to be considered complete." description: "List the acceptance criteria for the user story." validations: required: true @@ -59,18 +59,29 @@ body: - type: textarea id: dependencies attributes: - label: "List any dependencies that need to be resolved before starting or completing this user story. This includes items related to accessibility." + label: "List any dependencies that need to be resolved before starting or completing this user story." description: "Specify any dependencies related to the user story." validations: required: false + - type: markdown + attributes: + value: '**Accessibility:**' + - type: textarea + id: notes + attributes: + label: "List any specific accessibility guidance or tests that need to be considered for this user story." + description: "List what type of accessibility tests need to pass." + validations: + required: false + - type: markdown attributes: value: '**Notes:**' - type: textarea id: notes attributes: - label: "Any additional information or context that might be useful for the team. This includes items related to accessibility." + label: "Any additional information or context that might be useful for the team." description: "Provide any extra notes or context for the user story." validations: required: false From 7776f9900a70555ac0901593eeb95b2f1a784402 Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Mon, 27 Jan 2025 19:15:37 -0800 Subject: [PATCH 04/11] added id and required field --- .../uswds/_uswds-theme-custom-styles.scss | 4 ++++ .../components/components/input/template.njk | 6 ++++-- app/templates/components/textbox.html | 20 +++++++++---------- app/templates/views/edit-sms-template.html | 5 ++++- app/templates/views/send-test.html | 4 ++-- app/templates/views/templates/template.html | 4 ---- 6 files changed, 23 insertions(+), 20 deletions(-) diff --git a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss index 0bb1aab7e..ebce95061 100644 --- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss +++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss @@ -1024,3 +1024,7 @@ nav.nav { font-size: units(3); font-weight: bold; } + +.form-control-error { + border: 4px solid #b10e1e +} diff --git a/app/templates/components/components/input/template.njk b/app/templates/components/components/input/template.njk index 7f5634651..4ea649dce 100644 --- a/app/templates/components/components/input/template.njk +++ b/app/templates/components/components/input/template.njk @@ -34,7 +34,7 @@ attributes: params.errorMessage.attributes, html: params.errorMessage.html, text: params.errorMessage.text, - visuallyHiddenText: params.errorMessage.visuallyHiddenText + visuallyHiddenText: params.errorMessage.visuallyHiddenText, }) | indent(2) | trim }} {% endif %} + {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%} + {%- if params.required %} required{% endif %} + /> diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html index 3e479cbce..fa92d0cf8 100644 --- a/app/templates/components/textbox.html +++ b/app/templates/components/textbox.html @@ -16,19 +16,9 @@ placeholder='' ) %}
- {% if field.errors %} - - {% endif %}
{% endif %} + {% if field.errors %} + + Error: + {% if not safe_error_message %}{{ field.errors[0] }}{% else %}{{ field.errors[0]|safe }}{% endif %} + + {% endif %} {% if highlight_placeholders or autosize %} @@ -59,6 +55,8 @@ data_highlight_placeholders='true' if highlight_placeholders else 'false', rows=rows|string, placeholder=placeholder, + aria_describedby=field.name+"-error", + required='required' if required else None, **kwargs ) }} {% if suffix %} diff --git a/app/templates/views/edit-sms-template.html b/app/templates/views/edit-sms-template.html index 97eac73dc..8ef41bdb2 100644 --- a/app/templates/views/edit-sms-template.html +++ b/app/templates/views/edit-sms-template.html @@ -32,6 +32,8 @@
{{ form.name(param_extensions={ "extra_form_group_classes": "margin-bottom-2", + "id": "name", + "required": True, "hint": {"text": "Your recipients will not see this"} }) }} {{ textbox( @@ -41,7 +43,8 @@ hint=content_hint, rows=5, extra_form_group_classes='margin-bottom-1', - placeholder='Edit me! Check out the Personalization section below for details on cool ((stuff)) you can do with your messages!' + placeholder='Edit me! Check out the Personalization section below for details on cool ((stuff)) you can do with your messages!', + required=True ) }} {% if current_user.platform_admin %} {{ form.process_type }} diff --git a/app/templates/views/send-test.html b/app/templates/views/send-test.html index 720849ae6..be3b32a9a 100644 --- a/app/templates/views/send-test.html +++ b/app/templates/views/send-test.html @@ -37,8 +37,8 @@ data_kwargs={'force-focus': True} ) %}
-