@skyhook-io/k8s-ui 1.14.12 → 1.15.0

package/src/components/shared/ResourceRendererDispatch.test.tsx

@@ -315,11 +315,9 @@ describe('getResourceStatus — colliding plurals', () => {
   // fine; being scored with Argo's vocabulary is not, because that attaches a
   // HealthLevel derived from a phase Katib never reports.
   it('does not score a Katib Experiment with the Argo vocabulary', () => {
-    const katib = getResourceStatus('experiments', {
-      apiVersion: 'kubeflow.org/v1beta1',
-      status: { conditions: [{ type: 'Running', status: 'True' }] },
-    })
-    expect(katib?.level).toBeUndefined()
+    const katib = { apiVersion: 'kubeflow.org/v1beta1', status: { conditions: [{ type: 'Running', status: 'True' }] } }
+    // Read the way any unrelated CRD with the same status would be.
+    expect(getResourceStatus('experiments', katib)).toEqual(getResourceStatus('trainingruns', katib))
   })
 
   it('fabricates no engine status for a third-party backups CRD', () => {
@@ -1080,3 +1078,12 @@ it('uses native RayCluster detail only for ray.io/v1', () => {
     if (apiVersion !== 'ray.io/v1') expect(html).toContain('2.55.0')
   }
 })
+
+it('uses RayJob native detail only for the supported exact API', () => {
+  for (const apiVersion of ['ray.io/v1', 'foreign.io/v1', 'ray.io/v99', 'ray.io/v1alpha1']) {
+    const data = { apiVersion, kind: 'RayJob', metadata: { name: 'train', namespace: 'ml' }, spec: { customField: 'native-fallback' } }
+    const html = renderKind('rayjobs', data, 'ml')
+    expect(html.includes('RayJob execution')).toBe(apiVersion === 'ray.io/v1')
+    if (apiVersion !== 'ray.io/v1') { expect(html).toContain('native-fallback'); expect(getResourceStatus('rayjobs', data)).toBeNull() }
+  }
+})

package/src/components/shared/ResourceRendererDispatch.tsx

@@ -118,6 +118,7 @@ import {
   KueueWorkloadRenderer,
   RayServiceRenderer,
   RayClusterRenderer,
+  RayJobRenderer,
   AdmissionCheckRenderer,
   ProvisioningRequestRenderer,
   LocalQueueRenderer,
@@ -312,6 +313,9 @@ import type { ScalerDiagnosis } from '../resources/renderers/WorkloadRenderer'
  * When an override is not provided, the base (shared) renderer is used.
  */
 export interface RendererOverrides {
+  JobRenderer?: React.ComponentType<{ data: any; onNavigate?: (ref: ResourceRef) => void }>
+  JobSetRenderer?: React.ComponentType<{ data: any; onNavigate?: (ref: ResourceRef) => void }>
+  RayJobRenderer?: React.ComponentType<{ data: any; onNavigate?: (ref: ResourceRef) => void }>
   RayClusterRenderer?: React.ComponentType<{ data: any; onNavigate?: (ref: ResourceRef) => void }>
   RayServiceRenderer?: React.ComponentType<{ data: any; onNavigate?: (ref: ResourceRef) => void }>
   KueueWorkloadRenderer?: React.ComponentType<{ data: any; onNavigate?: (ref: ResourceRef) => void }>
@@ -445,7 +449,7 @@ const KNOWN_KINDS = new Set([
   'pods', 'deployments', 'statefulsets', 'daemonsets', 'replicasets',
   'services', 'endpointslices', 'ingresses', 'configmaps', 'secrets', 'jobs', 'cronjobs', 'cronworkflows',
   'jobsets',
-  'rayclusters', 'rayservices', 'workloads', 'localqueues', 'clusterqueues', 'admissionchecks', 'provisioningrequests',
+  'rayclusters', 'rayservices', 'rayjobs', 'workloads', 'localqueues', 'clusterqueues', 'admissionchecks', 'provisioningrequests',
   'hpas', 'horizontalpodautoscalers', 'nodes', 'persistentvolumeclaims',
   'rollouts', 'analysisruns', 'analysistemplates', 'clusteranalysistemplates', 'experiments', 'certificates', 'workflows', 'persistentvolumes',
   'storageclasses', 'certificaterequests', 'clusterissuers', 'issuers',
@@ -700,7 +704,7 @@ export function ResourceRendererDispatch({
     || kind === 'objectstores' || kind === 'databases' || kind === 'publications'
     || kind === 'subscriptions' || kind === 'imagecatalogs' || kind === 'clusterimagecatalogs' || kind === 'jobsets'
     || kind === 'policies' || kind === 'rollouts' || kind === 'experiments'
-    || kind === 'rayclusters' || kind === 'rayservices' || kind === 'admissionchecks' || kind === 'provisioningrequests'
+    || kind === 'rayjobs' || kind === 'rayclusters' || kind === 'rayservices' || kind === 'admissionchecks' || kind === 'provisioningrequests'
     || kind === 'machines' || kind === 'machinesets' || kind === 'workloads' || kind === 'localqueues' || kind === 'clusterqueues'
   const isCNPGApiVersion = isApiGroup(data?.apiVersion, CNPG_GROUP)
   const groupGatedMatched =
@@ -721,6 +725,7 @@ export function ResourceRendererDispatch({
     || (kind === 'experiments' && isApiGroup(data?.apiVersion, 'argoproj.io'))
     || ((kind === 'machines' || kind === 'machinesets')
       && isApiGroup(data?.apiVersion, 'cluster.x-k8s.io'))
+    || (kind === 'rayjobs' && data?.apiVersion === 'ray.io/v1')
     || (kind === 'rayclusters' && data?.apiVersion === 'ray.io/v1')
     || (kind === 'rayservices' && data?.apiVersion === 'ray.io/v1')
     || (kind === 'jobsets' && isJobSetV1Alpha2(data))
@@ -748,6 +753,9 @@ export function ResourceRendererDispatch({
 
   const isKnownKind = KNOWN_KINDS.has(kind) || isCrossplaneMR || isCrossplaneClaim || isCrossplaneXR
 
+  const JobComp = rendererOverrides?.JobRenderer ?? JobRenderer
+  const JobSetComp = rendererOverrides?.JobSetRenderer ?? JobSetRenderer
+  const RayJobComp = rendererOverrides?.RayJobRenderer ?? RayJobRenderer
   const RayClusterComp = rendererOverrides?.RayClusterRenderer ?? RayClusterRenderer
   const RayServiceComp = rendererOverrides?.RayServiceRenderer ?? RayServiceRenderer
   const KueueWorkloadComp = rendererOverrides?.KueueWorkloadRenderer ?? KueueWorkloadRenderer
@@ -789,7 +797,7 @@ export function ResourceRendererDispatch({
   const sidebarContent = showCommonSections && (
     <>
       <RelatedResourcesSection relationships={sidebarRelationships} onNavigate={onNavigate} />
-      {kind !== 'events' && <EventsSection events={events || []} updates={updates || []} isLoading={eventsLoading ?? false} eventsError={eventsError ?? null} updatesError={updatesError ?? null} hint={eventsHint} />}
+      {kind !== 'events' && <EventsSection fullscreen={!!renderSidebar} events={events || []} updates={updates || []} isLoading={eventsLoading ?? false} eventsError={eventsError ?? null} updatesError={updatesError ?? null} hint={eventsHint} />}
       <LabelsSection data={data} />
       <AnnotationsSection data={data} />
       <MetadataSection data={data} />
@@ -818,7 +826,8 @@ export function ResourceRendererDispatch({
         {kind === 'ingresses' && !data?.apiVersion?.includes('networking.internal.knative.dev') && <IngressRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'configmaps' && <ConfigMapRenderer data={data} relationships={relationships} onNavigate={onNavigate} />}
         {kind === 'secrets' && <SecretRenderer data={data} relationships={relationships} onNavigate={onNavigate} certificateInfo={certificateInfo} resourceData={data} onSaveSecretValue={onSaveSecretValue} isSaving={isSavingSecret} />}
-        {kind === 'jobs' && !nonCoreJobFallthrough && <JobRenderer data={data} />}
+        {kind === 'jobs' && !nonCoreJobFallthrough && <JobComp data={data} onNavigate={onNavigate} />}
+        {kind === 'rayjobs' && data?.apiVersion === 'ray.io/v1' && <RayJobComp data={data} onNavigate={onNavigate} />}
         {kind === 'rayclusters' && data?.apiVersion === 'ray.io/v1' && <RayClusterComp data={data} onNavigate={onNavigate} />}
         {kind === 'rayservices' && data?.apiVersion === 'ray.io/v1' && <RayServiceComp data={data} onNavigate={onNavigate} />}
         {kind === 'workloads' && isApiGroup(data?.apiVersion, 'kueue.x-k8s.io') && <KueueWorkloadComp data={data} onNavigate={onNavigate} />}
@@ -826,7 +835,7 @@ export function ResourceRendererDispatch({
         {kind === 'provisioningrequests' && ['autoscaling.x-k8s.io/v1', 'autoscaling.x-k8s.io/v1beta1'].includes(data?.apiVersion) && <ProvisioningRequestRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'localqueues' && isKueueQueueResource(data) && <LocalQueueRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'clusterqueues' && isKueueQueueResource(data) && <ClusterQueueRenderer data={data} onNavigate={onNavigate} />}
-        {kind === 'jobsets' && isJobSetV1Alpha2(data) && <JobSetRenderer data={data} />}
+        {kind === 'jobsets' && isJobSetV1Alpha2(data) && <JobSetComp data={data} onNavigate={onNavigate} />}
         {kind === 'cronjobs' && <CronJobRenderer data={data} onNavigate={onNavigate} />}
         {kind === 'cronworkflows' && <CronWorkflowRenderer data={data} onNavigate={onNavigate} />}
         {(kind === 'hpas' || kind === 'horizontalpodautoscalers') && <HPAComp data={data} onNavigate={onNavigate} hpaDiagnosis={hpaDiagnosis} />}
@@ -1123,7 +1132,7 @@ export function getResourceStatus(kind: string, data: any): { text: string; colo
   if (k === 'admissionchecks' && isKueueQueueResource(data)) return getAdmissionCheckStatus(data)
   if (k === 'provisioningrequests' && ['autoscaling.x-k8s.io/v1', 'autoscaling.x-k8s.io/v1beta1'].includes(data?.apiVersion)) return getProvisioningRequestStatus(data)
   if (k === 'rayclusters' && data?.apiVersion === 'ray.io/v1') return getRayClusterStatus(data)
-  if (k === 'rayjobs' && data?.apiVersion?.startsWith('ray.io/')) return getRayJobStatus(data)
+  if (k === 'rayjobs' && data?.apiVersion === 'ray.io/v1') return getRayJobStatus(data)
   if (k === 'rayservices' && data?.apiVersion === 'ray.io/v1') return getRayServiceStatus(data)
   if (k === 'raycronjobs' && data?.apiVersion?.startsWith('ray.io/')) return getRayCronJobStatus(data)
   if (k === 'leaderworkersets' && data?.apiVersion?.startsWith('leaderworkerset.x-k8s.io/')) return getLeaderWorkerSetStatus(data)

package/src/components/shared/SetImageDialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState, useId } from 'react'
 import {
   AlertTriangle,
   ExternalLink,
@@ -146,6 +146,7 @@ export function SetImageDialog({
   onLoad,
   onConfirm,
 }: SetImageDialogProps) {
+  const titleId = useId()
   const [inventory, setInventory] = useState<WorkloadImageInventory | null>(
     null,
   )
@@ -289,6 +290,7 @@ export function SetImageDialog({
 
   return (
     <DialogPortal
+      ariaLabelledBy={titleId}
       open={open}
       onClose={busy ? () => {} : onClose}
       closable={!busy}
@@ -296,7 +298,7 @@ export function SetImageDialog({
     >
       <div className="flex items-start justify-between gap-4 border-b border-theme-border px-5 py-4">
         <div className="min-w-0">
-          <h2 className="text-sm font-semibold text-theme-text-primary">
+          <h2 id={titleId} className="text-sm font-semibold text-theme-text-primary">
             Update container images
           </h2>
           <p className="mt-0.5 truncate text-xs text-theme-text-tertiary">

package/src/components/shared/revision-role-badges.test.ts

@@ -25,7 +25,7 @@ describe('offersPromoteAfterRollback', () => {
 })
 
 function revision(overrides: Partial<WorkloadRevision>): WorkloadRevision {
-  return { number: 1, image: 'web:v1', createdAt: '2026-08-07T00:00:00Z', ...overrides }
+  return { number: 1, image: 'web:v1', createdAt: '2026-08-07T00:00:00Z', isCurrent: false, replicas: 0, ...overrides }
 }
 
 describe('revisionRoleBadges', () => {

package/src/components/trace/reachGraphModel.test.ts

@@ -1,4 +1,5 @@
 import { describe, it, expect } from 'vitest'
+import type { Mark } from './reachMarks'
 import { buildGraph, shortEvidence, noteHeadline, hopEvidenceFor, originEntryEvidence, originNoEvidenceLabel, POD_ROW_MAX, PILL_MAX_PX } from './reachGraphModel'
 import { buildOrigins } from './reachOrigins'
 import type { Trace, RouteResult, PodStatus, ProbeResult } from './types'

package/src/components/trace/reachInspector.test.ts

@@ -16,7 +16,7 @@ function mk(pods: PodStatus[], probes: ProbeResult[]): Trace {
     // The producer attaches a concrete request to every probed route; without
     // one the server has nothing to send, so a fixture that omits it is not a
     // realistic trace.
-    routes: [{ route: 'GET /', target: 'shop:80', outcome: 'verified', confidence: 'real', inClusterRequest: { scheme: 'http', path: '/' } }],
+    routes: [{ route: 'GET /', target: 'shop:80', outcome: 'verified', confidence: 'real', inClusterRequest: { protocol: 'http', scheme: 'http', path: '/' } }],
     downstream: [
       { resource: { kind: 'Service', name: 'shop', namespace: 'store' }, edge: 'service', findings: [], config: { clusterIP: '10.96.0.1', selector: { app: 'shop' } } },
       {
@@ -39,10 +39,6 @@ function podsNodeId(t: Trace): string {
   const g = buildGraph({ trace: t, route: route(), origin: buildOrigins(t).find((o) => o.id === 'incluster')! })
   return g.nodes.find((n) => n.kind === 'PODS')!.id
 }
-function podsEdgeId(t: Trace): string {
-  const g = buildGraph({ trace: t, route: route(), origin: buildOrigins(t).find((o) => o.id === 'incluster')! })
-  return g.edges.find((e) => e.label === 'selects')!.id
-}
 
 function ctx(t: Trace, originId: string, r = route()) {
   const origins = buildOrigins(t)
@@ -76,7 +72,6 @@ describe('the diagnosis is always present', () => {
     // The panel always answers the path question; a next-step block is offered
     // only when there is genuinely a next step.
     expect(s.path.body).toBeTruthy()
-    expect(s.resource).toBeUndefined()
   })
 
   // Every hop is reported whether or not anything was clicked; a selection only
@@ -241,7 +236,7 @@ describe('verdict band', () => {
     const t = mk([pod('a', true, '10.0.0.1')], [])
     t.verdict = 'degraded'
     t.routes = []
-    const v = buildVerdict(t, undefined, buildOrigins(t))
+    const v = buildVerdict(t, undefined)
     expect(v.tone).toBe('degraded')
   })
 
@@ -249,7 +244,7 @@ describe('verdict band', () => {
     const t = mk([pod('a', true, '10.0.0.1')], [])
     t.headline = 'Configuration only - not yet tested'
     t.diagnosis = { summary: 'Accepted: NoMatchingListenerHostname - no hostname intersections' }
-    const v = buildVerdict(t, undefined, buildOrigins(t))
+    const v = buildVerdict(t, undefined)
     expect(v.problem).toMatch(/NoMatchingListenerHostname/)
     // and it is not duplicated into the body
     expect(v.body).toBe('')
@@ -723,7 +718,7 @@ describe('selecting a context entry opens it', () => {
 describe('a coverage statement is not a fault', () => {
   it('the verdict keeps it on the wire but marks it coverage-class', () => {
     const t = mk([pod('a', true, '10.0.0.1')], [p({ path: 'apiserver' })])
-    t.diagnosis = { class: 'coverage', summary: "reachable via API server - the real-traffic path wasn't confirmed from here" } as never
+    t.diagnosis = { class: 'coverage', summary: "reachable via API server - the real-traffic path wasn't confirmed from here" }
     // buildVerdict still surfaces it for consumers that want the sentence...
     const v = buildVerdict(t, route({ outcome: 'reached', confidence: 'indirect' }), { originId: 'apiserver', originName: 'API-server proxy' })
     expect(v.problem).toBeTruthy()

package/src/components/ui/ConfirmDialog.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { ReactNode, useId } from 'react'
 import { AlertTriangle, X } from 'lucide-react'
 import { clsx } from 'clsx'
 import { SEVERITY_TEXT, SEVERITY_BADGE_BORDERED } from '../../utils/badge-colors'
@@ -43,9 +43,10 @@ export function ConfirmDialog({
   const canClose = !isLoading || isClosable
   const isDanger = variant === 'danger'
   const severity = isDanger ? 'error' : 'warning'
+  const titleId = useId()
 
   return (
-    <DialogPortal open={open} onClose={onClose} closable={canClose} className={clsx('w-full', className ?? 'max-w-md')}>
+    <DialogPortal open={open} onClose={onClose} closable={canClose} className={clsx('w-full', className ?? 'max-w-md')} ariaLabelledBy={titleId}>
       {/* Header */}
       <div className="flex items-start gap-3 p-4 border-b border-theme-border">
         <div
@@ -57,12 +58,13 @@ export function ConfirmDialog({
           <AlertTriangle className={clsx('w-5 h-5', SEVERITY_TEXT[severity])} />
         </div>
         <div className="flex-1 min-w-0">
-          <h3 className="text-lg font-semibold text-theme-text-primary">{title}</h3>
+          <h3 id={titleId} className="text-lg font-semibold text-theme-text-primary">{title}</h3>
           <p className="text-sm text-theme-text-secondary mt-1">{message}</p>
         </div>
         <button
           onClick={onClose}
           disabled={!canClose}
+          aria-label="Close"
           className="p-1 text-theme-text-secondary hover:text-theme-text-primary hover:bg-theme-elevated rounded disabled:opacity-50"
         >
           <X className="w-5 h-5" />

package/src/components/ui/DialogPortal.test.tsx

@@ -0,0 +1,279 @@
+// @vitest-environment jsdom
+import { act, StrictMode, useState, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { DialogPortal } from './DialogPortal'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+const roots = new Set<Root>()
+
+async function mount(node: ReactNode) {
+  const opener = document.createElement('button')
+  opener.textContent = 'opener'
+  document.body.appendChild(opener)
+  opener.focus()
+  const host = document.createElement('div')
+  document.body.appendChild(host)
+  const root = createRoot(host)
+  roots.add(root)
+  await act(async () => root.render(node))
+  return { root, opener, render: (next: ReactNode) => act(async () => root.render(next)) }
+}
+
+const dialog = () => document.querySelector<HTMLElement>('[role="dialog"]')
+const guards = () => Array.from(document.querySelectorAll<HTMLElement>('[data-focus-guard]'))
+
+function pressTab(shiftKey = false) {
+  const target = document.activeElement ?? document.body
+  const event = new KeyboardEvent('keydown', { key: 'Tab', shiftKey, bubbles: true, cancelable: true })
+  target.dispatchEvent(event)
+  return event
+}
+
+afterEach(async () => {
+  vi.restoreAllMocks()
+  for (const root of roots) await act(async () => root.unmount())
+  roots.clear()
+  document.body.replaceChildren()
+})
+
+function Dialog({ open, onClose = () => {}, children }: { open: boolean; onClose?: () => void; children?: ReactNode }) {
+  return (
+    <DialogPortal open={open} onClose={onClose} ariaLabelledBy="dialog-title">
+      <h3 id="dialog-title">Title</h3>
+      {children}
+    </DialogPortal>
+  )
+}
+
+describe('DialogPortal accessibility', () => {
+  it('moves focus into a dialog that was mounted closed and then opened', async () => {
+    const { render } = await mount(<Dialog open={false} />)
+    expect(dialog()).toBeNull()
+    await render(<Dialog open />)
+    expect(document.activeElement).toBe(dialog())
+  })
+
+  it('leaves focus on a child that autoFocused', async () => {
+    const { render } = await mount(<Dialog open={false} />)
+    await render(<Dialog open><input autoFocus aria-label="replicas" /></Dialog>)
+    expect(document.activeElement).toBe(document.querySelector('input'))
+  })
+
+  it('names the dialog from ariaLabelledBy, or ariaLabel when no title is referenced', async () => {
+    await mount(<Dialog open />)
+    expect(dialog()?.getAttribute('aria-labelledby')).toBe('dialog-title')
+    expect(dialog()?.hasAttribute('aria-label')).toBe(false)
+    await act(async () => { for (const root of roots) root.unmount() })
+    roots.clear()
+    await mount(<DialogPortal open onClose={() => {}} ariaLabel="Scale workload">x</DialogPortal>)
+    expect(dialog()?.getAttribute('aria-label')).toBe('Scale workload')
+  })
+
+  it('restores focus to the opener at logical close, before the exit finishes', async () => {
+    const { render, opener } = await mount(<Dialog open={false} />)
+    await render(<Dialog open><button>inside</button></Dialog>)
+    expect(document.activeElement).toBe(dialog())
+    await render(<Dialog open={false}><button>inside</button></Dialog>)
+    expect(dialog()).not.toBeNull()
+    expect(dialog()?.closest('[inert]')).not.toBeNull()
+    expect(document.activeElement).toBe(opener)
+  })
+
+  it('restores focus when a conditionally-mounted dialog unmounts', async () => {
+    function Host() {
+      const [show, setShow] = useState(true)
+      return show ? <Dialog open onClose={() => setShow(false)}><button>inside</button></Dialog> : null
+    }
+    const { opener } = await mount(<Host />)
+    expect(document.activeElement).toBe(dialog())
+    await act(async () => {
+      dialog()!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }))
+    })
+    expect(dialog()).toBeNull()
+    expect(document.activeElement).toBe(opener)
+  })
+
+  it('does not steal focus back from an autoFocus child under StrictMode', async () => {
+    const { opener } = await mount(
+      <StrictMode>
+        <Dialog open><input autoFocus aria-label="name" /></Dialog>
+      </StrictMode>,
+    )
+    await act(async () => {})
+    expect(document.activeElement).toBe(document.querySelector('input'))
+    expect(document.activeElement).not.toBe(opener)
+  })
+
+  it('does not pull focus back when the close moved it elsewhere', async () => {
+    // The destination takes focus in the same commit as the close — as a
+    // navigated-to view's autoFocus does — so the restore microtask sees it.
+    const { render, opener } = await mount(<Dialog open={false} />)
+    await render(<Dialog open><button>inside</button></Dialog>)
+    await render(<><Dialog open={false}><button>inside</button></Dialog><input autoFocus aria-label="destination" /></>)
+    const destination = document.querySelector('input[aria-label="destination"]')
+    expect(document.activeElement).toBe(destination)
+    expect(document.activeElement).not.toBe(opener)
+  })
+
+  it('wraps focus that leaves past either edge of the panel', async () => {
+    await mount(
+      <Dialog open>
+        <button>first</button>
+        <button disabled>disabled</button>
+        <button>last</button>
+      </Dialog>,
+    )
+    const [first, , last] = Array.from(dialog()!.querySelectorAll('button'))
+    const [startGuard, endGuard] = guards()
+    last.focus()
+    endGuard.focus()
+    expect(document.activeElement).toBe(first)
+    startGuard.focus()
+    expect(document.activeElement).toBe(last)
+  })
+
+  it('enters at the near edge when focus arrives at a guard from outside', async () => {
+    await mount(<Dialog open><button>first</button><button>last</button></Dialog>)
+    const [first, last] = Array.from(dialog()!.querySelectorAll('button'))
+    const [startGuard, endGuard] = guards()
+    ;(document.activeElement as HTMLElement).blur()
+    startGuard.focus()
+    expect(document.activeElement).toBe(first)
+    ;(document.activeElement as HTMLElement).blur()
+    endGuard.focus()
+    expect(document.activeElement).toBe(last)
+  })
+
+  it('keeps focus on the panel when it has nothing tabbable', async () => {
+    await mount(<Dialog open />)
+    guards()[1].focus()
+    expect(document.activeElement).toBe(dialog())
+  })
+
+  it('never intercepts Tab inside the panel, leaving the order to the browser', async () => {
+    await mount(<Dialog open><button>first</button><button>last</button></Dialog>)
+    const [first, last] = Array.from(dialog()!.querySelectorAll('button'))
+    last.focus()
+    expect(pressTab().defaultPrevented).toBe(false)
+    first.focus()
+    expect(pressTab(true).defaultPrevented).toBe(false)
+  })
+
+  it('restores focus to the opener after an autoFocus child took it, however the dialog mounted', async () => {
+    const { render, opener } = await mount(<Dialog open={false} />)
+    await render(<Dialog open><input autoFocus aria-label="replicas" /></Dialog>)
+    expect(document.activeElement).toBe(document.querySelector('input'))
+    await render(<Dialog open={false}><input autoFocus aria-label="replicas" /></Dialog>)
+    expect(document.activeElement).toBe(opener)
+
+    function Host() {
+      const [show, setShow] = useState(true)
+      return show ? <Dialog open onClose={() => setShow(false)}><input autoFocus aria-label="name" /></Dialog> : null
+    }
+    await act(async () => { for (const root of roots) root.unmount() })
+    roots.clear()
+    const second = await mount(<Host />)
+    expect(document.activeElement).toBe(document.querySelector('input'))
+    await act(async () => {
+      document.querySelector('input')!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true }))
+    })
+    expect(dialog()).toBeNull()
+    expect(document.activeElement).toBe(second.opener)
+  })
+
+  it('wraps to the visible edges, skipping CSS-hidden controls', async () => {
+    // jsdom has no layout; stand in for the browser's visibility check.
+    const proto = HTMLElement.prototype
+    const original = Object.getOwnPropertyDescriptor(proto, 'checkVisibility')
+    proto.checkVisibility = function (this: HTMLElement) { return this.style.display !== 'none' }
+    try {
+      await mount(
+        <Dialog open>
+          <button style={{ display: 'none' }}>hidden first</button>
+          <button>first</button>
+          <button>last</button>
+          <button style={{ display: 'none' }}>hidden last</button>
+        </Dialog>,
+      )
+      const [, first, last] = Array.from(dialog()!.querySelectorAll('button'))
+      const [startGuard, endGuard] = guards()
+      last.focus()
+      endGuard.focus()
+      expect(document.activeElement).toBe(first)
+      startGuard.focus()
+      expect(document.activeElement).toBe(last)
+    } finally {
+      if (original) Object.defineProperty(proto, 'checkVisibility', original)
+      else Reflect.deleteProperty(proto, 'checkVisibility')
+    }
+  })
+
+  it('pulls a Tab back into the dialog after the focused control was disabled', async () => {
+    await mount(
+      <Dialog open>
+        <button>first</button>
+        <button>last</button>
+      </Dialog>,
+    )
+    const [first, last] = Array.from(dialog()!.querySelectorAll('button'))
+    ;(document.activeElement as HTMLElement).blur()
+    expect(document.activeElement).toBe(document.body)
+    expect(pressTab().defaultPrevented).toBe(true)
+    expect(document.activeElement).toBe(first)
+    ;(document.activeElement as HTMLElement).blur()
+    expect(pressTab(true).defaultPrevented).toBe(true)
+    expect(document.activeElement).toBe(last)
+  })
+
+  it('leaves Tab alone in a menu portaled out of the dialog', async () => {
+    await mount(<Dialog open><button>inside</button></Dialog>)
+    const menuItem = document.createElement('button')
+    document.body.appendChild(menuItem)
+    menuItem.focus()
+    expect(pressTab().defaultPrevented).toBe(false)
+    expect(document.activeElement).toBe(menuItem)
+  })
+
+  it('lets the dialog underneath recover Tab while the one above it animates out', async () => {
+    function Stack({ top }: { top: boolean }) {
+      return (
+        <>
+          <Dialog open><button>under</button></Dialog>
+          <DialogPortal open={top} onClose={() => {}} ariaLabel="top"><button>over</button></DialogPortal>
+        </>
+      )
+    }
+    const { render } = await mount(<Stack top />)
+    await render(<Stack top={false} />)
+    // The closing dialog is still mounted (inert) for its exit animation.
+    expect(document.querySelectorAll('[role="dialog"]').length).toBe(2)
+    ;(document.activeElement as HTMLElement | null)?.blur()
+    expect(pressTab().defaultPrevented).toBe(true)
+    expect(document.activeElement?.textContent).toBe('under')
+  })
+
+  it('wraps past controls that cannot take focus, like those in a disabled fieldset', async () => {
+    await mount(
+      <Dialog open>
+        <button>first</button>
+        <button>last</button>
+        <fieldset disabled><button>locked</button></fieldset>
+      </Dialog>,
+    )
+    const [first, last] = Array.from(dialog()!.querySelectorAll('button'))
+    const [startGuard] = guards()
+    first.focus()
+    startGuard.focus()
+    expect(document.activeElement).toBe(last)
+  })
+
+  it('falls back to the panel when nothing in it will take focus', async () => {
+    await mount(<Dialog open><button>refuses</button></Dialog>)
+    const button = dialog()!.querySelector('button')!
+    vi.spyOn(button, 'focus').mockImplementation(() => {})
+    guards()[1].focus()
+    expect(document.activeElement).toBe(dialog())
+  })
+})