A11y/fix your profile layout

[andrewleith]

Summary | Résumé

This PR updates the user profile page to remove the table layout and use flexbox instead.

It also adds 2 a11y features to make navigating this page a little easier:

1. Adds tab stops on the informational part to make tabbing through the page an option
2. Adds hidden text on the link to inform the user which setting they would change (rather than just saying "change" for every setting)

Before

After

[github-actions]

🧪 Review environment

https://2323oazuhfb6hlb75x2nn3rgsq0kvpzb.lambda-url.ca-central-1.on.aws/

[andrewleith]

This has nothing to do with this PR but I slipped it in anyway. It makes the cypress tests run much faster by disabling videos and screenshots, which weren't actually working anyway. In a future PR we could make the screenshots and recordings available.

[whabanks]

Looks great to me!
One suggestion that might be out of scope for this PR is changing the way we display the phone numbers on this page. Without dashes between the phone number parts screen readers will read 6131234567 as six billion one hundred thirty one million..... With dashes it is read more naturally.

[amazingphilippe]

A few changes to "wrap" this up:

1. Lets allow the "Change" link to wrap on the smallest breakpoints. I'd say let's use something like flex-wrap sm:flex-no-wrap. This will give a chance for more content to fit on the smallest screen, and follows a similar pattern we have on the team management screen.
2. Lets also keep the base font size. The small grey and blue text can be hard to read.

Some design doc for the final layout in Figma

[andrewleith]

A few changes to "wrap" this up:

1. Lets allow the "Change" link to wrap on the smallest breakpoints. I'd say let's use something like flex-wrap sm:flex-no-wrap. This will give a chance for more content to fit on the smallest screen, and follows a similar pattern we have on the team management screen.
2. Lets also keep the base font size. The small grey and blue text can be hard to read.

Some design doc for the final layout in Figma

All set! Please re-review.

[amazingphilippe]

Looks good!