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

[10-10CG] Add aria-live div to Show More Facilities functionality #33786

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

coope93
Copy link
Contributor

@coope93 coope93 commented Dec 27, 2024

Are you removing, renaming or moving a folder in this PR?

  • No, I'm not changing any folders (skip to TeamSites and delete the rest of this section)
  • Yes, I'm removing, renaming or moving a folder

If the folder you changed contains a manifest.json, search for its entryName in the content-build registry.json (the entryName there will match).

⚠️ TeamSites ⚠️

Examples of a TeamSite: https://va.gov/health and https://benefits.va.gov/benefits/. This scenario is also referred to as the "injected" header and footer. You can reach out in the #sitewide-public-websites Slack channel for questions.

Did you change site-wide styles, platform utilities or other infrastructure?

Summary

  • Added new aria-live status role to FacilitySearch component to notify screen readers that more facilities have loaded.
  • 1010 Health Apps
  • (If using a flipper, what is the end date of the flipper being required/success criteria being targeted)

Related issue(s)

Testing done

  • Previously, new facilities radio options would load on the page, but screen readers were not notified. Now, screen readers will be notified with x new facilities loaded.
  • Describe the steps required to verify your changes are working as expected
  • Describe the tests completed and the results
  • _Exclusively stating 'Specs and automated tests passing' is NOT acceptable as appropriate testing
  • Optionally, provide a link to your test plan and test execution records

Screenshots

The UI did not change as the new div is hidden.

Before After
Mobile
Desktop

What areas of the site does it impact?

10-10CG

Acceptance criteria

Quality Assurance & Testing

  • I fixed|updated|added unit tests and integration tests for each feature (if applicable).
  • No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
  • Linting warnings have been addressed
  • Documentation has been updated (link to documentation *if necessary)
  • Screenshot of the developed feature is added
  • Accessibility testing has been performed

Error Handling

  • Browser console contains no warnings or errors.
  • Events are being sent to the appropriate logging solution
  • Feature/bug has a monitor built into Datadog or Grafana (if applicable)

Authentication

  • Did you login to a local build and verify all authenticated routes work as expected with a test user

const ariaLiveMessage = () => {
if (newFacilitiesCount > 0) {
const facilitySuffix = newFacilitiesCount === 1 ? 'y' : 'ies';
return `${newFacilitiesCount} new facilit${facilitySuffix} loaded`;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added helper to return either 1 new facility loaded, x new facilities loaded or it returns an empty string.

});
});

it('successfully loads 2 more facilities on click', async () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I ended up somewhat duplicating the previous test for the different facility message texts that can show up. I started a refactor to make a reusable helper since a lot of the Show More Facilities tests are somewhat similar, but I wasn't liking how it was turning out so I kept it more verbose like this. I'm open to looking further into this if someone really thinks we should, but also fine to leave it as is.

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.

2 participants