Merge pull request #741 from dev-five-git/fix/ui-kit-behavior

fix(components): make the UI kit, theme helpers and reset-css behave for real users

Author: owjs3901

.changepacks/changepack_log_ui_kit_behavior.json

@@ -0,0 +1,9 @@
+{
+    "changes":  {
+                    "packages/components/package.json":  "Patch",
+                    "packages/react/package.json":  "Patch",
+                    "packages/reset-css/package.json":  "Patch"
+                },
+    "note":  "Components behave for keyboard, screen readers and both React 18 and 19: Button, Input and Textarea no longer force generic aria-labels (the visible text or an associated label names them), Input and Textarea mark errors with aria-invalid and aria-describedby pointing at the message, a loading Button sets aria-busy, is disabled by default (disableWhileLoading) and announces loadingLabel, Input clear dispatches a real change event instead of a fabricated one, color customization variables sit on the container so every part sees them and every public color key matches its CSS custom property (new keys inputDisabledBackground, inputDisabledText, inputPlaceholder, primaryBackground, Textarea disabledBackground and disabledText), Select positions against the viewport and clears the opposite inset, SelectTrigger asChild composes the child onClick, onKeyDown and ref with its own, Stepper counts without a controlled value, keeps its bound and disabled safeguards and renders its text mode as an output element. Select no longer forces aria-labels over its trigger, options, confirm button and container: an option is named by its content, the listbox by its trigger (aria-labelledby) or by what the caller passes. ThemeScript takes nonce and other script props and never aborts on blocked storage or missing matchMedia, follows the system while no theme was chosen and themes saved in other tabs; getTheme, setTheme and initTheme are safe on the server and initTheme returns a function that stops following. reset-css clips accessible-hidden content as sanitize.css does. No new build errors.",
+    "date":  "2026-10-01T00:00:00.000Z"
+}

packages/components/src/__tests__/index.browser.test.ts

@@ -1,29 +1,29 @@
-import { describe, expect, it } from 'bun:test'
-
-describe('export', () => {
-  it('should export components', async () => {
-    const index = await import('../index')
-    expect({ ...index }).toEqual({
-      Button: expect.any(Object),
-      Input: expect.any(Object),
-      Textarea: expect.any(Object),
-      Stepper: expect.any(Function),
-      Select: expect.any(Function),
-      Radio: expect.any(Object),
-      RadioGroup: expect.any(Function),
-      SelectContainer: expect.any(Function),
-      SelectDivider: expect.any(Function),
-      SelectOption: expect.any(Function),
-      SelectTrigger: expect.any(Function),
-      StepperContainer: expect.any(Function),
-      StepperDecreaseButton: expect.any(Function),
-      StepperIncreaseButton: expect.any(Function),
-      StepperInput: expect.any(Function),
-      useStepper: expect.any(Function),
-      SelectContext: expect.any(Object),
-      useSelect: expect.any(Function),
-      Toggle: expect.any(Function),
-      Checkbox: expect.any(Object),
-    })
-  })
-})
+import { describe, expect, it } from 'bun:test'
+
+describe('export', () => {
+  it('should export components', async () => {
+    const index = await import('../index')
+    expect({ ...index }).toEqual({
+      Button: expect.any(Object),
+      Input: expect.any(Object),
+      Textarea: expect.any(Object),
+      Stepper: expect.any(Function),
+      Select: expect.any(Function),
+      Radio: expect.any(Object),
+      RadioGroup: expect.any(Function),
+      SelectContainer: expect.any(Function),
+      SelectDivider: expect.any(Function),
+      SelectOption: expect.any(Function),
+      SelectTrigger: expect.any(Object),
+      StepperContainer: expect.any(Function),
+      StepperDecreaseButton: expect.any(Function),
+      StepperIncreaseButton: expect.any(Function),
+      StepperInput: expect.any(Function),
+      useStepper: expect.any(Function),
+      SelectContext: expect.any(Object),
+      useSelect: expect.any(Function),
+      Toggle: expect.any(Function),
+      Checkbox: expect.any(Object),
+    })
+  })
+})

packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap

