fix(react): don't render false boolean props as attributes

packages/react-router/test/base/src/App.tsx

@@ -70,6 +70,7 @@ import { RouterLinkModifierClick, RouterLinkModifierClickTarget } from './pages/
 import { NavigateRootPageA, NavigateRootPageB, NavigateRootPageC } from './pages/navigate-root/NavigateRoot';
 import SuspenseOutlet from './pages/suspense-outlet/SuspenseOutlet';
 import { PropsUpdateDirect, PropsUpdateRoutesWrapper } from './pages/props-update/PropsUpdate';
+import DisabledButton from './pages/disabled-button/DisabledButton';
 
 setupIonicReact();
 
@@ -81,6 +82,7 @@ const App: React.FC = () => {
       <IonReactRouter basename={import.meta.env?.BASE_URL?.replace(/\/$/, '') || undefined}>
         <IonRouterOutlet>
           <Route path="/" element={<Main />} />
+          <Route path="/disabled-button" element={<DisabledButton />} />
           <Route path="/routing/*" element={<Routing />} />
           <Route path="/dynamic-routes/*" element={<DynamicRoutes />} />
           <Route path="/multiple-tabs/*" element={<MultipleTabs />} />

packages/react-router/test/base/src/pages/Main.tsx

@@ -192,6 +192,9 @@ const Main: React.FC = () => {
           <IonItem routerLink="/props-update-direct/child">
             <IonLabel>Props Update (direct)</IonLabel>
           </IonItem>
+          <IonItem routerLink="/disabled-button">
+            <IonLabel>Disabled Button</IonLabel>
+          </IonItem>
         </IonList>
       </IonContent>
     </IonPage>

packages/react-router/test/base/src/pages/disabled-button/DisabledButton.tsx

@@ -0,0 +1,44 @@
+import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
+import React, { useState } from 'react';
+
+/**
+ * `<IonButton disabled={false}>` must not render a `disabled="false"` attribute
+ * on the host. ion-button is a routing-wrapped component (createRoutingComponent),
+ * so this validates the fix end-to-end with a real component in a real browser.
+ */
+const DisabledButton: React.FC = () => {
+  const [toggleDisabled, setToggleDisabled] = useState(false);
+
+  return (
+    <IonPage data-pageid="disabled-button">
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Disabled Button</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonButton id="btn-false" disabled={false}>
+          disabled false
+        </IonButton>
+
+        <IonButton id="btn-true" disabled={true}>
+          disabled true
+        </IonButton>
+
+        <IonButton id="btn-aria" aria-expanded={false}>
+          aria-expanded false
+        </IonButton>
+
+        <IonButton id="btn-toggle" disabled={toggleDisabled}>
+          toggle target
+        </IonButton>
+
+        <IonButton id="btn-do-toggle" onClick={() => setToggleDisabled((v) => !v)}>
+          toggle
+        </IonButton>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default DisabledButton;

packages/react-router/test/base/tests/e2e/playwright/disabled-button.spec.ts

@@ -0,0 +1,53 @@
+import { test, expect } from '@playwright/test';
+
+import { ionPageVisible, withTestingMode } from './utils/test-utils';
+
+/**
+ * `<IonButton disabled={false}>` must not leave a `disabled="false"` attribute
+ * on the host. ion-button is routing-wrapped (createRoutingComponent), so this
+ * is the real end-to-end check with an actual @ionic/react component.
+ */
+test.describe('IonButton disabled boolean attribute', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(withTestingMode('/disabled-button'));
+    await ionPageVisible(page, 'disabled-button');
+  });
+
+  test('disabled={false} should not render a disabled attribute', async ({ page }, testInfo) => {
+    testInfo.annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/27930',
+    });
+
+    const button = page.locator('#btn-false');
+    await expect(button).toHaveJSProperty('disabled', false);
+    await expect(button).not.toHaveAttribute('disabled', /.*/);
+    // The inner native button must be interactive.
+    await expect(button.locator('button')).not.toBeDisabled();
+  });
+
+  test('disabled={true} should render a disabled, non-interactive button', async ({ page }) => {
+    const button = page.locator('#btn-true');
+    await expect(button).toHaveJSProperty('disabled', true);
+    await expect(button).toHaveAttribute('disabled', '');
+    await expect(button.locator('button')).toBeDisabled();
+  });
+
+  test('aria-expanded={false} should be preserved (meaningful, not a boolean attribute)', async ({ page }) => {
+    // ion-button relocates aria-* from the host onto its inner native button, so
+    // the wrapper must NOT strip aria-expanded="false" (unlike disabled="false"):
+    // it has to survive on the host long enough to be inherited here.
+    const nativeButton = page.locator('#btn-aria button');
+    await expect(nativeButton).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  test('toggling disabled false -> true should disable the button', async ({ page }) => {
+    const button = page.locator('#btn-toggle');
+    await expect(button).not.toHaveAttribute('disabled', /.*/);
+
+    await page.locator('#btn-do-toggle').click();
+
+    await expect(button).toHaveAttribute('disabled', '');
+    await expect(button).toHaveJSProperty('disabled', true);
+  });
+});

packages/react/src/components/__tests__/createRoutingComponent.spec.tsx

@@ -0,0 +1,104 @@
+// Jest can't import Ionic's ESM-only custom elements; stub the values the
+// wrapper's util chain reaches.
+jest.mock('@ionic/core/components', () => ({
+  getPlatforms: () => [],
+  isPlatform: () => false,
+  componentOnReady: (_el: HTMLElement, cb: () => void) => cb(),
+}));
+
+import { act, render } from '@testing-library/react';
+
+import { createRoutingComponent } from '../createRoutingComponent';
+
+/**
+ * Routing-wrapped components (ion-button, ion-card, ion-fab-button,
+ * ion-item-option, ion-breadcrumb, ion-router-link) go through
+ * `createRoutingComponent`, which is not covered by the @lit/react runtime that
+ * fixes the generated components on v9. `disabled={false}` must not leave a
+ * stray `disabled="false"` on the host, since presence of an HTML boolean
+ * attribute means "true" to assistive tech.
+ */
+const RoutingEl = createRoutingComponent<any, any>('fake-routing-el');
+
+describe('createRoutingComponent boolean attributes', () => {
+  it('should not leave a disabled="false" attribute when disabled={false}', () => {
+    const { container } = render(<RoutingEl disabled={false}>x</RoutingEl>);
+    const el = container.querySelector('fake-routing-el')!;
+
+    expect(el.hasAttribute('disabled')).toBe(false);
+  });
+
+  it('should preserve aria-* attributes set to false (meaningful, not boolean attributes)', () => {
+    const { container } = render(<RoutingEl aria-expanded={false}>x</RoutingEl>);
+    const el = container.querySelector('fake-routing-el')!;
+
+    // aria-expanded="false" means "collapsed", distinct from the attribute being absent.
+    expect(el.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('should preserve enumerated attributes set to false (e.g. draggable)', () => {
+    const { container } = render(<RoutingEl draggable={false}>x</RoutingEl>);
+    const el = container.querySelector('fake-routing-el')!;
+
+    // draggable="false" explicitly disables dragging, distinct from absence.
+    expect(el.getAttribute('draggable')).toBe('false');
+  });
+
+  it('should preserve camelCased enumerated attributes set to false (e.g. spellCheck)', () => {
+    const { container } = render(<RoutingEl spellCheck={false}>x</RoutingEl>);
+    const el = container.querySelector('fake-routing-el')!;
+
+    // The wrapper dash-cases React prop names, so spellCheck renders as
+    // spell-check; spell-check="false" is meaningful and must survive.
+    expect(el.getAttribute('spell-check')).toBe('false');
+  });
+
+  it('should keep the disabled attribute when disabled={true}', () => {
+    const { container } = render(<RoutingEl disabled={true}>x</RoutingEl>);
+    const el = container.querySelector('fake-routing-el')!;
+
+    expect(el.hasAttribute('disabled')).toBe(true);
+  });
+
+  it('should disable the element when toggling disabled false -> true', () => {
+    const { container, rerender } = render(<RoutingEl disabled={false}>x</RoutingEl>);
+    const el = container.querySelector('fake-routing-el')!;
+    expect(el.hasAttribute('disabled')).toBe(false);
+
+    act(() => {
+      rerender(<RoutingEl disabled={true}>x</RoutingEl>);
+    });
+
+    expect(el.hasAttribute('disabled')).toBe(true);
+  });
+
+  it('should drop the attribute when toggling disabled true -> false', () => {
+    const { container, rerender } = render(<RoutingEl disabled={true}>x</RoutingEl>);
+    const el = container.querySelector('fake-routing-el')!;
+
+    act(() => {
+      rerender(<RoutingEl disabled={false}>x</RoutingEl>);
+    });
+
+    expect(el.hasAttribute('disabled')).toBe(false);
+  });
+
+  it('should not re-add disabled="false" after an unrelated re-render', () => {
+    const { container, rerender } = render(
+      <RoutingEl disabled={false} title="a">
+        x
+      </RoutingEl>
+    );
+    const el = container.querySelector('fake-routing-el')!;
+
+    act(() => {
+      rerender(
+        <RoutingEl disabled={false} title="b">
+          x
+        </RoutingEl>
+      );
+    });
+
+    expect(el.hasAttribute('disabled')).toBe(false);
+  });
+});

packages/react/src/components/__tests__/utils.spec.ts

@@ -51,3 +51,41 @@ describe('attachProps', () => {
     expect(Object.keys((div as any).__events)).toEqual(['ionClick']);
   });
 });
+
+describe('attachProps boolean attributes', () => {
+  it('should strip a stray disabled="false" attribute when the prop is false', () => {
+    const div = document.createElement('div');
+    div.setAttribute('disabled', 'false');
+
+    utils.attachProps(div, { disabled: false });
+
+    expect(div.hasAttribute('disabled')).toBe(false);
+  });
+
+  it('should preserve aria-* attributes set to false', () => {
+    const div = document.createElement('div');
+    div.setAttribute('aria-expanded', 'false');
+
+    utils.attachProps(div, { 'aria-expanded': false });
+
+    expect(div.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('should preserve data-* attributes set to false', () => {
+    const div = document.createElement('div');
+    div.setAttribute('data-active', 'false');
+
+    utils.attachProps(div, { 'data-active': false });
+
+    expect(div.getAttribute('data-active')).toBe('false');
+  });
+
+  it('should preserve enumerated attributes set to false (e.g. draggable)', () => {
+    const div = document.createElement('div');
+    div.setAttribute('draggable', 'false');
+
+    utils.attachProps(div, { draggable: false });
+
+    expect(div.getAttribute('draggable')).toBe('false');
+  });
+});

packages/react/src/components/react-component-lib/__tests__/createComponent.spec.tsx

@@ -0,0 +1,46 @@
+import { act, render } from '@testing-library/react';
+
+import { createReactComponent } from '../createComponent';
+
+/**
+ * Components built with createReactComponent (e.g. IonBackButton, IonTabButton
+ * via inner-proxies) render attributes directly and sync props through
+ * attachProps, so they must get the same `disabled="false"` stripping as
+ * routing-wrapped components. Presence of an HTML boolean attribute means "true"
+ * to assistive tech, so a false-valued boolean must not leave a stray attribute.
+ */
+const ReactEl = createReactComponent<any, any>('fake-react-el');
+
+describe('createReactComponent boolean attributes', () => {
+  it('should not leave a disabled="false" attribute when disabled={false}', () => {
+    const { container } = render(<ReactEl disabled={false}>x</ReactEl>);
+    const el = container.querySelector('fake-react-el')!;
+
+    expect(el.hasAttribute('disabled')).toBe(false);
+  });
+
+  it('should preserve aria-* attributes set to false', () => {
+    const { container } = render(<ReactEl aria-expanded={false}>x</ReactEl>);
+    const el = container.querySelector('fake-react-el')!;
+
+    expect(el.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('should keep the disabled attribute when disabled={true}', () => {
+    const { container } = render(<ReactEl disabled={true}>x</ReactEl>);
+    const el = container.querySelector('fake-react-el')!;
+
+    expect(el.hasAttribute('disabled')).toBe(true);
+  });
+
+  it('should drop the attribute when toggling disabled true -> false', () => {
+    const { container, rerender } = render(<ReactEl disabled={true}>x</ReactEl>);
+    const el = container.querySelector('fake-react-el')!;
+
+    act(() => {
+      rerender(<ReactEl disabled={false}>x</ReactEl>);
+    });
+
+    expect(el.hasAttribute('disabled')).toBe(false);
+  });
+});

packages/react/src/components/react-component-lib/utils/attachProps.ts

@@ -1,5 +1,30 @@
 import { camelToDashCase } from './case';
 
+// Enumerated attributes where the literal string "false" is meaningful and
+// differs from the attribute being absent, so they must not be stripped like
+// HTML boolean attributes. These are the dash-cased attribute names produced by
+// camelToDashCase (e.g. the `spellCheck` prop renders as `spell-check`), so the
+// entries must match that form. aria-* and data-* are handled by prefix below.
+const NON_BOOLEAN_FALSE_ATTRIBUTES = new Set(['draggable', 'translate', 'spell-check', 'content-editable']);
+
+/**
+ * React serializes a boolean prop set to `false` (e.g. `disabled={false}`) as
+ * the string attribute `disabled="false"`. For HTML boolean attributes the mere
+ * presence means "true", so assistive tech treats the element as
+ * disabled/readonly even though Ionic renders it as interactive. The @lit/react
+ * runtime fixes this for the generated components on v9, but the hand-rolled
+ * wrappers (createReactComponent, createRoutingComponent, ...) render attributes
+ * directly and sync props through attachProps, so we strip the stray attribute
+ * here after the property has been assigned.
+ *
+ * This only matters on React 17 and 18. React 19 added full custom-element
+ * support and no longer serializes a `false` boolean prop to a `="false"`
+ * attribute, so there is nothing to strip there (this stays a harmless no-op).
+ * Once React 17/18 support is dropped, this stripping can be removed.
+ */
+const isStaleFalseBooleanAttribute = (attribute: string) =>
+  !attribute.startsWith('aria-') && !attribute.startsWith('data-') && !NON_BOOLEAN_FALSE_ATTRIBUTES.has(attribute);
+
 export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => {
   // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
   if (node instanceof Element) {
@@ -32,6 +57,11 @@ export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}
         const propType = typeof newProps[name];
         if (propType === 'string') {
           node.setAttribute(camelToDashCase(name), newProps[name]);
+        } else if (newProps[name] === false) {
+          const attribute = camelToDashCase(name);
+          if (isStaleFalseBooleanAttribute(attribute)) {
+            node.removeAttribute(attribute);
+          }
         }
       }
     });