#2016: Text wrapping to next line for an overflow in domain name - [RH]

[therealslimhsiehdy]

Ticket

Resolves #2016

Changes

• Make sure that the domain name in the sidebar does not overflow onto the "main" section and wraps
• And the domain name in the "main" section doesn't overflow and instead wraps

Context for reviewers

See ticket for original state

Setup

1. Create a domain request with a very length domain name ie wordswordswordswordswordswordswordswordswordswordswordswords and submit it
2. Go through /admin to do the steps to approve it
3. Click "Manage"
4. Should see wrapping of the text since the domain name is so long (see screenshot for reference)

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
• Added at least 2 developers as PR reviewers (only 1 will need to approve)
• Messaged on Slack or in standup to notify the team that a PR is ready for review
• Changes to “how we do things” are documented in READMEs and or onboarding guide
• If any model was updated to modify/add/delete columns, makemigrations was ran and the associated migrations file has been commited.

Ensured code standards are met (Original Developer)

• All new functions and methods are commented using plain language
• Did dependency updates in Pipfile also get changed 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)

• 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)
• Add at least 1 designer as PR reviewer

As a code reviewer, I have

Reviewed, tested, and left feedback about the changes

• Pulled this branch locally and tested it
• Reviewed this code and left comments
• Checked that all code is adequately covered by tests
• Made it clear which comments need to be addressed before this work is merged
• If any model was updated to modify/add/delete columns, makemigrations was ran and the associated migrations file has been commited.

Ensured code standards are met (Code reviewer)

• All new functions and methods are commented using plain language
• Interactions with external systems are wrapped in try/except
• Error handling exists for unusual or missing values
• (Rarely needed) Did dependency updates in Pipfile also get changed in requirements.txt?

Validated user-facing changes as a developer

• 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)

• Tested with multiple browsers, the suggestion is to use ones that the developer didn't (check off which ones were used)

  • Chrome
  • Microsoft Edge
  • FireFox
  • Safari

• (Rarely needed) Tested as both an analyst and applicant user

Note: Multiple code reviewers can share the checklists above, a second reviewers should not make a duplicate checklist

As a designer reviewer, I have

Verified that the changes match the design intention

• Checked that the design translated visually
• Checked behavior
• Checked different states (empty, one, some, error)
• Checked for landmarks, page heading structure, and links
• Tried to break the intended flow

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

Screenshots

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[erinysong]

Will test this on staging first but noticed that when a domain name is too long I get an incorrect error saying that I have non alphanumeric characters. Update: Also found this happens on staging for too long domains - is this supposed to get a different error if domains have char limits?

[erinysong]

Code looks good! Just had one accessibility question on the overflow text that I'll defer to design to answer

[erinysong]

cc: @AnnaGingle @kristinacyin since you're both knowledgeable in current practices!

Will defer to designers since I'm not as up to date on how to handle overflow text accessibly, but do we want to add aria text here given that you can't see the rest of the domain? I know there's differing opinions on if aria text is helpful or not

[erinysong]

Verified that long domain names properly truncate on sidenav

[erinysong]

Will test this on staging first but noticed that when a domain name is too long I get an incorrect error saying that I have non alphanumeric characters. Update: Also found this happens on staging for too long domains - is this supposed to get a different error if domains have char limits?

Filed a bug for this: #2829

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[github-actions]

🥳 Successfully deployed to developer sandbox rh.

[erinysong]

Confirming that text wrap works successfully - good pivot, this is a lot more readable and accessible!

[erinysong]

I like the switch to text wrap - thank you for looking into improving text accessibility here!

[rachidatecs]

There are utility classes in base.scss that do similar things, I suggest you re-use or create a variant in the same place