@@ -0,0 +1,93 @@
+import { describe, expect, it, mock } from 'bun:test'
+import { fireEvent, render } from 'bun-test-env-dom'
+
+import { Button } from '../index'
+
+describe('Button accessible name', () => {
+  it('takes its name from its text, not from a forced label', () => {
+    const { container } = render(<Button>Save changes</Button>)
+    const button = container.querySelector('button')!
+
+    expect(button).not.toHaveAttribute('aria-label')
+    expect(button.textContent).toBe('Save changes')
+  })
+
+  it('keeps a label given by the caller, as an icon-only button needs', () => {
+    const { container } = render(<Button aria-label="Close" icon={<svg />} />)
+
+    expect(container.querySelector('button')).toHaveAttribute(
+      'aria-label',
+      'Close',
+    )
+  })
+})
+
+describe('Button loading', () => {
+  it('announces the busy state and cannot be activated twice', () => {
+    const onClick = mock()
+    const { container } = render(
+      <Button loading onClick={onClick}>
+        Save
+      </Button>,
+    )
+    const button = container.querySelector('button')!
+
+    expect(button).toHaveAttribute('aria-busy', 'true')
+    expect(button).toBeDisabled()
+    expect(button).toHaveAttribute('aria-disabled', 'true')
+    fireEvent.click(button)
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('tells assistive technology what it is waiting for', () => {
+    const { container } = render(
+      <Button loading loadingLabel="Saving">
+        Save
+      </Button>,
+    )
+    const status = container.querySelector('[role=status]')
+
+    expect(status?.textContent).toBe('Saving')
+  })
+
+  it('says Loading by default and says nothing when it is not loading', () => {
+    const loading = render(<Button loading>Save</Button>)
+    expect(loading.container.querySelector('[role=status]')?.textContent).toBe(
+      'Loading',
+    )
+
+    const idle = render(<Button>Save</Button>)
+    expect(idle.container.querySelector('[role=status]')).toBeNull()
+    expect(idle.container.querySelector('button')).not.toHaveAttribute(
+      'aria-busy',
+    )
+    expect(idle.container.querySelector('button')).not.toHaveAttribute(
+      'aria-disabled',
+    )
+  })
+
+  it('stays actionable while loading when it is told not to disable', () => {
+    const onClick = mock()
+    const { container } = render(
+      <Button disableWhileLoading={false} loading onClick={onClick}>
+        Save
+      </Button>,
+    )
+    const button = container.querySelector('button')!
+
+    expect(button).toHaveAttribute('aria-busy', 'true')
+    expect(button).not.toBeDisabled()
+    fireEvent.click(button)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('stays disabled when the caller disables it, loading or not', () => {
+    const { container } = render(
+      <Button disabled disableWhileLoading={false}>
+        Save
+      </Button>,
+    )
+
+    expect(container.querySelector('button')).toBeDisabled()
+  })
+})

packages/components/src/components/Button/__tests__/behavior.browser.test.tsx

@@ -26,6 +26,10 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   ellipsis?: boolean
   loading?: boolean
   loadingSpinner?: 'whole' | 'partial'
+  /** Whether a loading button is disabled, so it cannot be activated twice. Defaults to true. */
+  disableWhileLoading?: boolean
+  /** What assistive technology announces while the button is loading */
+  loadingLabel?: string
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
@@ -44,10 +48,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       disabled,
       loading = false,
       loadingSpinner = 'whole',
+      disableWhileLoading = true,
+      loadingLabel = 'Loading',
       ...props
     },
     ref,
   ) {
+    const blocked = !!disabled || (loading && disableWhileLoading)
     return (
       <DevupButton
         ref={ref}
@@ -164,8 +171,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             default: 'var(--inputBackground, #2E2E2E)',
           }[variant],
         }}
-        aria-disabled={disabled}
-        aria-label="button"
+        aria-busy={loading || undefined}
+        aria-disabled={blocked || undefined}
         bg={
           {
             primary: 'var(--primary, #8163E1)',
@@ -196,7 +203,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           }[variant]
         }
         cursor="pointer"
-        disabled={disabled}
+        disabled={blocked}
         fontSize={
           {
             default: ['14px', null, null, null, '15px'],
@@ -267,6 +274,19 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           >
             {children}
           </Box>
+          {loading && (
+            <Box
+              as="span"
+              clipPath="inset(50%)"
+              h="1px"
+              overflow="hidden"
+              pos="absolute"
+              role="status"
+              w="1px"
+            >
+              {loadingLabel}
+            </Box>
+          )}
         </Box>
       </DevupButton>
     )