2913: Update domain request screenreader outputs [ES] #3193

erinysong · 2024-12-05T23:56:55Z

Ticket

Resolves #2913

Changes

Add screenreader output changes included in ticket. Purpose of your request domain screen reader output #2914 was resolved in a separate PR before it was decided we'd put all our subissues in a single PR

Context for reviewers

Setup

With org model feature turned off, go to a domain request form and verify that all screenreader outputs match the subissues.

Code Review Verification Steps

As the original developer, I have

Satisfied acceptance criteria and met development standards

Met the acceptance criteria, or will meet them in a subsequent PR
Created/modified automated tests - NA
Update documentation in READMEs and/or onboarding guide - NA

Ensured code standards are met (Original Developer)

If any updated dependencies on Pipfile, also update dependencies in requirements.txt. - NA
Interactions with external systems are wrapped in try/except
Error handling exists for unusual or missing values

Validated user-facing changes (if applicable)

Tag @dotgov-designers in this PR's Reviewers for design review. If code is not user-facing, delete design reviewer checklist
Verify new pages have been added to .pa11yci file so that they will be tested with our automated accessibility testing
Checked keyboard navigability
Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)

As a code reviewer, I have

Reviewed, tested, and left feedback about the changes

Pulled this branch locally and tested it
Verified code meets all checks above. Address any checks that are not satisfied
Reviewed this code and left comments. Indicate if comments must be addressed before code is merged
Checked that all code is adequately covered by tests
Verify migrations are valid and do not conflict with existing migrations

Validated user-facing changes as a developer

Note: Multiple code reviewers can share the checklists above, a second reviewer should not make a duplicate checklist. All checks should be checked before approving, even those labeled N/A.

New pages have been added to .pa11yci file so that they will be tested with our automated accessibility testing
Checked keyboard navigability
Meets all designs and user flows provided by design/product
Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)
(Rarely needed) Tested as both an analyst and applicant user

As a designer reviewer, I have

Verified that the changes match the design intention

Checked that the design translated visually
Checked behavior. Comment any found issues or broken flows.
Checked different states (empty, one, some, error)
Checked for landmarks, page heading structure, and links

Validated user-facing changes as a designer

Checked keyboard navigability
Tested general usability, landmarks, page header structure, and links with a screen reader (such as Voiceover or ANDI)
Tested with multiple browsers (check off which ones were used)
- Chrome
- Microsoft Edge
- FireFox
- Safari
(Rarely needed) Tested as both an analyst and applicant user

References

Code review best practices

Screenshots

erinysong · 2024-12-06T00:00:19Z

src/registrar/assets/sass/_theme/_typography.scss

