chore(ui,shared,localizations): UX improvements for <ConfigureSSO />

[LauraBeatris]

Description

• Moves verify domain step as the first one, to clarify which domain the user is setting up the enterprise connection
• Update select provider step, to only include header title/description
• Add domain to sidebar
• Add UI descriptors to each step
• Improve test step structure (new empty CTA, open test URL button)

Checklist

• pnpm test runs as expected.
• pnpm 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:

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	May 21, 2026 4:42pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 6ae19e6

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

This PR includes changesets to release 20 packages

Name	Type
@clerk/localizations	Patch
@clerk/shared	Patch
@clerk/ui	Patch
@clerk/react	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-js	Patch
@clerk/expo-passkeys	Patch
@clerk/expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/hono	Patch
@clerk/msw	Patch
@clerk/nextjs	Patch
@clerk/nuxt	Patch
@clerk/react-router	Patch
@clerk/tanstack-react-start	Patch
@clerk/testing	Patch
@clerk/vue	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

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8601

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8601

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8601

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8601

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8601

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8601

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8601

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8601

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8601

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8601

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8601

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8601

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8601

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8601

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8601

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8601

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8601

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8601

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8601

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8601

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8601

commit: 6ae19e6

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This PR updates Configure SSO end-to-end: many locale files now reference Single Sign-On (SSO) and simplify the select-provider localization shape; shared localization types were adjusted (selectProviderStep, testUrl action label, testResults.empty, provider-specific saml attributeMapping); UI changes include rehydrating provider selection, removing enterprise-connection creation from verify-domain, conditional mounting of select-provider, changing the permission key to org:sys_entconns:manage, refactoring ConfigureStep to provider-driven attribute mapping, adding an Open test URL flow and test-results empty state, instrumenting UI with elementDescriptor/elementId keys, and adding a primary-email-domain footer in the navbar. Tests were updated to reflect copy and permission-key changes.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• clerk/javascript#8586: Overlapping changes to SAML/attribute-mapping UI and provider-specific mapping handling.
• clerk/javascript#8520: Related verify-domain flow changes and verify/add-email steps.
• clerk/javascript#8544: Related updates to TestConfigurationStep, test URL/actions, and test-results UI.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: UX improvements to the ConfigureSSO component affecting the ui, shared, and localizations packages.
Description check	✅ Passed	The description is directly related to the changeset, detailing specific UX improvements (verify domain step ordering, select provider step restructuring, domain in sidebar, UI descriptors, test step improvements) with supporting screenshots.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx (1)

372-381: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Clickable table rows are mouse-only; keyboard users can’t open test-run details.

The row action is bound only to onClick on <Tr>, so the drawer cannot be triggered via keyboard navigation. Please make the row action keyboard-accessible (focusable + Enter/Space activation) or use a semantic interactive element inside cells.

Suggested fix

 <Tr
   key={row.id}
   elementDescriptor={descriptors.configureSSOTestResultsRow}
+  role='button'
+  tabIndex={0}
   onClick={() => setSelectedTestRun(row)}
+  onKeyDown={e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      setSelectedTestRun(row);
+    }
+  }}
   sx={t => ({
     cursor: 'pointer',
     '&:hover > td': {
       backgroundColor: t.colors.$neutralAlpha50,
     },
   })}
 >

As per coding guidelines: "Implement proper focus management for keyboard navigation in React components" and "Implement proper tab order in React components".

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx`
around lines 372 - 381, The table row <Tr> with key={row.id} and
elementDescriptor={descriptors.configureSSOTestResultsRow} only handles onClick
so keyboard users cannot open a test run; make it keyboard-accessible by adding
tabIndex={0} (or wrapping an interactive element inside the cells), add a
onKeyDown handler that calls setSelectedTestRun(row) when Enter or Space is
pressed, and include an appropriate role (e.g., role="button") and
aria-label/aria-describedby as needed to convey purpose; ensure styling and
focus outline are preserved so keyboard focus is visible.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx`:
- Around line 372-381: The table row <Tr> with key={row.id} and
elementDescriptor={descriptors.configureSSOTestResultsRow} only handles onClick
so keyboard users cannot open a test run; make it keyboard-accessible by adding
tabIndex={0} (or wrapping an interactive element inside the cells), add a
onKeyDown handler that calls setSelectedTestRun(row) when Enter or Space is
pressed, and include an appropriate role (e.g., role="button") and
aria-label/aria-describedby as needed to convey purpose; ensure styling and
focus outline are preserved so keyboard focus is visible.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: bfc6c94d-6fa9-4cf7-9b36-95d99428637c

📥 Commits

Reviewing files that changed from the base of the PR and between f20085e and 52be397.

📒 Files selected for processing (1)

• packages/ui/src/components/ConfigureSSO/steps/TestConfigurationStep.tsx

[alexcarpenter]

we now have three slots that all render in the same spot. Do we need to introduce another? footer also feels like the wrong name here, as this floats towards the top of the sidebar

{header}
{items}
{footer}

[LauraBeatris]

I'll check with Tu and Jeremy again to see if we can find out another option to tackle this domain UX issue, but I'll rever the changes from the sidebar for the time being