fix(core): correct read only property

- fix readonly to readOnly to align with native input type readOnly property

Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

projects/core/src/internal/base/button.test.ts

@@ -79,7 +79,7 @@ describe('base button', () => {
   });
 
   it('should remove aria-disabled if readonly', async () => {
-    element.readonly = true;
+    element.readOnly = true;
     await elementIsStable(element);
     expect(element._internals.ariaDisabled).toBe(null);
     expect(element.matches(':state(disabled)')).toBe(false);
@@ -117,7 +117,7 @@ describe('base button', () => {
     expect(element._internals.ariaExpanded).toBe('true');
     expect(element.matches(':state(expanded)')).toBe(true);
 
-    element.readonly = true;
+    element.readOnly = true;
     await elementIsStable(element);
     expect(element._internals.ariaExpanded).toBe(null);
     expect(element.matches(':state(expanded)')).toBe(false);
@@ -149,7 +149,7 @@ describe('base button', () => {
     expect(element._internals.ariaPressed).toBe('true');
     expect(element.matches(':state(pressed)')).toBe(true);
 
-    element.readonly = true;
+    element.readOnly = true;
     await elementIsStable(element);
     expect(element._internals.ariaPressed).toBe(null);
     expect(element.matches(':state(pressed)')).toBe(false);
@@ -172,31 +172,54 @@ describe('base button', () => {
   });
 
   it('should remove tabindex and role if readonly', async () => {
-    element.readonly = true;
+    element.readOnly = true;
     await elementIsStable(element);
     expect(element.tabIndex).toBe(-1);
     expect(element._internals.role).toBe('none');
     expect(element.getAttribute('role')).toBe(null);
   });
 
+  it('should map readonly attribute to readOnly property', async () => {
+    element.setAttribute('readonly', '');
+    await elementIsStable(element);
+    expect(element.readOnly).toBe(true);
+  });
+
+  it('should reflect readOnly property to readonly attribute', async () => {
+    element.readOnly = true;
+    await elementIsStable(element);
+    expect(element.hasAttribute('readonly')).toBe(true);
+
+    element.readOnly = false;
+    await elementIsStable(element);
+    expect(element.hasAttribute('readonly')).toBe(false);
+  });
+
+  it('should support deprecated readonly property alias', async () => {
+    element.readonly = true;
+    await elementIsStable(element);
+    expect(element.readOnly).toBe(true);
+    expect(element.hasAttribute('readonly')).toBe(true);
+  });
+
   it('should set the button type to submit if not defined within a form element', async () => {
     await elementIsStable(element);
     expect(element.type).toBe(undefined);
     expect(buttonInForm.type).toBe('button');
     expect(submitButtonInForm.type).toBe('submit');
   });
 
-  it('should add or remove button event listeners when readonly updates', async () => {
+  it('should add or remove button event listeners when readOnly updates', async () => {
     await elementIsStable(submitButtonInForm);
-    expect(submitButtonInForm.readonly).toBe(undefined);
+    expect(submitButtonInForm.readOnly).toBe(false);
 
     vi.spyOn(submitButtonInForm, 'removeEventListener');
-    submitButtonInForm.readonly = true;
+    submitButtonInForm.readOnly = true;
     await elementIsStable(submitButtonInForm);
     expect(submitButtonInForm.removeEventListener).toBeCalledTimes(3); // 2x button controller, 1x command controller
 
     vi.spyOn(submitButtonInForm, 'addEventListener');
-    submitButtonInForm.readonly = false;
+    submitButtonInForm.readOnly = false;
     await elementIsStable(submitButtonInForm);
     expect(submitButtonInForm.addEventListener).toBeCalledTimes(3); // 2x button controller, 1x command controller
   });

projects/core/src/internal/base/button.ts

@@ -53,7 +53,18 @@ export class BaseButton extends LitElement {
    * Like input readonly, sets a button semantically as visual treatment only
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
    */
-  @property({ type: Boolean, reflect: true }) readonly: boolean;
+  @property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly = false;
+
+  /**
+   * @deprecated Use `readOnly`. The `readonly` attribute remains supported.
+   */
+  get readonly(): boolean {
+    return this.readOnly;
+  }
+
+  set readonly(value: boolean) {
+    this.readOnly = value; // eslint-disable-line local/stateless-property
+  }
 
   #form: string | HTMLFormElement | null = null;
 

projects/core/src/internal/controllers/state-current.controller.test.ts

@@ -12,7 +12,7 @@ import { stateCurrent } from '@nvidia-elements/core/internal';
 @customElement('state-current-controller-test-element')
 class StateCurrentControllerTestElement extends LitElement {
   @property({ type: String }) current: 'page' | 'step';
-  @property({ type: Boolean }) readonly: boolean;
+  @property({ type: Boolean, attribute: 'readonly' }) readOnly = false;
   declare _internals: ElementInternals;
 
   render() {
@@ -70,7 +70,7 @@ describe('state-current.controller', () => {
     expect(element._internals.ariaCurrent).toBe('page');
     expect(element.matches(':state(current)')).toBe(true);
 
-    element.readonly = true;
+    element.readOnly = true;
     await elementIsStable(element);
     expect(element._internals.ariaCurrent).toBe(null);
     expect(element.matches(':state(current)')).toBe(false);
@@ -107,7 +107,7 @@ describe('state-current.controller', () => {
     a.href = '#';
     element.appendChild(a);
     element.current = 'page';
-    element.readonly = true;
+    element.readOnly = true;
     element._internals.states.add('anchor');
     element.requestUpdate();
     await elementIsStable(element);
@@ -119,12 +119,12 @@ describe('state-current.controller', () => {
 
   it('should restore current state when readonly is removed', async () => {
     element.current = 'page';
-    element.readonly = true;
+    element.readOnly = true;
     await elementIsStable(element);
     expect(element._internals.ariaCurrent).toBe(null);
     expect(element.matches(':state(current)')).toBe(false);
 
-    element.readonly = false;
+    element.readOnly = false;
     await elementIsStable(element);
     expect(element._internals.ariaCurrent).toBe('page');
     expect(element.matches(':state(current)')).toBe(true);

projects/core/src/internal/controllers/state-current.controller.ts

@@ -14,7 +14,7 @@ export function stateCurrent<T extends Current>(): ClassDecorator {
     target.addInitializer!((instance: T) => new StateCurrentController(instance));
 }
 
-type Current = ReactiveElement & { current: 'page' | 'step'; readonly?: boolean; _internals?: ElementInternals };
+type Current = ReactiveElement & { current: 'page' | 'step'; readOnly?: boolean; _internals?: ElementInternals };
 
 export class StateCurrentController<T extends Current> implements ReactiveController {
   constructor(private host: T) {
@@ -26,7 +26,7 @@ export class StateCurrentController<T extends Current> implements ReactiveContro
   }
 
   hostUpdated() {
-    if (this.host.readonly) {
+    if (this.host.readOnly) {
       this.host._internals!.ariaCurrent = null;
       this.host._internals!.states.delete('current');
       return;

projects/core/src/internal/controllers/state-disabled.controller.test.ts

@@ -12,7 +12,7 @@ import { stateDisabled } from '@nvidia-elements/core/internal';
 @customElement('state-disabled-controller-test-element')
 class StateDisabledControllerTestElement extends LitElement {
   @property({ type: Boolean }) disabled = false;
-  @property({ type: Boolean }) readonly = false;
+  @property({ type: Boolean, attribute: 'readonly' }) readOnly = false;
   declare _internals: ElementInternals;
 }
 
@@ -54,7 +54,7 @@ describe('state-disabled.controller', () => {
   });
 
   it('should remove aria-disabled if readonly', async () => {
-    element.readonly = true;
+    element.readOnly = true;
     await elementIsStable(element);
     expect(element._internals.ariaDisabled).toBe(null);
     expect(element.matches(':state(disabled)')).toBe(false);

projects/core/src/internal/controllers/state-disabled.controller.ts

@@ -15,7 +15,7 @@ export function stateDisabled<T extends Disabled>(): ClassDecorator {
     target.addInitializer!((instance: T) => new StateDisabledController(instance));
 }
 
-export type Disabled = ReactiveElement & { disabled: boolean; readonly?: boolean; _internals?: ElementInternals };
+export type Disabled = ReactiveElement & { disabled: boolean; readOnly?: boolean; _internals?: ElementInternals };
 
 export class StateDisabledController<T extends Disabled> implements ReactiveController {
   constructor(private host: T) {
@@ -39,7 +39,7 @@ export class StateDisabledController<T extends Disabled> implements ReactiveCont
       this.host._internals!.states.delete('disabled');
     }
 
-    if (this.host.readonly) {
+    if (this.host.readOnly) {
       this.host._internals!.ariaDisabled = null;
     }
   }

projects/core/src/internal/controllers/state-expanded.controller.test.ts

@@ -12,7 +12,7 @@ import { stateExpanded } from '@nvidia-elements/core/internal';
 @customElement('state-expanded-controller-test-element')
 class StateExpandedControllerTestElement extends LitElement {
   @property({ type: Boolean }) expanded: boolean;
-  @property({ type: Boolean }) readonly: boolean;
+  @property({ type: Boolean, attribute: 'readonly' }) readOnly = false;
   declare _internals: ElementInternals;
 }
 
@@ -66,7 +66,7 @@ describe('state-expanded.controller', () => {
     expect(element._internals.ariaExpanded).toBe('true');
     expect(element.matches(':state(expanded)')).toBe(true);
 
-    element.readonly = true;
+    element.readOnly = true;
     await elementIsStable(element);
     expect(element._internals.ariaExpanded).toBe(null);
     expect(element.matches(':state(expanded)')).toBe(false);

projects/core/src/internal/controllers/state-expanded.controller.ts

@@ -15,7 +15,7 @@ export function stateExpanded<T extends Expanded>(): ClassDecorator {
     target.addInitializer!((instance: T) => new StateExpandedController(instance));
 }
 
-export type Expanded = ReactiveElement & { expanded: boolean; readonly?: boolean; _internals?: ElementInternals };
+export type Expanded = ReactiveElement & { expanded: boolean; readOnly?: boolean; _internals?: ElementInternals };
 
 export class StateExpandedController<T extends Expanded> implements ReactiveController {
   constructor(private host: T) {
@@ -37,7 +37,7 @@ export class StateExpandedController<T extends Expanded> implements ReactiveCont
       this.host._internals!.states.delete('expanded');
     }
 
-    if (this.host.readonly) {
+    if (this.host.readOnly) {
       this.host._internals!.ariaExpanded = null;
       this.host._internals!.states.delete('expanded');
     }

projects/core/src/internal/controllers/state-pressed.controller.test.ts

@@ -12,7 +12,7 @@ import { statePressed } from '@nvidia-elements/core/internal';
 @customElement('state-pressed-controller-test-element')
 class StatePressedControllerTestElement extends LitElement {
   @property({ type: Boolean }) pressed: boolean;
-  @property({ type: Boolean }) readonly: boolean;
+  @property({ type: Boolean, attribute: 'readonly' }) readOnly = false;
   declare _internals: ElementInternals;
 }
 
@@ -60,7 +60,7 @@ describe('state-pressed.controller', () => {
     expect(element._internals.ariaPressed).toBe('true');
     expect(element.matches(':state(pressed)')).toBe(true);
 
-    element.readonly = true;
+    element.readOnly = true;
     await elementIsStable(element);
     expect(element._internals.ariaPressed).toBe(null);
     expect(element.matches(':state(pressed)')).toBe(false);

projects/core/src/internal/controllers/state-pressed.controller.ts

@@ -15,7 +15,7 @@ export function statePressed<T extends Pressed>(): ClassDecorator {
     target.addInitializer!((instance: T) => new StatePressedController(instance));
 }
 
-export type Pressed = ReactiveElement & { pressed: boolean; readonly?: boolean; _internals?: ElementInternals };
+export type Pressed = ReactiveElement & { pressed: boolean; readOnly?: boolean; _internals?: ElementInternals };
 
 export class StatePressedController<T extends Pressed> implements ReactiveController {
   constructor(private host: T) {
@@ -37,7 +37,7 @@ export class StatePressedController<T extends Pressed> implements ReactiveContro
       this.host._internals!.states.delete('pressed');
     }
 
-    if (this.host.readonly) {
+    if (this.host.readOnly) {
       this.host._internals!.ariaPressed = null;
       this.host._internals!.states.delete('pressed');
     }