fix(emcn): describe dropdown validation accessibly

Author: waleedlatif1

apps/sim/ee/credential-groups/components/organization-workspace-grant-modal.test.tsx

@@ -163,11 +163,13 @@ describe('workspace integration grant editor', () => {
   it('connects the integration selector to its required state and explanatory hint', async () => {
     await render({ mode: 'all' })
     const trigger = document.querySelector<HTMLButtonElement>('[aria-label="Integrations"]')!
-    expect(trigger.getAttribute('aria-required')).toBe('true')
-    const hintId = trigger.getAttribute('aria-describedby')!
-    expect(document.getElementById(hintId)?.textContent).toBe(
-      'Includes integrations added in the future.'
-    )
+    expect(trigger.hasAttribute('aria-required')).toBe(false)
+    const description = trigger
+      .getAttribute('aria-describedby')!
+      .split(' ')
+      .map((id) => document.getElementById(id)?.textContent)
+      .join(' ')
+    expect(description).toBe('Includes integrations added in the future. Required.')
   })
 
   it.each(['all', 'selected'] as const)(

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

@@ -4,12 +4,15 @@
 import { act } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, describe, expect, it } from 'vitest'
-import { ChipDropdown } from './chip-dropdown'
+import { ChipDropdown, type ChipDropdownProps } from './chip-dropdown'
 
 let root: Root | null = null
 let container: HTMLDivElement | null = null
 
-function mount(fullWidth: boolean): HTMLButtonElement {
+function mount(
+  fullWidth: boolean,
+  aria: Pick<ChipDropdownProps, 'aria-required' | 'aria-invalid' | 'aria-describedby'> = {}
+): HTMLButtonElement {
   ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
   container = document.createElement('div')
   document.body.appendChild(container)
@@ -21,6 +24,7 @@ function mount(fullWidth: boolean): HTMLButtonElement {
         options={[{ value: 'workflow', label: 'Workflow' }]}
         fullWidth={fullWidth}
         aria-label='Principal type'
+        {...aria}
       />
     )
   )
@@ -53,4 +57,45 @@ describe('ChipDropdown', () => {
     expect(label?.className).toContain('text-clip')
     expect(label?.className).not.toContain('truncate')
   })
+
+  it.each([true, 'true'] as const)(
+    'announces %s field states alongside the supplied error description',
+    (state) => {
+      const trigger = mount(true, {
+        'aria-required': state,
+        'aria-invalid': state,
+        'aria-describedby': 'field-error',
+      })
+      const error = document.createElement('p')
+      error.id = 'field-error'
+      error.textContent = 'Choose an available principal.'
+      container?.appendChild(error)
+
+      const description = trigger
+        .getAttribute('aria-describedby')!
+        .split(/\s+/)
+        .map((id) => document.getElementById(id)?.textContent)
+        .join(' ')
+
+      expect(description).toBe('Choose an available principal. Required. Invalid selection.')
+      expect(trigger.getAttribute('aria-haspopup')).toBe('menu')
+      expect(trigger.hasAttribute('aria-required')).toBe(false)
+      expect(trigger.hasAttribute('aria-invalid')).toBe(false)
+      expect(trigger.textContent).toBe('Workflow')
+    }
+  )
+
+  it.each([false, 'false'] as const)(
+    'keeps the original description when field states are %s',
+    (state) => {
+      const trigger = mount(true, {
+        'aria-required': state,
+        'aria-invalid': state,
+        'aria-describedby': 'field-hint',
+      })
+
+      expect(trigger.getAttribute('aria-describedby')).toBe('field-hint')
+      expect(container?.textContent).toBe('Workflow')
+    }
+  )
 })

packages/emcn/src/components/chip-dropdown/chip-dropdown.tsx

@@ -6,6 +6,7 @@ import {
   forwardRef,
   type ReactNode,
   useContext,
+  useId,
   useMemo,
   useState,
 } from 'react'
@@ -87,9 +88,9 @@ interface ChipDropdownBaseProps extends VariantProps<typeof chipVariants> {
    * selected value is dropped from the accessible name.
    */
   'aria-labelledby'?: string
-  /** Required state supplied by the enclosing field. */
+  /** Required state announced through the menu button's accessible description. */
   'aria-required'?: AriaAttributes['aria-required']
-  /** Validation state supplied by the enclosing field. */
+  /** Validation state announced through the menu button's accessible description. */
   'aria-invalid'?: AriaAttributes['aria-invalid']
   /** Hint and error descriptions supplied by the enclosing field. */
   'aria-describedby'?: AriaAttributes['aria-describedby']
@@ -199,6 +200,15 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
       id,
     } = props
 
+    const fieldStateId = useId()
+    const fieldState = [
+      (ariaRequired === true || ariaRequired === 'true') && 'Required.',
+      ariaInvalid && ariaInvalid !== 'false' && 'Invalid selection.',
+    ]
+      .filter(Boolean)
+      .join(' ')
+    const describedBy = [ariaDescribedBy, fieldState && fieldStateId].filter(Boolean).join(' ')
+
     const isMultiple = props.multiple === true
     const selectedValues = useMemo<string[]>(
       () => (isMultiple ? (props.value ?? []) : props.value != null ? [props.value] : []),
@@ -335,9 +345,7 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
             disabled={disabled}
             aria-label={ariaLabel}
             aria-labelledby={ariaLabelledBy}
-            aria-required={ariaRequired}
-            aria-invalid={ariaInvalid}
-            aria-describedby={ariaDescribedBy}
+            aria-describedby={describedBy || undefined}
             className={cn(
               chipVariants({ variant, shape, active, fullWidth }),
               hasTriggerBorder && TRIGGER_BORDER_CLASS,
@@ -351,6 +359,11 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
             </span>
           </button>
         </DropdownMenuTrigger>
+        {fieldState && (
+          <span id={fieldStateId} className='sr-only'>
+            {fieldState}
+          </span>
+        )}
         <DropdownMenuContent
           align={align}
           onOpenAutoFocus={searchable ? (event) => event.preventDefault() : undefined}