@skyhook-io/k8s-ui 1.14.12 → 1.15.0

package/src/components/ui/DialogPortal.tsx

@@ -1,4 +1,10 @@
-import { useEffect, useRef, type KeyboardEvent as ReactKeyboardEvent, type ReactNode } from 'react'
+import {
+  useEffect,
+  useRef,
+  type FocusEvent as ReactFocusEvent,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactNode,
+} from 'react'
 import { createPortal } from 'react-dom'
 import { clsx } from 'clsx'
 import { useAnimatedUnmount } from '../../hooks/useAnimatedUnmount'
@@ -12,6 +18,36 @@ interface DialogPortalProps {
   className?: string
   /** Prevent closing via Escape / backdrop click (e.g. during async operation) */
   closable?: boolean
+  /** Id of the element that names the dialog (usually its title). Preferred over `ariaLabel`. */
+  ariaLabelledBy?: string
+  /** Accessible name when there is no visible title to reference. */
+  ariaLabel?: string
+}
+
+const FOCUS_GUARD = 'fixed top-0 left-0 w-px h-0 overflow-hidden outline-none'
+
+const TABBABLE_SELECTOR = [
+  'a[href]',
+  'area[href]',
+  'button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  'iframe',
+  '[contenteditable]:not([contenteditable="false"])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',')
+
+// A CSS-hidden element (display:none, visibility:hidden) can't take focus, so
+// treating it as an edge would let Tab slip past the real last element.
+function isVisible(el: HTMLElement): boolean {
+  return typeof el.checkVisibility === 'function' ? el.checkVisibility({ visibilityProperty: true }) : true
+}
+
+function tabbableElements(panel: HTMLElement): HTMLElement[] {
+  return Array.from(panel.querySelectorAll<HTMLElement>(TABBABLE_SELECTOR)).filter(
+    el => el.tabIndex >= 0 && !el.matches(':disabled') && !el.closest('[inert],[hidden]') && isVisible(el),
+  )
 }
 
 /**
@@ -19,14 +55,30 @@ interface DialogPortalProps {
  * Renders children inside a centered panel portaled to document.body, so it works
  * correctly even inside CSS-transformed containers (drawers, slide panels).
  *
+ * Focus moves into the panel on open (unless a child already took it, e.g. via
+ * `autoFocus`), Tab wraps at the panel's edges, and focus returns to the element
+ * that opened the dialog at logical close.
+ *
  * Usage:
- *   <DialogPortal open={showDialog} onClose={() => setShowDialog(false)} className="w-80">
- *     <h3>Title</h3>
+ *   <DialogPortal open={showDialog} onClose={() => setShowDialog(false)} className="w-80" ariaLabelledBy={titleId}>
+ *     <h3 id={titleId}>Title</h3>
  *     <p>Content</p>
  *   </DialogPortal>
  */
-export function DialogPortal({ open, onClose, children, className, closable = true }: DialogPortalProps) {
+export function DialogPortal({
+  open,
+  onClose,
+  children,
+  className,
+  closable = true,
+  ariaLabelledBy,
+  ariaLabel,
+}: DialogPortalProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
+  // `el` is null when focus entered from nowhere restorable (body, or an
+  // element outside the panel that has since been removed).
+  const openerRef = useRef<{ el: HTMLElement | null } | null>(null)
+  const pendingRestoreRef = useRef(false)
   // The unmount window is the exit duration: shorter than the entrance, and
   // exactly what the panel transition below runs — a mismatch here cut the
   // close at two-thirds (200ms window under a 300ms panel).
@@ -44,15 +96,69 @@ export function DialogPortal({ open, onClose, children, className, closable = tr
     }
   }
 
+  // Guards on either side of the panel catch focus leaving it, so inside the
+  // panel the browser's own Tab order applies — scroll containers, radio
+  // groups, editors that claim Tab — and only the wrap is decided here.
+  const focusEdge = (toLast: boolean) => {
+    const panel = dialogRef.current
+    if (!panel) return
+    // A candidate can still refuse focus; stopping on the first refusal would
+    // leave focus on the guard, one keypress from the page behind.
+    const items = tabbableElements(panel)
+    for (const el of toLast ? items.reverse() : items) {
+      el.focus()
+      if (document.activeElement === el) return
+    }
+    panel.focus()
+  }
+
+  // Leaving past one edge wraps to the other; arriving from outside the panel
+  // enters at the near edge.
+  const handleGuardFocus = (edge: 'start' | 'end') => (e: ReactFocusEvent<HTMLSpanElement>) => {
+    const panel = dialogRef.current
+    const fromInside = e.relatedTarget instanceof Node && !!panel?.contains(e.relatedTarget)
+    focusEdge(edge === 'start' ? fromInside : !fromInside)
+  }
+
+  // Focus drops to body when the focused control is disabled or removed (a
+  // confirm button entering its loading state); the next Tab would then land
+  // behind the modal. Focus elsewhere (a menu portaled out of the panel) is
+  // left alone.
+  const recoverStrayTab = (e: KeyboardEvent) => {
+    const panel = dialogRef.current
+    const active = document.activeElement
+    if (!panel || (active && active !== document.body)) return
+    e.preventDefault()
+    focusEdge(e.shiftKey)
+  }
+
+  // relatedTarget on the first focus into the panel is the opener. Reading
+  // document.activeElement in an effect would miss it when a child `autoFocus`
+  // has already moved focus during commit — which also happens before
+  // dialogRef is attached, hence currentTarget.
+  const handlePanelFocus = (e: ReactFocusEvent<HTMLDivElement>) => {
+    const panel = e.currentTarget
+    if (!open || openerRef.current || !panel.contains(e.target as Node)) return
+    const from = e.relatedTarget
+    openerRef.current = { el: from instanceof HTMLElement && !panel.contains(from) ? from : null }
+  }
+
   useEffect(() => {
     if (!open) return
 
     const handleDocumentKeyDown = (e: KeyboardEvent) => {
-      if (e.key !== 'Escape') return
+      if (e.key !== 'Escape' && e.key !== 'Tab') return
+      // A dialog still animating out is inert and no longer the one on top.
       const modalDialogs = Array.from(document.querySelectorAll<HTMLElement>('[role="dialog"][aria-modal="true"]'))
+        .filter(d => !d.closest('[inert]'))
       const topDialog = modalDialogs[modalDialogs.length - 1]
       if (topDialog !== dialogRef.current) return
 
+      if (e.key === 'Tab') {
+        recoverStrayTab(e)
+        return
+      }
+
       if (dialogRef.current?.contains(e.target as Node)) return
 
       e.stopPropagation()
@@ -67,17 +173,44 @@ export function DialogPortal({ open, onClose, children, className, closable = tr
     return () => document.removeEventListener('keydown', handleDocumentKeyDown, true)
   }, [open, closable, onClose])
 
-  // Move focus into the dialog for accessibility and tab navigation
+  // The panel mounts a render after `open` flips (useAnimatedUnmount sets
+  // shouldRender in an effect), so this must also wait on shouldRender.
   useEffect(() => {
-    if (open && dialogRef.current) {
-      dialogRef.current.focus()
+    const panel = dialogRef.current
+    if (!open || !shouldRender || !panel) return
+    if (!panel.contains(document.activeElement)) panel.focus()
+  }, [open, shouldRender])
+
+  // Restore at logical close (open → false, or unmount while open), not after
+  // the exit. The microtask lets StrictMode's simulated unmount/remount cancel
+  // the restore; otherwise dev builds would pull focus out of an autoFocus child.
+  useEffect(() => {
+    if (!open) return
+    pendingRestoreRef.current = false
+    return () => {
+      pendingRestoreRef.current = true
+      queueMicrotask(() => {
+        if (!pendingRestoreRef.current) return
+        pendingRestoreRef.current = false
+        const opener = openerRef.current?.el
+        openerRef.current = null
+        if (!opener?.isConnected) return
+        const active = document.activeElement
+        const panel = dialogRef.current
+        // Don't steal focus from wherever the close action deliberately sent it.
+        const focusStillOurs = !active || active === document.body || !!panel?.contains(active)
+        if (focusStillOurs) opener.focus({ preventScroll: true })
+      })
     }
   }, [open])
 
   if (!shouldRender) return null
 
   return createPortal(
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
+    <div
+      className={clsx('fixed inset-0 z-50 flex items-center justify-center', !open && 'pointer-events-none')}
+      inert={!open}
+    >
       <div
         className={clsx(
           'absolute inset-0 bg-black/60 backdrop-blur-sm',
@@ -87,12 +220,16 @@ export function DialogPortal({ open, onClose, children, className, closable = tr
         style={overlayTransitionStyle(isOpen, 'dialog')}
         onClick={closable ? onClose : undefined}
       />
+      <span tabIndex={0} aria-hidden data-focus-guard onFocus={handleGuardFocus('start')} className={FOCUS_GUARD} />
       <div
         ref={dialogRef}
         role="dialog"
         aria-modal="true"
+        aria-labelledby={ariaLabelledBy}
+        aria-label={ariaLabelledBy ? undefined : ariaLabel}
         tabIndex={-1}
         onKeyDown={handleDialogKeyDown}
+        onFocus={handlePanelFocus}
         className={clsx(
           'relative bg-theme-surface border border-theme-border rounded-lg shadow-2xl mx-4 outline-none',
           TRANSITION_PANEL,
@@ -103,6 +240,7 @@ export function DialogPortal({ open, onClose, children, className, closable = tr
       >
         {children}
       </div>
+      <span tabIndex={0} aria-hidden data-focus-guard onFocus={handleGuardFocus('end')} className={FOCUS_GUARD} />
     </div>,
     document.body,
   )

package/src/components/ui/YamlReview.tsx

@@ -34,6 +34,8 @@ export interface YamlReviewProps {
   onClose?: () => void
   onBack: () => void
   onApply: () => void
+  /** Set when the review replaces a dialog's own title, which names the dialog. */
+  titleId?: string
 }
 
 function splitYaml(content: string) {
@@ -82,6 +84,7 @@ export function YamlReview({
   onClose,
   onBack,
   onApply,
+  titleId,
 }: YamlReviewProps) {
   const [selectedIndex, setSelectedIndex] = useState(0)
   const reviewRef = useRef<HTMLDivElement>(null)
@@ -177,7 +180,7 @@ export function YamlReview({
         </button>
         <div className="h-4 w-px bg-theme-border" />
         <div>
-          <div className="text-sm font-semibold text-theme-text-primary">
+          <div id={titleId} className="text-sm font-semibold text-theme-text-primary">
             Review cluster-admitted changes
           </div>
           <div className="text-xs text-theme-text-tertiary">

package/src/components/ui/drawer-components.test.tsx

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import { renderToString } from 'react-dom/server'
-import { ProblemAlerts, OperationalIssuesShownContext, RelatedResourcesSection } from './drawer-components'
+import { EventsSection, ProblemAlerts, OperationalIssuesShownContext, RelatedResourcesSection } from './drawer-components'
 
 const problems = [
   { color: 'red' as const, message: 'Application is Degraded' },
@@ -49,3 +49,16 @@ describe('RelatedResourcesSection', () => {
     expect(html).toContain('<button')
   })
 })
+
+describe('Recent Events layout', () => {
+  const events = Array.from({ length: 24 }, (_, i) => ({ id: String(i), source: 'k8s_event', eventType: 'Normal', reason: `Reason${i}`, timestamp: '2026-09-27T00:00:00Z' })) as any
+  it('keeps drawer scrolling but lets fullscreen events expand in page flow', () => {
+    const drawer = renderToString(<EventsSection events={events} />)
+    const fullscreen = renderToString(<EventsSection events={events} fullscreen />)
+    expect(drawer).toContain('max-h-64')
+    expect(drawer).not.toContain('Show 16 more events')
+    expect(fullscreen).not.toContain('max-h-64')
+    expect(fullscreen).toContain('Show 16 more events')
+    expect(fullscreen).toContain('Reason23')
+  })
+})

package/src/components/ui/drawer-components.tsx

@@ -1,3 +1,4 @@
+import { Disclosure } from './Disclosure'
 import { createContext, useContext, useState } from 'react'
 import { Copy, Check, Tag, AlertTriangle, CheckCircle, ExternalLink, Layers, X, Minus } from 'lucide-react'
 import { clsx } from 'clsx'
@@ -83,25 +84,26 @@ interface SectionProps {
   children: React.ReactNode
   defaultExpanded?: boolean
   contentClassName?: string
+  variant?: 'plain' | 'card'
 }
 
-export function Section({ title, icon: Icon, children, defaultExpanded = true, contentClassName }: SectionProps) {
+export function Section({ title, icon: Icon, children, defaultExpanded = true, contentClassName, variant = 'plain' }: SectionProps) {
   const [expanded, setExpanded] = useState(defaultExpanded)
   const { panelId, buttonProps } = useDisclosure(expanded)
 
   return (
-    <div className="border-b-subtle pb-4 last:border-0">
+    <div className={variant === 'card' ? 'min-w-0 overflow-hidden rounded-lg border border-theme-border bg-theme-surface' : 'border-b-subtle pb-4 last:border-0'}>
       <button
         {...buttonProps}
         onClick={() => setExpanded(!expanded)}
-        className="flex items-center gap-2 w-full text-left mb-2 hover:text-theme-text-primary transition-colors"
+        className={clsx('flex items-center gap-2 w-full text-left hover:text-theme-text-primary transition-colors', variant === 'card' ? clsx('border-theme-border bg-theme-elevated px-3 py-2.5', expanded && 'border-b') : 'mb-2')}
       >
         <CollapseChevron open={expanded} className="w-4 h-4" />
         {Icon && <Icon className="w-4 h-4 text-theme-text-secondary" />}
-        <span className="text-sm font-medium text-theme-text-secondary">{title}</span>
+        <span className={clsx("font-medium text-theme-text-secondary", variant === 'card' ? 'text-xs uppercase tracking-wider' : 'text-sm')}>{title}</span>
       </button>
       <Collapse open={expanded} id={panelId}>
-        <div className={contentClassName ?? 'pl-6'}>{children}</div>
+        <div className={contentClassName ?? (variant === 'card' ? 'p-3' : 'pl-6')}>{children}</div>
       </Collapse>
     </div>
   )
@@ -293,8 +295,10 @@ export function ConditionsSection({
   conditions,
   getConditionTone,
   defaultExpanded,
+  variant,
 }: {
   conditions?: any[]
+  variant?: 'plain' | 'card'
   defaultExpanded?: boolean
   getConditionTone?: (condition: any) => ConditionTone | undefined
 }) {
@@ -313,6 +317,7 @@ export function ConditionsSection({
 
   return (
     <Section
+      variant={variant}
       title={`Conditions (${conditions.length})${failCount > 0 ? ` · ${failCount} failing` : ''}`}
       defaultExpanded={defaultExpanded ?? conditions.length <= 6}
     >
@@ -889,7 +894,6 @@ const RELATIONSHIP_TRUNCATE_LIMIT = 10
 export function RelationshipGroup({ label, refs, onNavigate }: RelationshipGroupProps) {
   const [showAll, setShowAll] = useState(false)
   if (!refs || refs.length === 0) return null
-
   const truncated = !showAll && refs.length > RELATIONSHIP_TRUNCATE_LIMIT
   const visibleRefs = truncated ? refs.slice(0, RELATIONSHIP_TRUNCATE_LIMIT) : refs
 
@@ -1027,10 +1031,12 @@ interface EventsSectionProps {
   updatesError?: Error | null
   /** Optional hint shown below the event list (e.g. "See Timeline tab for related resources") */
   hint?: React.ReactNode
+  fullscreen?: boolean
 }
 
-export function EventsSection({ events, updates = [], isLoading, eventsError, updatesError, hint }: EventsSectionProps) {
+export function EventsSection({ events, updates = [], isLoading, eventsError, updatesError, hint, fullscreen = false }: EventsSectionProps) {
   const [showUpdates, setShowUpdates] = useState(false)
+  const [showAllEvents, setShowAllEvents] = useState(false)
 
   if (isLoading) {
     return (
@@ -1085,42 +1091,46 @@ export function EventsSection({ events, updates = [], isLoading, eventsError, up
     )
   }
 
+  const renderEvent = (event: TimelineEvent, i: number) => (
+  <div
+    key={`${event.id}-${i}`}
+    className={clsx(
+      'p-2 rounded text-sm border-l-2',
+      event.eventType === 'Warning' || (isChangeEvent(event) && event.eventType === 'delete')
+        ? 'bg-red-500/10 border-red-500'
+        : isK8sEvent(event)
+        ? 'bg-blue-500/10 border-blue-500'
+        : 'bg-theme-elevated/30 border-theme-border'
+    )}
+  >
+    <div className="flex items-center justify-between gap-2">
+      <span className="font-medium text-theme-text-primary">
+        {isK8sEvent(event) ? event.reason : event.eventType}
+      </span>
+      <span className="text-xs text-theme-text-tertiary">
+        {formatEventTime(event.timestamp)}
+      </span>
+    </div>
+    {event.message && (
+      <div className="text-xs text-theme-text-secondary mt-1 line-clamp-2">
+        {event.message}
+      </div>
+    )}
+    {isChangeEvent(event) && event.diff?.summary && (
+      <div className="text-xs text-theme-text-secondary mt-1">
+        {event.diff.summary}
+      </div>
+    )}
+  </div>
+  )
   return (
     <Section title={`Recent Events (${visible.length})`} defaultExpanded>
-      <div className="space-y-2 max-h-64 overflow-y-auto">
-        {visible.map((event, i) => (
-          <div
-            key={`${event.id}-${i}`}
-            className={clsx(
-              'p-2 rounded text-sm border-l-2',
-              event.eventType === 'Warning' || (isChangeEvent(event) && event.eventType === 'delete')
-                ? 'bg-red-500/10 border-red-500'
-                : isK8sEvent(event)
-                ? 'bg-blue-500/10 border-blue-500'
-                : 'bg-theme-elevated/30 border-theme-border'
-            )}
-          >
-            <div className="flex items-center justify-between gap-2">
-              <span className="font-medium text-theme-text-primary">
-                {isK8sEvent(event) ? event.reason : event.eventType}
-              </span>
-              <span className="text-xs text-theme-text-tertiary">
-                {formatEventTime(event.timestamp)}
-              </span>
-            </div>
-            {event.message && (
-              <div className="text-xs text-theme-text-secondary mt-1 line-clamp-2">
-                {event.message}
-              </div>
-            )}
-            {isChangeEvent(event) && event.diff?.summary && (
-              <div className="text-xs text-theme-text-secondary mt-1">
-                {event.diff.summary}
-              </div>
-            )}
-          </div>
-        ))}
+      <div tabIndex={fullscreen ? undefined : 0} className={clsx('space-y-2', !fullscreen && 'max-h-64 overflow-y-auto')}>
+        {(fullscreen ? visible.slice(0, 8) : visible).map(renderEvent)}
       </div>
+      {fullscreen && visible.length > 8 && <Disclosure open={showAllEvents} onOpenChange={setShowAllEvents} summary={showAllEvents ? 'Show fewer events' : `Show ${visible.length - 8} more events`} className="mt-2" summaryClassName="text-xs text-accent-text">
+        <div className="mt-2 space-y-2">{visible.slice(8).map(renderEvent)}</div>
+      </Disclosure>}
       {errors}
       {toggle && <div className="mt-2">{toggle}</div>}
       {hint && <div className="mt-2">{hint}</div>}