Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#2232: Accessible markup and unit test coverage for admin lists #3290

Merged
merged 6 commits into from
Jan 8, 2025

Conversation

rachidatecs
Copy link
Contributor

@rachidatecs rachidatecs commented Jan 3, 2025

Ticket

Resolves #2232

Changes

  • Lists are marked up as such
  • Expected markup is covered by unit tests

Context for reviewers

Let's talk about the normalize test helper method: This is a whitespace and line end stripper, and I'm using it on response.content which is a HUGE string. From running single tests, it does not seem like the computation time is significant which is good. When a test fails, the assert vomits out the full 2 strings being asserted equal, which means that the console will get absolutely swamped if one of those tests fail we avoid doing a direct assert so's not to flood the console in case of failure, but rather do a manual substring test.

I like the solid coverage the new tests give us, but am wondering if we're better off doing multiple asserts that pieces of the expected content (single lines) are contained in the non-normalized response.

Finally, the code repetition in the template. My gut feeling is if a block or pattern is repeated once, leave things alone. If it gets repeated thrice, pull things out into some common method/include etc.

Setup

Test alternative domains and websites when you have 1 item, less than 6 items, 6 or more items.

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
  • Update documentation in READMEs and/or onboarding guide

Ensured code standards are met (Original Developer)

  • If any updated dependencies on Pipfile, also update dependencies in requirements.txt.
  • 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

Screenshots

1 website
Screenshot 2025-01-02 at 8 20 02 PM

Less than 6
Screenshot 2025-01-02 at 8 19 32 PM

6 or more
Screenshot 2025-01-02 at 8 19 48 PM

1 alt domain
Screenshot 2025-01-02 at 8 20 52 PM

More that 1 alt domains
Screenshot 2025-01-02 at 8 19 55 PM

Copy link

github-actions bot commented Jan 3, 2025

🥳 Successfully deployed to developer sandbox el.

Copy link

github-actions bot commented Jan 3, 2025

🥳 Successfully deployed to developer sandbox el.

@zandercymatics zandercymatics self-assigned this Jan 3, 2025
@Katherine-Osos
Copy link
Contributor

@rachidatecs This PR looks pretty code heavy. What are you hoping that designers review?

Copy link

github-actions bot commented Jan 3, 2025

🥳 Successfully deployed to developer sandbox el.

@rachidatecs
Copy link
Contributor Author

@rachidatecs This PR looks pretty code heavy. What are you hoping that designers review?

Accessibility readout on the domain request page for list-like content: alternative domains and websites

Copy link

github-actions bot commented Jan 6, 2025

🥳 Successfully deployed to developer sandbox el.

@SamiyahKey SamiyahKey requested review from SamiyahKey and removed request for a team January 6, 2025 19:55
Copy link
Contributor

@zandercymatics zandercymatics left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested all three conditions for both and it worked great. Nice work on this

Comment on lines +112 to 126
{% with total_websites=field.contents|split:", " %}
{% if total_websites|length == 1 %}
<p class="margin-y-0 padding-y-0">
<a href="{{ total_websites.0 }}" target="_blank">
{{ total_websites.0 }}
</a>
</p>
{% elif total_websites|length > 1 %}
<ul class="margin-top-0 margin-left-0 padding-left-0{% if total_websites|length > 5 %} admin-list-inline{% endif %}">
{% for website in total_websites %}
{% comment %}White space matters: do NOT reformat the following line{% endcomment %}
<li><a href="{{ website }}" target="_blank">{{ website }}</a></li>
{% endfor %}
</ul>
{% endif %}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Beautiful

Comment on lines +132 to +143
{% if original_object.alternative_domains.all|length == 1 %}
<p class="margin-y-0 padding-y-0">
<a href="{% url 'admin:registrar_website_change' original_object.alternative_domains.all.0.id %}?{{ 'return_path='|add:current_path }}" target="_blank">{{ original_object.alternative_domains.all.0 }}</a>
</p>
{% elif original_object.alternative_domains.all|length > 1 %}
<ul class="margin-top-0 margin-left-0 padding-left-0 admin-list-inline">
{% for alt_domain in original_object.alternative_domains.all %}
{% comment %}White space matters: do NOT reformat the following line{% endcomment %}
<li><a href="{% url 'admin:registrar_website_change' alt_domain.id %}?{{ 'return_path='|add:current_path }}" target="_blank">{{alt_domain}}</a></li>
{% endfor %}
</ul>
{% endif %}
Copy link
Contributor

@zandercymatics zandercymatics Jan 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I see what you mean regarding the repetition. You made the right choice not to generalize it.
I think this is the "right way" to do things. I'm curious as to your thoughts: since it is the right way, do you think we should make it "known" in some way to other devs that we should follow this pattern in this case? Or does it not matter in your opinion?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you think it's worth it, we can discuss in eng huddle

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think it'd hurt, but its not too important either. I can add an optional PSA about when to list a list and when not to

Comment on lines +1556 to +1568
normalized_expected = normalize_html(expected_markup)
normalized_response = normalize_html(response.content.decode("utf-8"))

index = normalized_response.find(normalized_expected)

# Assert that the expected markup is found in the response
if index == -1:
self.fail(
f"Expected markup not found in the response.\n\n"
f"Expected:\n{normalized_expected}\n\n"
f"Start index of mismatch: {index}\n\n"
f"Consider checking the surrounding response for context."
)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I really like these tests. Nice work

src/registrar/tests/test_admin_request.py Outdated Show resolved Hide resolved
Copy link

github-actions bot commented Jan 8, 2025

🥳 Successfully deployed to developer sandbox el.

Copy link

github-actions bot commented Jan 8, 2025

🥳 Successfully deployed to developer sandbox el.

@rachidatecs rachidatecs merged commit 8142daf into main Jan 8, 2025
10 checks passed
@rachidatecs rachidatecs deleted the el/2232-admin-list-markup branch January 8, 2025 21:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

List markup in /admin is incorrect
4 participants