Bug: Accessibility issues in user's settings page - user/settings

[5hraddha]

Describe the bug

There are a few accessibility issues in the user's settings page - user/settings that we can improve:

1. Problem: Missing form labels for:

   • Bio text area,
   • Time zone dropdown,
   • checkboxes on the page.

   Possible Solution: Bind the for attribute in the labels to the id of the element this label is associated with.

2. Problem: The first level heading is missing.
   Possible Solution: Either keep Public profile as the first level heading or keep User Settings as the first level heading and keep it visually hidden.

If the team is fine with the proposed improvements, I could implement it. Appreciate your suggestions or comments in this regard. Thank you!

Steps to reproduce

1. Go to https://app.opensauced.pizza/user/settings after logging in.
2. Run an accessibility check. I'm using WAVE (Web Accessibility Evaluation Tool).

Browsers

Chrome

Additional context (Is this in dev or production?)

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please reach out to us on Discord or follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.

[nickytonline]

Thanks for opening the issue @5hraddha! I'm aware of our heading issues. It's an app wide thing that needs to be addressed.

For the Bio, the label isn't linked as you mentioned. You can use the for attribute (htmlFor in JSX), or you can wrap the textarea with the label like this.

<label class="flex flex-col w-full text-sm font-normal text-light-slate-11">
    Bio
    <textarea rows="4" placeholder="Tell us about yourself." class="px-3 py-2 rounded-lg bg-light-slate-4 disabled:cursor-not-allowed " name="bio">Senior Software Engineer at OpenSauced</textarea>
</label>

This is what our TextInput component does. You can do the same thing for the timezone.

[5hraddha]

Yeah, I saw that. Thanks, Nick! I'll .take the issue then. Could you please help remove the triage label?

[github-actions]

The issue you are trying to assign yourself is blocked until it can be triaged or by another label on the issue.

[github-actions]

The issue you are trying to assign yourself is blocked until it can be triaged or by another label on the issue.

[open-sauced]

🎉 This issue has been resolved in version 1.74.1-beta.6 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[open-sauced]

🎉 This issue has been resolved in version 1.75.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