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 20, 2026 10:55pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 52be397

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: 52be397

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR updates Configure SSO across localization, shared types, UI, tests, and appearance descriptors. It changes many locale strings to reference Single Sign-On (SSO) instead of enterprise connections and simplifies the select-provider localization shape, restructures SAML attribute-mapping to be provider-driven, changes the permission key to org:sys_entconns:manage and conditionally mounts the select-provider step, removes enterprise-connection creation from the verify-domain flow, adds an Open test URL button and test-results empty state, instruments SSO UI with elementDescriptor/elementId keys, and adds a primary-email-domain footer to the navbar.

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 concisely summarizes the main change: UX improvements for the ConfigureSSO component across ui, shared, and localizations packages.
Description check	✅ Passed	The description provides a detailed overview of the changes including moving the verify domain step, updating the select provider step, adding domain to sidebar, adding UI descriptors, and improving test step structure. It directly relates to the changeset.
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