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.

Sign up for GitHub

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

Jump to bottom

chore(clerk-js): Improve accessibility in UserButton and OrganizationSwitcher #1826

Merged
merged 9 commits into from
Oct 12, 2023
Merged

chore(clerk-js): Improve accessibility in UserButton and OrganizationSwitcher #1826

merged 9 commits into from
Oct 12, 2023

Conversation

panteliselef
Copy link
Member

@panteliselef panteliselef commented Oct 4, 2023 •
edited
Loading

Description

This is an effort to improve the underlying semantics of UserButton and OrganizationSwitcher and provide a better accessibility experience.

In order to come up with this changes i followed the implementation of similar components created with

Tested with

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/clerk-js
  • @clerk/clerk-react
  • @clerk/nextjs
  • @clerk/remix
  • @clerk/types
  • @clerk/themes
  • @clerk/localizations
  • @clerk/clerk-expo
  • @clerk/backend
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/fastify
  • @clerk/chrome-extension
  • gatsby-plugin-clerk
  • build/tooling/chore

@panteliselef panteliselef requested a review from a team as a code owner October 4, 2023 12:30
@changeset-bot
Copy link

changeset-bot bot commented Oct 4, 2023 •
edited
Loading

🦋 Changeset detected

Latest commit: c84e4b0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@clerk/clerk-js Patch
@clerk/chrome-extension Patch
@clerk/clerk-expo Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@panteliselef panteliselef self-assigned this Oct 4, 2023
@LekoArts
Copy link
Member

LekoArts commented Oct 4, 2023

The aria-label items will be read out by a screen reader so they shouldn't be in snake case, dash case, etc. and be in a way that makes sense read out loud. If possible, don't use aria-label and use visible text or aria-describedby instead.

Everything you'd need to know about this is explained here, also with guides on what to use when :)
https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/

anagstef
anagstef approved these changes Oct 10, 2023
View reviewed changes
Copy link
Member

@anagstef anagstef left a comment

Choose a reason for hiding this comment

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

Great job on this! 🎉

LekoArts
LekoArts requested changes Oct 11, 2023
View reviewed changes
packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx Outdated Show resolved Hide resolved
packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx Outdated Show resolved Hide resolved
packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx Outdated Show resolved Hide resolved
packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx Show resolved Hide resolved
packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx Outdated
/>
<Actions>
<Actions role='group'>
Copy link
Member

Choose a reason for hiding this comment

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

Why did you add this here?

Copy link
Member Author

Choose a reason for hiding this comment

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

Our code treats these actions and the OrganizationActionList as 2 different groups

i believe it is allowed to have groups inside a menu

packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx Outdated Show resolved Hide resolved
packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx Outdated Show resolved Hide resolved
packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx Outdated Show resolved Hide resolved
packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx Show resolved Hide resolved
packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx Outdated Show resolved Hide resolved
@LekoArts
Copy link
Member

https://codesandbox.io/s/distracted-swirles-jo1pvu?file=/src/Popover.tsx from https://floating-ui.com/docs/popover shows how to do popovers with our floating-ui usage

@panteliselef panteliselef requested a review from LekoArts October 12, 2023 07:55
LekoArts
LekoArts reviewed Oct 12, 2023
View reviewed changes
.changeset/ten-wolves-cry.md Outdated
Copy link
Member

Choose a reason for hiding this comment

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

Seems like a duplicate file here

Copy link
Member Author

Choose a reason for hiding this comment

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

😅 i will remove it

LekoArts
LekoArts reviewed Oct 12, 2023
View reviewed changes
.changeset/afraid-bobcats-mate.md Outdated
'@clerk/clerk-js': patch
---

Impove accessibility of UserButton and OrganizationSwitcher by using aria-\* attributes and roles like `menu` and `menuitems`.
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
Impove accessibility of UserButton and OrganizationSwitcher by using aria-\* attributes and roles like `menu` and `menuitems`.
Improve accessibility of `<UserButton />` and `<OrganizationSwitcher />` by using `aria-*` attributes (where appropriate) and roles like `menu` and `menuitem`.

LekoArts
LekoArts approved these changes Oct 12, 2023
View reviewed changes
Copy link
Member

@LekoArts LekoArts left a comment

Choose a reason for hiding this comment

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

Thanks!

@panteliselef panteliselef added this pull request to the merge queue Oct 12, 2023
Merged via the queue into main with commit da450b5 Oct 12, 2023
5 checks passed
@panteliselef panteliselef deleted the elef/accessibility branch October 12, 2023 09:19
@clerk-cookie clerk-cookie mentioned this pull request Oct 12, 2023
Merged
@clerk-cookie
Copy link
Collaborator

This PR has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@clerk clerk locked as resolved and limited conversation to collaborators Oct 12, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@desiprisg desiprisg desiprisg approved these changes

@LekoArts LekoArts LekoArts approved these changes

@anagstef anagstef anagstef approved these changes

@dimkl dimkl dimkl approved these changes

Assignees

@panteliselef panteliselef

Labels
clerk-js
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@panteliselef @LekoArts @clerk-cookie @dimkl @anagstef @desiprisg