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

Add screenreader descriptive text to DS and nameserver inputs #3009

Merged
merged 3 commits into from
Nov 1, 2024

Conversation

erinysong
Copy link
Contributor

@erinysong erinysong commented Oct 30, 2024

Ticket

Resolves #2773

Changes

  • Adds screenreader text to Nameserver and DS delete buttons indicating which nameserver and DS record a user is deleting
  • Adds aria-label option to input to adjust aria label for screen readers

Context for reviewers

Setup

Prerequisite: Install the ANDI extension
Go to any domain and access the DNS page.

  1. On the nameservers page, run ANDI and verify that the input text fields and delete button's ANDI outputs include their respective Nameserver number
image image 2. On the DNSSEC page, run ANDI and verify the delete button's ANDI output includes its respective DS record number image

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 - NA
  • Error handling exists for unusual or missing values - NA

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 - NA
  • Checked keyboard navigability - NA
  • 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

Copy link

🥳 Successfully deployed to developer sandbox es.

Copy link

🥳 Successfully deployed to developer sandbox es.

@therealslimhsiehdy therealslimhsiehdy self-assigned this Oct 30, 2024
Copy link
Contributor

@therealslimhsiehdy therealslimhsiehdy left a comment

Choose a reason for hiding this comment

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

For deleting DS data:

Before:
Screenshot 2024-10-30 at 10 16 39 AM

After:
Screenshot 2024-10-30 at 10 15 42 AM

For deleting a nameserver:
Before:

Screenshot 2024-10-30 at 10 18 43 AM

After:
Screenshot 2024-10-30 at 10 18 23 AM

For IPv4/6 related to the # record:
Before:

Screenshot 2024-10-30 at 10 19 21 AM

After:
Screenshot 2024-10-30 at 10 19 14 AM

@erinysong erinysong merged commit 3e98604 into main Nov 1, 2024
10 checks passed
@erinysong erinysong deleted the es/2773-update-namesever-screenreader branch November 1, 2024 21:29
@SamiyahKey SamiyahKey requested review from SamiyahKey and removed request for AnnaGingle November 8, 2024 14:53
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.

DS data and nameservers: Associate form elements with corresponding record
2 participants