chore(clerk-js): Improve accessibility in UserButton and OrganizationSwitcher#1826
chore(clerk-js): Improve accessibility in UserButton and OrganizationSwitcher#1826panteliselef merged 9 commits intomainfrom
Conversation
🦋 Changeset detectedLatest commit: c84e4b0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
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 |
|
The Everything you'd need to know about this is explained here, also with guides on what to use when :) |
| aria-hidden='true' | ||
| /> | ||
| <Actions> | ||
| <Actions role='group'> |
There was a problem hiding this comment.
Why did you add this here?
There was a problem hiding this comment.
Our code treats these actions and the OrganizationActionList as 2 different groups
i believe it is allowed to have groups inside a menu
|
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 |
…Switcher (pr comments)
panteliselef
force-pushed
the
elef/accessibility
branch
from
dfee21a to
0d2591d
Compare
There was a problem hiding this comment.
Seems like a duplicate file here
There was a problem hiding this comment.
😅 i will remove it
| '@clerk/clerk-js': patch | ||
| --- | ||
|
|
||
| Impove accessibility of UserButton and OrganizationSwitcher by using aria-\* attributes and roles like `menu` and `menuitems`. |
There was a problem hiding this comment.
| 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`. |
|
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. |
6 participants
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 testruns as expected.npm run buildruns as expected.Type of change
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-extensiongatsby-plugin-clerkbuild/tooling/chore