fix(settings): preserve accessible disabled-action explanations

Author: waleedlatif1

apps/sim/app/o/[organizationId]/settings/components/integrations/search-source-setup.test.tsx

@@ -988,7 +988,8 @@ describe('member content credentials in real add and edit dialogs', () => {
     await chooseSyncFrequency('Manual only')
     expect(document.body.textContent).toContain('Documents become unavailable after 24 hours')
     await chooseSyncFrequency('Every hour')
-    expect(document.body.textContent).toContain('Permissions are checked on every sync.')
+    expect(document.body.textContent).not.toContain('Documents become unavailable after 24 hours')
+    expect(document.body.textContent).not.toContain('Permissions are checked on every sync.')
   })
 
   it('saves source settings without changing a dedicated indexing account', async () => {

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-access-field/connector-access-field.test.tsx

@@ -134,6 +134,15 @@ describe('connection method selection', () => {
     expect(document.querySelector('[role="tooltip"]')).toHaveTextContent(
       'Add a new connection to change the sync method.'
     )
+    await act(async () => {
+      trigger.parentElement!.dispatchEvent(new MouseEvent('pointerout', { bubbles: true }))
+    })
+    expect(document.querySelector('[role="tooltip"]')).toBeNull()
+    expect(trigger.parentElement!.tabIndex).toBe(0)
+    await act(async () => trigger.parentElement!.focus())
+    expect(document.querySelector('[role="tooltip"]')).toHaveTextContent(
+      'Add a new connection to change the sync method.'
+    )
     expect(onChange).not.toHaveBeenCalled()
   })
 

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connector-access-field/connector-access-field.tsx

@@ -168,7 +168,7 @@ export function ConnectorAccessField({
       <div className='flex flex-col gap-2'>
         {slackSetupOnly ? null : lockAccessMode ? (
           <Tooltip.Root>
-            <Tooltip.Trigger asChild>
+            <Tooltip.Trigger asChild tabIndex={0}>
               <span className='inline-flex w-fit cursor-not-allowed'>
                 <ChipDropdown
                   aria-label={`Sync using: ${currentMode?.label ?? 'Unavailable'}`}

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/consts.ts

@@ -12,7 +12,7 @@ export function connectorSyncFrequencyHint(
     return 'Content and permissions update only when you sync. Documents become unavailable after 24 hours without a successful permission check.'
   }
   if (effectiveConnectorSyncIntervalMinutes(accessMode, syncInterval) === syncInterval) {
-    return 'Permissions are checked on every sync.'
+    return undefined
   }
   return accessMode === 'members' && hasContentCredential
     ? 'Content follows this schedule. Member permissions are checked every hour.'

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/connector-settings-fields.test.tsx

@@ -187,6 +187,14 @@ describe('connector settings service-account choices', () => {
     })
   }
 
+  it('announces blocked saves without showing persistent helper text', async () => {
+    const reason = 'Wait for the current sync to finish before saving.'
+    await render(confluenceConnectorMeta, { saveBlockedReason: reason })
+    const status = container.querySelector('[role="status"]')
+    expect(status).toHaveClass('sr-only')
+    expect(status).toHaveTextContent(reason)
+  })
+
   async function openAccountChoices() {
     const dropdown = container.querySelector<HTMLElement>('[role="combobox"]')
     if (!dropdown) throw new Error('Missing indexing-account selector')

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/connector-settings-fields.tsx

@@ -91,6 +91,7 @@ export interface ConnectorSettingsFieldsProps {
   hasMaxAccess: boolean
   isSaving: boolean
   error: string | null
+  saveBlockedReason?: string
   access: ConnectorAccessSelection
   onAccessChange: (access: ConnectorAccessSelection) => void
   canAdmin: boolean
@@ -133,6 +134,7 @@ export function ConnectorSettingsFields({
   hasMaxAccess,
   isSaving,
   error,
+  saveBlockedReason,
   access,
   onAccessChange,
   canAdmin,
@@ -463,7 +465,7 @@ export function ConnectorSettingsFields({
             title='Account for browsing'
             hint={
               isSearchIndex
-                ? 'Used to browse available content. Each person connects separately from Integrations to sync their Search content.'
+                ? 'Members sync with their own accounts connected in Integrations.'
                 : undefined
             }
           >
@@ -551,6 +553,9 @@ export function ConnectorSettingsFields({
         </ChipModalField>
       )}
 
+      <p role='status' className='sr-only'>
+        {saveBlockedReason}
+      </p>
       <ChipModalError>{error}</ChipModalError>
     </>
   )

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/use-connector-settings-form.ts

@@ -519,6 +519,7 @@ export function useConnectorSettingsForm({
     hasMaxAccess,
     isSaving,
     error: error ?? searchSetupError,
+    saveBlockedReason,
     access,
     onAccessChange: setAccess,
     canAdmin,

apps/sim/components/settings/settings-header-shell.test.tsx

@@ -68,6 +68,32 @@ function clickChip(label: string) {
 }
 
 describe('SettingsHeaderShell action routing', () => {
+  it('makes disabled Save explanations keyboard reachable without enabling Save', () => {
+    const onSave = vi.fn()
+    const reason = 'Wait for the current sync to finish before saving.'
+    renderHeader(
+      saveDiscardActions({
+        dirty: true,
+        saving: false,
+        saveDisabled: true,
+        saveTooltip: reason,
+        onSave,
+        onDiscard: vi.fn(),
+      })
+    )
+    const save = [...container.querySelectorAll('button')].find(
+      (button) => button.textContent === 'Save'
+    )!
+    const trigger = save.parentElement!
+    expect(save.disabled).toBe(true)
+    expect(trigger.tabIndex).toBe(0)
+    act(() => trigger.focus())
+    expect(document.activeElement).toBe(trigger)
+    expect(document.querySelector('[role="tooltip"]')?.textContent).toBe(reason)
+    act(() => save.click())
+    expect(onSave).not.toHaveBeenCalled()
+  })
+
   it('renders Delete before Discard and Save even though the array lists it last', () => {
     const actions: SettingsAction[] = [
       ...saveDiscardActions({ dirty: true, saving: false, onSave: vi.fn(), onDiscard: vi.fn() }),

apps/sim/components/settings/settings-header.tsx

@@ -196,7 +196,7 @@ export function SettingsActionChip({
   if (!action.tooltip) return chip
   return (
     <Tooltip.Root>
-      <Tooltip.Trigger asChild>
+      <Tooltip.Trigger asChild tabIndex={action.disabled ? 0 : undefined}>
         <span className='inline-flex'>{chip}</span>
       </Tooltip.Trigger>
       <Tooltip.Content>{action.tooltip}</Tooltip.Content>

packages/emcn/src/components/chip-modal/chip-modal.test.tsx

@@ -341,6 +341,40 @@ describe('ChipModalField file actions', () => {
 describe('ChipModal default actions', () => {
   beforeEach(makeElementsVisible)
 
+  it.each(['save', 'confirm'] as const)(
+    'makes a disabled %s explanation reachable without enabling the action',
+    (variant) => {
+      const onClick = vi.fn()
+      const action = {
+        label: 'Save',
+        disabled: true,
+        disabledTooltip: 'Wait for the current sync to finish before saving.',
+        onClick,
+      }
+      mount(
+        variant === 'confirm' ? (
+          <ChipConfirmModal open onOpenChange={() => {}} title='Save settings' confirm={action} />
+        ) : (
+          <ChipModal open onOpenChange={() => {}} srTitle='Save settings'>
+            <ChipModalHeader onClose={() => {}}>Save settings</ChipModalHeader>
+            <ChipModalFooter onCancel={() => {}} primaryAction={action} />
+          </ChipModal>
+        )
+      )
+
+      const save = buttonByText('Save')
+      const trigger = save.parentElement!
+      expect(save.disabled).toBe(true)
+      expect(trigger.tabIndex).toBe(0)
+      act(() => trigger.focus())
+      expect(document.activeElement).toBe(trigger)
+      expect(document.querySelector('[role="tooltip"]')?.textContent).toBe(action.disabledTooltip)
+      pressEnter(trigger)
+      act(() => save.click())
+      expect(onClick).not.toHaveBeenCalled()
+    }
+  )
+
   it('fails safe to the dismiss decision in a confirmation', () => {
     mount(
       <ChipConfirmModal