fix(ui): make closed table sidebars inert and strengthen focus ring

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.test.tsx

@@ -45,6 +45,7 @@ describe('table sidebar layout', () => {
     expect(dialog.getAttribute('aria-label')).toBe('Configure workflow')
     expect(dialog.classList.contains('translate-x-0')).toBe(true)
     expect(dialog.classList.contains('shadow-overlay')).toBe(true)
+    expect(dialog.hasAttribute('inert')).toBe(false)
 
     input.value = 'Edited workflow'
     scrollBody.scrollTop = 64
@@ -56,9 +57,11 @@ describe('table sidebar layout', () => {
     expect(scrollBody.scrollTop).toBe(64)
     expect(dialog.classList.contains('translate-x-full')).toBe(true)
     expect(dialog.classList.contains('shadow-overlay')).toBe(false)
+    expect(dialog.hasAttribute('inert')).toBe(true)
 
     render(true)
     expect(dialog.classList.contains('translate-x-0')).toBe(true)
+    expect(dialog.hasAttribute('inert')).toBe(false)
     expect(input.value).toBe('Edited workflow')
     expect(scrollBody.scrollTop).toBe(64)
   })

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-layout.tsx

@@ -17,6 +17,7 @@ export function TableSidebarShell({
     <aside
       role='dialog'
       aria-label={ariaLabel}
+      inert={!open}
       className={cn(
         'absolute top-0 right-0 bottom-0 z-[var(--z-modal)] flex w-[400px] flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--bg)] transition-transform duration-200 ease-out',
         open ? 'translate-x-0 shadow-overlay' : 'translate-x-full'

packages/emcn/src/components/button/button.test.tsx

@@ -107,12 +107,12 @@ describe('Button shared action geometry', () => {
     expect(baseOnly).not.toContain('sm:size')
   })
 
-  it('offers the existing muted keyboard ring without changing the default', () => {
+  it('offers the shared keyboard ring without changing the default', () => {
     const before = renderToStaticMarkup(
       <Button
         variant='ghost'
         size='sm'
-        className='focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+        className='focus-visible:ring-2 focus-visible:ring-[var(--text-icon)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
       >
         Open
       </Button>

packages/emcn/src/components/overlay-action-button/overlay-action-button.test.tsx

@@ -43,28 +43,32 @@ const PREVIOUS = [
 ] as const
 
 describe('OverlayActionButton', () => {
-  it.each(PREVIOUS)('preserves the previous $name markup', ({ props, variant, className }) => {
-    const view = mount(
-      <>
-        <Button variant={variant} aria-label='Copy' className={`${className} shrink-0`}>
-          <svg className='size-[10px]' aria-hidden='true' />
-        </Button>
-        <OverlayActionButton {...props} aria-label='Copy' className='shrink-0'>
-          <svg className='size-[10px]' aria-hidden='true' />
-        </OverlayActionButton>
-      </>
-    )
-    const [previous, current] = view.querySelectorAll('button')
-    /** The old border-1 token aliases border; class order changes when recipes are composed. */
-    for (const button of [previous, current]) {
-      button.className = button.className
-        .replaceAll('--border-1', '--border')
-        .split(/\s+/)
-        .sort()
-        .join(' ')
+  it.each(PREVIOUS)(
+    'preserves the previous $name visual treatment',
+    ({ props, variant, className }) => {
+      const view = mount(
+        <>
+          <Button variant={variant} aria-label='Copy' className={`${className} shrink-0`}>
+            <svg className='size-[10px]' aria-hidden='true' />
+          </Button>
+          <OverlayActionButton {...props} aria-label='Copy' className='shrink-0'>
+            <svg className='size-[10px]' aria-hidden='true' />
+          </OverlayActionButton>
+        </>
+      )
+      const [previous, current] = view.querySelectorAll('button')
+      /** The old border-1 token aliases border; its hover border repeats the resting border. */
+      for (const button of [previous, current]) {
+        button.className = button.className
+          .replaceAll('--border-1', '--border')
+          .split(/\s+/)
+          .filter((token) => token !== 'hover-hover:border-[var(--border)]')
+          .sort()
+          .join(' ')
+      }
+      expect(current.outerHTML).toBe(previous.outerHTML)
     }
-    expect(current.outerHTML).toBe(previous.outerHTML)
-  })
+  )
 
   it('forwards refs and native props through a tooltip and suppresses disabled clicks', () => {
     vi.useFakeTimers()

packages/emcn/src/components/overlay-action-button/overlay-action-button.tsx

@@ -5,7 +5,7 @@ import { Button, type ButtonProps } from '../button/button'
 
 /** Transparent, bordered icon action over code or preview content. */
 export const overlayActionButtonVariants = cva(
-  'cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)] dark:hover-hover:bg-[var(--surface-5)] hover-hover:border-[var(--border)]',
+  'cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-xs hover-hover:bg-[var(--surface-3)] dark:hover-hover:bg-[var(--surface-5)]',
   {
     variants: {
       size: {

packages/emcn/src/lib/focus-ring.ts

@@ -1,3 +1,3 @@
 /** Opt-in ring for controls on `--surface-2`; ordinary Button focus remains unchanged. */
 export const mutedFocusRingClass =
-  'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+  'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-[var(--text-icon)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'