@@ -27,6 +27,10 @@ h2 {
 .usa-form,
 .usa-form fieldset {
  font-size: 1rem;
+  legend em {


Now that our field headings and subheadings are included as legend items in the screenreader fix, we're setting font-size to 1rem to preserve their font size 16px.

… es/2913-domain-request-screenreader

erinysong · 2024-12-06T00:11:22Z

src/registrar/assets/src/sass/_theme/_base.scss

@@ -149,6 +149,11 @@ footer {
  color: color('primary');
 }

+.usa-radio {
+  margin-top: 1rem;
+  font-size: 1.06rem;


Added to preserve styling of our radio buttons (bigger text, margins)

erinysong · 2024-12-06T00:13:01Z

src/registrar/assets/src/sass/_theme/_typography.scss

@@ -34,6 +34,9 @@ h2 {
 .usa-form,
 .usa-form fieldset {
  font-size: 1rem;
+  .usa-legend {


Now that our field headings and subheadings are moved to the legends in the screenreader fix, we're updating the font size of our legends to maintain our font size of 16px (originally 16.96px from usa-legend font size default being 1.06rem)

erinysong · 2024-12-06T00:14:20Z

src/registrar/templates/django/forms/label.html

@@ -2,15 +2,25 @@
  class="{% if label_classes %} {{ label_classes }}{% endif %}{% if label_tag == 'legend' %} {{ legend_classes }}{% endif %}"
  {% if not field.use_fieldset %}for="{{ widget.attrs.id }}"{% endif %}
 >
-  {% if span_for_text %}
-    <span>{{ field.label }}</span>
+  {% if legend_heading %}


Integrates legends into our labels so that their contents are tied to screenreader output

github-actions · 2024-12-06T00:15:15Z

🥳 Successfully deployed to developer sandbox es.

github-actions · 2024-12-06T00:16:06Z

🥳 Successfully deployed to developer sandbox es.

github-actions · 2024-12-06T00:19:19Z

🥳 Successfully deployed to developer sandbox es.

erinysong · 2024-12-06T22:00:45Z

Scope question - do we want expand these screenreader outputs to the portfolio forms as well? I can change them wherever applicable but feel free to let me know if we want this only scoped to our non org model domain request form

erinysong · 2024-12-09T19:28:27Z

src/registrar/templates/domain_request_other_contacts.html

-
-      {% with add_class="usa-radio__input--tile" add_legend_class="usa-sr-only" %}
+    <div class="margin-top-2">
+      {% with add_class="usa-radio__input--tile" add_legend_heading="Are there other employees who can help verify your request?" %}


erinysong · 2024-12-09T19:29:32Z

src/registrar/forms/domain_request_wizard.py

-        widget=forms.Textarea(),
+        widget=forms.Textarea(
+            attrs={
+                "aria-label": "You don’t need to provide names of other employees now, \


#2918 and #2915

erinysong · 2024-12-09T19:30:37Z

src/registrar/templates/domain_request_additional_details.html

      <!-- Toggle -->
-      <em>Select one. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
-      {% with add_class="usa-radio__input--tile" add_legend_class="usa-sr-only" %}
+      {% with add_class="usa-radio__input--tile" add_legend_class="margin-top-0" add_legend_heading="Are you working with a CISA regional representative on your domain request?" %}


erinysong · 2024-12-09T19:30:58Z

src/registrar/templates/django/forms/label.html

+  {% if legend_heading %}
+    <h2 class="{{ legend_classes }}">{{ legend_heading }} </h2>
+    {% if widget.attrs.id == 'id_additional_details-has_cisa_representative' %}
+      <p>.gov is managed by the Cybersecurity and Infrastructure Security Agency. CISA has <a href="https://www.cisa.gov/about/regions" target="_blank">10 regions</a> that some organizations choose to work with. Regional representatives use titles like protective security advisors, cyber security advisors, or election security advisors.</p>


#2921 #2922

erinysong · 2024-12-09T19:31:42Z

src/registrar/templates/domain_request_additional_details.html

        <!-- Toggle -->
-        <em>Select one. <abbr class="usa-hint usa-hint--required" title="required">*</abbr></em>
-        {% with add_class="usa-radio__input--tile" add_legend_class="usa-sr-only" %}
+        {% with add_class="usa-radio__input--tile" add_legend_heading="Is there anything else you’d like us to know about your domain request?" %}


… es/2913-domain-request-screenreader

SamiyahKey

Approved, thanks Erin!

github-actions · 2024-12-09T22:30:22Z

🥳 Successfully deployed to developer sandbox es.

github-actions · 2024-12-09T22:31:41Z

🥳 Successfully deployed to developer sandbox es.

github-actions · 2024-12-11T23:01:05Z

🥳 Successfully deployed to developer sandbox es.

github-actions · 2024-12-13T19:05:44Z

🥳 Successfully deployed to developer sandbox es.

github-actions · 2024-12-13T19:41:34Z

🥳 Successfully deployed to developer sandbox es.

… es/2913-domain-request-screenreader

github-actions · 2024-12-13T22:09:25Z

🥳 Successfully deployed to developer sandbox es.

erinysong added 14 commits November 21, 2024 14:57

Add screenreader text to no other contacts form

f918720

Remove unused legends from radio groups

e76571e

Refactor legends from two separate legends to one combined legend

36b78e9

Remove outdated comment

3f66fac

Save changes

394a04d

Add select instructions to radio fields

7b1e266

Add select text to radios

ab05cb7

Refactor additional details radio

1beb094

Moved required fields text in other contacts form

780b53b

Add aria label for additional details form

8154d25

Save changes

b9ea3d8

Add aria label to anything else text field

6ff3901

Refactor legend heading

4671c89

Refactor how usa-legend is assigned

6854310

erinysong requested a review from abroddrick as a code owner December 5, 2024 23:56

erinysong changed the title ~~2913: Update domain request screenreader outputs~~ 2913: Update domain request screenreader outputs [ES] Dec 5, 2024

erinysong marked this pull request as draft December 5, 2024 23:59

erinysong commented Dec 6, 2024

View reviewed changes

erinysong added 3 commits December 5, 2024 16:01

Merge branch 'main' of https://github.com/cisagov/manage.get.gov into…

7280b34

… es/2913-domain-request-screenreader

Remove unused param

5b2ecbc

Remove unused change

762bda2

erinysong commented Dec 6, 2024

View reviewed changes

Remove unused parentheses

9046297

erinysong commented Dec 6, 2024

View reviewed changes

erinysong commented Dec 9, 2024

View reviewed changes

erinysong marked this pull request as ready for review December 9, 2024 19:34

erinysong requested review from therealslimhsiehdy, Matt-Spence, CocoByte, rachidatecs, dave-kennedy-ecs, zandercymatics and a team December 9, 2024 19:35

erinysong added 3 commits December 9, 2024 11:37

Merge branch 'main' of https://github.com/cisagov/manage.get.gov into…

f7cc588

… es/2913-domain-request-screenreader

Update portfolio screenreader additional details form

dffae91

Revert portfolio form screenreader changes

1764155

SamiyahKey requested review from SamiyahKey and removed request for a team December 9, 2024 20:53

SamiyahKey reviewed Dec 9, 2024

View reviewed changes

Merge main

a545dd0

Remove duplicate aria text

8fcf4a5

Remove duplicate aria text

3770494

Merge branch 'main' of https://github.com/cisagov/manage.get.gov into…

fda1bcd

… es/2913-domain-request-screenreader

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

2913: Update domain request screenreader outputs [ES] #3193

2913: Update domain request screenreader outputs [ES] #3193

erinysong commented Dec 5, 2024 •

edited by SamiyahKey

Loading

erinysong Dec 6, 2024

erinysong Dec 6, 2024

erinysong Dec 6, 2024

erinysong Dec 6, 2024

github-actions bot commented Dec 6, 2024

github-actions bot commented Dec 6, 2024

github-actions bot commented Dec 6, 2024

erinysong commented Dec 6, 2024 •

edited

Loading

erinysong Dec 9, 2024

erinysong Dec 9, 2024

erinysong Dec 9, 2024

erinysong Dec 9, 2024

erinysong Dec 9, 2024

SamiyahKey left a comment

github-actions bot commented Dec 9, 2024

github-actions bot commented Dec 9, 2024

github-actions bot commented Dec 11, 2024

github-actions bot commented Dec 13, 2024

github-actions bot commented Dec 13, 2024

github-actions bot commented Dec 13, 2024

2913: Update domain request screenreader outputs [ES] #3193

Are you sure you want to change the base?

2913: Update domain request screenreader outputs [ES] #3193

Conversation

erinysong commented Dec 5, 2024 • edited by SamiyahKey Loading

Ticket

Changes

Context for reviewers

Setup

Code Review Verification Steps

As the original developer, I have

Satisfied acceptance criteria and met development standards

Ensured code standards are met (Original Developer)

Validated user-facing changes (if applicable)

As a code reviewer, I have

Reviewed, tested, and left feedback about the changes

Validated user-facing changes as a developer

As a designer reviewer, I have

Verified that the changes match the design intention

Validated user-facing changes as a designer

References

Screenshots

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Dec 6, 2024

github-actions bot commented Dec 6, 2024

github-actions bot commented Dec 6, 2024

erinysong commented Dec 6, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SamiyahKey left a comment

Choose a reason for hiding this comment

github-actions bot commented Dec 9, 2024

github-actions bot commented Dec 9, 2024

github-actions bot commented Dec 11, 2024

github-actions bot commented Dec 13, 2024

github-actions bot commented Dec 13, 2024

github-actions bot commented Dec 13, 2024

erinysong commented Dec 5, 2024 •

edited by SamiyahKey

Loading

erinysong commented Dec 6, 2024 •

edited

Loading