LG-15252 Add accessible link to password strength feedback when creating password

[kevinsmaster5]

🎫 Ticket

Link to the relevant ticket:
LG-15252

🛠 Summary of changes

In order to have screen reader recognize what shows up in the password strength block, we wrap the heading, 'rating' and hint text in a div and add its id to the password aria-describedby attribute.

📜 Testing Plan

Confirm the changes.

Pre requisite: have ability for assistive screen reading on your device

• go to http://localhost:3000 and create a new account
• After verifying email and at the password screen turn on the screen reader (MacOs use VoiceOver in System settings > Accessibility
• Enter a password that would give a non-passing grade such as a common word or just repeated characters. Tab into Confirm password or click over there.
• Notice the screen reader will read out the Password strength and tip advice along with the current password instructions.

👀 Screenshots

Screen recording of MacOS VoiceOver captioning showing rough idea of how a screen reader plays the described text

Screen.Recording.2025-02-20.at.2.20.30.PM.mov

[aduth]

Couple minor suggestions, but LGTM otherwise 👍

[aduth]

Nice test coverage 👍 It could also be a good idea to incorporate what's expected to happen if the user clears a value after adding one (i.e. that the aria-describedby is removed again).

[aduth]

I think this is a case where TypeScript is right in warning us that we can't guarantee that aria-describedby attribute is there. I might suggest using the optional chaining operator (?.) instead of the non-null assertion (!.).

Suggested change

	this.input.getAttribute('aria-describedby')!.replace(/\s*password-strength\s*/, ''),
	this.input.getAttribute('aria-describedby')?.replace(/\s*password-strength\s*/, ''),

[kevinsmaster5]

This works if I add a non-null to the end otherwise TS was still complaining.

[aduth]

This works if I add a non-null to the end otherwise TS was still complaining.

Can you share the error you are seeing?

[kevinsmaster5]

Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
  Type 'undefined' is not assignable to type 'string'.ts(2345)

[aduth]

Ah, it's because the optional chaining will result in trying to set null as the value if there is no attribute present. Maybe we could address this by changing the else to an else if (this.input.hasAttribute('aria-describedby')), and then it'd be safe to use the non-null assertion.

[kevinsmaster5]

That TypeScript error remains but interestingly if I take the constant I'm setting in the if () { move it up and use it in both cases TypeScript stays happy. I think it's inferring string | null

161ba96

[aduth]

Yeah, that seems like a sensible approach 👍

I think the issue you were seeing is that TypeScript can't infer a connection between hasAttribute and getAttribute to know that the condition satisfied that the attribute definitely exists, whereas storing and reusing the variable reference, it knows it's safe to use if already checked in the condition.

[kevinsmaster5]

Thank you very much!