fix: harden control presentation activation

pawelgrimm · pawelgrimm · commit 14f7734a42a4 · 2026-05-28T16:57:49.000-05:00
diff --git a/src/control-presentation/control-presentation.test.tsx b/src/control-presentation/control-presentation.test.tsx
@@ -12,22 +12,22 @@ describe('ControlPresentation', () => {
     it('renders the control passed as children', () => {
         render(
             <ControlPresentation>
-                <input aria-label="Subject" data-testid="subject" />
+                <input aria-label="Subject" />
             </ControlPresentation>,
         )
-        const control = screen.getByTestId('subject')
+        const control = screen.getByRole('textbox', { name: 'Subject' })
         expect(control.tagName).toBe('INPUT')
     })
 
-    it('is polymorphic — any element can be the control', () => {
+    it('is polymorphic - any element can be the control', () => {
         render(
             <ControlPresentation>
-                <button type="button" aria-label="Subject" data-testid="subject">
+                <button type="button" aria-label="Subject">
                     Choose
                 </button>
             </ControlPresentation>,
         )
-        const control = screen.getByTestId('subject')
+        const control = screen.getByRole('button', { name: 'Subject' })
         expect(control.tagName).toBe('BUTTON')
         expect(control).toHaveTextContent('Choose')
     })
@@ -46,7 +46,7 @@ describe('ControlPresentation', () => {
                 />
             </ControlPresentation>,
         )
-        const control = screen.getByTestId('subject')
+        const control = screen.getByRole('textbox', { name: 'Subject' })
         expect(control).toHaveAttribute('type', 'email')
         expect(control).toHaveAttribute('placeholder', 'you@example.com')
         expect(control).toHaveAttribute('data-custom', 'yes')
@@ -57,16 +57,39 @@ describe('ControlPresentation', () => {
     it('focuses the control when a non-interactive startSlot is clicked', async () => {
         render(
             <ControlPresentation startSlot={<TestIcon />}>
-                <input aria-label="Subject" data-testid="subject" />
+                <input aria-label="Subject" />
             </ControlPresentation>,
         )
-        const control = screen.getByTestId('subject')
+        const control = screen.getByRole('textbox', { name: 'Subject' })
         expect(control).not.toHaveFocus()
 
         await userEvent.click(screen.getByTestId('test-icon'))
         expect(control).toHaveFocus()
     })
 
+    it('does not forward interactive slot clicks to the control', async () => {
+        const onControlClick = jest.fn()
+        const onSlotClick = jest.fn()
+        render(
+            <ControlPresentation
+                endSlot={
+                    <button type="button" onClick={onSlotClick}>
+                        Clear
+                    </button>
+                }
+            >
+                <input aria-label="Subject" onClick={onControlClick} />
+            </ControlPresentation>,
+        )
+
+        const slotButton = screen.getByRole('button', { name: 'Clear' })
+        await userEvent.click(slotButton)
+
+        expect(onSlotClick).toHaveBeenCalledTimes(1)
+        expect(onControlClick).not.toHaveBeenCalled()
+        expect(slotButton).toHaveFocus()
+    })
+
     it('merges exceptionallySetClassName onto the wrapper', () => {
         const { container } = render(
             <ControlPresentation exceptionallySetClassName="custom-class">
@@ -93,6 +116,15 @@ describe('ControlPresentation', () => {
         expect(screen.getByTestId('b')).toBeInTheDocument()
     })
 
+    it('renders numeric zero slot content', () => {
+        render(
+            <ControlPresentation startSlot={0} endSlot={0}>
+                <input aria-label="Subject" />
+            </ControlPresentation>,
+        )
+        expect(screen.getAllByText('0')).toHaveLength(2)
+    })
+
     describe('a11y', () => {
         it('renders with no a11y violations', async () => {
             const { container } = render(
diff --git a/src/control-presentation/control-presentation.tsx b/src/control-presentation/control-presentation.tsx
@@ -24,7 +24,12 @@ export type ControlPresentationProps = {
      * or dropdown-trigger chevron).
      */
     endSlot?: SlotContent
-} & Omit<ComponentProps<typeof OutlinedControlContainer>, 'borderRadius'>
+
+    /**
+     * The single control element to wrap.
+     */
+    children: React.ReactElement
+} & Omit<ComponentProps<typeof OutlinedControlContainer>, 'borderRadius' | 'children'>
 
 /**
  * The visual chrome of an inline, single-row, text-field-style input: a
@@ -47,11 +52,15 @@ export const ControlPresentation = forwardRef<HTMLDivElement, ControlPresentatio
                 onClick={onClick}
                 exceptionallySetClassName={classNames(styles.container, exceptionallySetClassName)}
             >
-                {startSlot ? (
+                {startSlot != null ? (
                     <Slot className={[styles.slot, styles.startSlot]}>{startSlot}</Slot>
                 ) : null}
-                <div className={styles.control}>{children}</div>
-                {endSlot ? <Slot className={[styles.slot, styles.endSlot]}>{endSlot}</Slot> : null}
+                <div className={styles.control} data-reactist-control>
+                    {children}
+                </div>
+                {endSlot != null ? (
+                    <Slot className={[styles.slot, styles.endSlot]}>{endSlot}</Slot>
+                ) : null}
             </OutlinedControlContainer>
         )
     },
diff --git a/src/control-presentation/outlined-control-container.module.css b/src/control-presentation/outlined-control-container.module.css
@@ -18,11 +18,17 @@
  * The :not(='false') exclusion treats aria-readonly="false" /
  * data-readonly="false" as "not read-only" per the ARIA spec. */
 .container:has(
-    input:read-only,
-    textarea:read-only,
-    [aria-readonly]:not([aria-readonly='false']),
-    [data-readonly]:not([data-readonly='false'])
-) {
+    [data-reactist-control] input:read-only,
+    [data-reactist-control] textarea:read-only,
+    [data-reactist-control] [aria-readonly]:not([aria-readonly='false']),
+    [data-reactist-control] [data-readonly]:not([data-readonly='false'])
+),
+.container:not(:has([data-reactist-control])):has(
+        input:read-only,
+        textarea:read-only,
+        [aria-readonly]:not([aria-readonly='false']),
+        [data-readonly]:not([data-readonly='false'])
+    ) {
     background-color: var(--reactist-field-readonly-background);
     color: var(--reactist-field-readonly-content);
 }
@@ -32,17 +38,29 @@
  * keep elements focusable while announcing as disabled), and the
  * data-attr convention used by Ariakit/Radix. */
 .container:has(
-    :disabled,
-    [aria-disabled]:not([aria-disabled='false']),
-    [data-disabled]:not([data-disabled='false'])
-) {
+    [data-reactist-control] :disabled,
+    [data-reactist-control] [aria-disabled]:not([aria-disabled='false']),
+    [data-reactist-control] [data-disabled]:not([data-disabled='false'])
+),
+.container:not(:has([data-reactist-control])):has(
+        :disabled,
+        [aria-disabled]:not([aria-disabled='false']),
+        [data-disabled]:not([data-disabled='false'])
+    ) {
     background-color: var(--reactist-field-disabled-background);
     color: var(--reactist-field-disabled-content);
 }
 
 /* Interactive border (hover/focus) — suppressed when the control is
  * in any disabled state. */
-.container:not(
+.container:has([data-reactist-control]):not(
+        :has(
+            [data-reactist-control] :disabled,
+            [data-reactist-control] [aria-disabled]:not([aria-disabled='false']),
+            [data-reactist-control] [data-disabled]:not([data-disabled='false'])
+        )
+    ):hover,
+.container:not(:has([data-reactist-control])):not(
         :has(
             :disabled,
             [aria-disabled]:not([aria-disabled='false']),
@@ -52,7 +70,14 @@
     border-color: var(--reactist-inputs-hover);
 }
 
-.container:not(
+.container:has([data-reactist-control]):not(
+        :has(
+            [data-reactist-control] :disabled,
+            [data-reactist-control] [aria-disabled]:not([aria-disabled='false']),
+            [data-reactist-control] [data-disabled]:not([data-disabled='false'])
+        )
+    ):focus-within,
+.container:not(:has([data-reactist-control])):not(
         :has(
             :disabled,
             [aria-disabled]:not([aria-disabled='false']),
@@ -63,7 +88,8 @@
 }
 
 /* Invalid: matches the ARIA convention only. */
-.container:has([aria-invalid]:not([aria-invalid='false'])) {
+.container:has([data-reactist-control] [aria-invalid]:not([aria-invalid='false'])),
+.container:not(:has([data-reactist-control])):has([aria-invalid]:not([aria-invalid='false'])) {
     border-color: var(--reactist-inputs-alert) !important;
 }
 
diff --git a/src/control-presentation/outlined-control-container.test.tsx b/src/control-presentation/outlined-control-container.test.tsx
@@ -78,16 +78,46 @@ describe('OutlinedControlContainer', () => {
         it('focuses the inner control when the wrapper is clicked', async () => {
             const { container } = render(
                 <OutlinedControlContainer>
-                    <input data-testid="control" aria-label="control" />
+                    <input aria-label="control" />
                 </OutlinedControlContainer>,
             )
-            const control = screen.getByTestId('control')
+            const control = screen.getByRole('textbox', { name: 'control' })
             expect(control).not.toHaveFocus()
 
             await userEvent.click(container.firstElementChild as Element)
             expect(control).toHaveFocus()
         })
 
+        it('does not dispatch a synthetic click for text inputs', async () => {
+            const onControlClick = jest.fn()
+            const { container } = render(
+                <OutlinedControlContainer>
+                    <input aria-label="control" onClick={onControlClick} />
+                </OutlinedControlContainer>,
+            )
+            const control = screen.getByRole('textbox', { name: 'control' })
+
+            await userEvent.click(container.firstElementChild as Element)
+
+            expect(control).toHaveFocus()
+            expect(onControlClick).not.toHaveBeenCalled()
+        })
+
+        it('does not dispatch a synthetic click for textareas', async () => {
+            const onControlClick = jest.fn()
+            const { container } = render(
+                <OutlinedControlContainer>
+                    <textarea aria-label="control" onClick={onControlClick} />
+                </OutlinedControlContainer>,
+            )
+            const control = screen.getByRole('textbox', { name: 'control' })
+
+            await userEvent.click(container.firstElementChild as Element)
+
+            expect(control).toHaveFocus()
+            expect(onControlClick).not.toHaveBeenCalled()
+        })
+
         it('does not double-fire when the inner control is clicked directly', async () => {
             const onControlClick = jest.fn()
             render(
@@ -101,6 +131,23 @@ describe('OutlinedControlContainer', () => {
             expect(onControlClick).toHaveBeenCalledTimes(1)
         })
 
+        it('activates button-like controls when the wrapper is clicked', async () => {
+            const onControlClick = jest.fn()
+            const { container } = render(
+                <OutlinedControlContainer>
+                    <button type="button" onClick={onControlClick}>
+                        Choose
+                    </button>
+                </OutlinedControlContainer>,
+            )
+            const control = screen.getByRole('button', { name: 'Choose' })
+
+            await userEvent.click(container.firstElementChild as Element)
+
+            expect(control).toHaveFocus()
+            expect(onControlClick).toHaveBeenCalledTimes(1)
+        })
+
         it('calls a consumer onClick passed via Box props when the wrapper is clicked', async () => {
             const onClick = jest.fn()
             const { container } = render(
@@ -133,6 +180,36 @@ describe('OutlinedControlContainer', () => {
             expect(control).toHaveFocus()
         })
 
+        it('does not activate aria-disabled controls from wrapper clicks', async () => {
+            const onControlClick = jest.fn()
+            const { container } = render(
+                <OutlinedControlContainer>
+                    <button type="button" aria-disabled onClick={onControlClick}>
+                        Choose
+                    </button>
+                </OutlinedControlContainer>,
+            )
+
+            await userEvent.click(container.firstElementChild as Element)
+
+            expect(onControlClick).not.toHaveBeenCalled()
+        })
+
+        it('does not activate data-disabled controls from wrapper clicks', async () => {
+            const onControlClick = jest.fn()
+            const { container } = render(
+                <OutlinedControlContainer>
+                    <button type="button" data-disabled onClick={onControlClick}>
+                        Choose
+                    </button>
+                </OutlinedControlContainer>,
+            )
+
+            await userEvent.click(container.firstElementChild as Element)
+
+            expect(onControlClick).not.toHaveBeenCalled()
+        })
+
         it('uses showPicker for native <select>', async () => {
             const showPicker = jest.fn()
             const { container } = render(
diff --git a/src/control-presentation/outlined-control-container.tsx b/src/control-presentation/outlined-control-container.tsx
