fix(forms): improve aria attribute management

- Modified state controllers to correctly manage aria attributes when values are null or undefined.
- Improved test cases for state controllers to ensure proper aria attribute handling.
- Introduced custom slider defaults in tests to validate default behavior.
Signed-off-by: Cory Rylan <crylan@nvidia.com>

Author: coryrylan

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

@@ -64,6 +64,7 @@ describe('StateCurrentController', () => {
 element.current=null;
 element.sync();
 
+expect(element._internals!.ariaCurrent).toBe(null);
 expect(element.matches(':state(current)')).toBe(false);
 });
 
@@ -86,6 +87,17 @@ describe('StateCurrentController', () => {
 expect(element.matches(':state(current)')).toBe(false);
 });
 
+it('should preserve current value on anchor aria-current',()=>{
+constanchor=document.createElement('a');
+element.append(anchor);
+element._internals!.states.add('anchor');
+
+element.current='step';
+element.sync();
+
+expect(anchor.getAttribute('aria-current')).toBe('step');
+});
+
 it('should remove anchor aria-current while readonly',()=>{
 constanchor=document.createElement('a');
 element.append(anchor);

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

@@ -24,6 +24,8 @@ export class StateCurrentController<T extends Current> implements ReactiveContro
 
 hostUpdated(){
 if(this.host.readOnly){
+this.host._internals!.ariaCurrent=null;
+toggleState(this.host._internals!,'current',false);
 this.#syncAnchorCurrentAttribute();
 return;
 }
@@ -35,9 +37,8 @@ export class StateCurrentController<T extends Current> implements ReactiveContro
 return;
 }
 
-if(this.host.current!==null&&this.host.current!==undefined){
-this.host._internals!.ariaCurrent=`${this.host.current}`;
-}
+this.host._internals!.ariaCurrent=
+this.host.current===null||this.host.current===undefined ? null : `${this.host.current}`;
 
 toggleState(this.host._internals!,'current',Boolean(this.host.current));
 }
@@ -51,7 +52,7 @@ export class StateCurrentController<T extends Current> implements ReactiveContro
 
 if(anchor&&isCurrent){
 this.#anchorCurrentTarget?.removeAttribute('aria-current');
-anchor.setAttribute('aria-current','page');
+anchor.setAttribute('aria-current',this.host.current??'page');
 this.#anchorCurrentTarget =anchor;
 return;
 }

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

@@ -67,6 +67,9 @@ describe('StateExpandedController', () => {
 });
 
 it('should leave aria-expanded unset for absent values',()=>{
+element.expanded=true;
+element.sync();
+
 element.expanded=null;
 element.sync();
 

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

@@ -16,9 +16,8 @@ export class StateExpandedController<T extends Expanded> implements ReactiveCont
 }
 
 hostUpdated(){
-if(this.host.expanded!==null&&this.host.expanded!==undefined){
-this.host._internals!.ariaExpanded=`${this.host.expanded}`;
-}
+this.host._internals!.ariaExpanded=
+this.host.expanded===null||this.host.expanded===undefined ? null : `${this.host.expanded}`;
 
 toggleState(this.host._internals!,'expanded',Boolean(this.host.expanded));
 }

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

@@ -67,6 +67,9 @@ describe('StatePressedController', () => {
 });
 
 it('should leave aria-pressed unset for absent values',()=>{
+element.pressed=true;
+element.sync();
+
 element.pressed=undefined;
 element.sync();
 

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

@@ -16,9 +16,8 @@ export class StatePressedController<T extends Pressed> implements ReactiveContro
 }
 
 hostUpdated(){
-if(this.host.pressed!==null&&this.host.pressed!==undefined){
-this.host._internals!.ariaPressed=`${this.host.pressed}`;
-}
+this.host._internals!.ariaPressed=
+this.host.pressed===null||this.host.pressed===undefined ? null : `${this.host.pressed}`;
 
 toggleState(this.host._internals!,'pressed',Boolean(this.host.pressed));
 }

projects/forms/src/internal/controllers/state-selected.controller.test.ts

@@ -66,6 +66,11 @@ describe('StateSelectedController', () => {
 
 expect(element._internals!.ariaSelected).toBe('false');
 expect(element.matches(':state(selected)')).toBe(false);
+
+element.selected=null;
+element.sync();
+
+expect(element._internals!.ariaSelected).toBe(null);
 });
 
 it('should move selected state to anchor aria-current for anchor hosts',()=>{
@@ -87,6 +92,18 @@ describe('StateSelectedController', () => {
 expect(element.matches(':state(selected)')).toBe(false);
 });
 
+it('should preserve current value on selected anchor aria-current',()=>{
+constanchor=document.createElement('a');
+element.append(anchor);
+element._internals!.states.add('anchor');
+
+element.current='step';
+element.selected=true;
+element.sync();
+
+expect(anchor.getAttribute('aria-current')).toBe('step');
+});
+
 it('should remove anchor aria-current while readonly',()=>{
 constanchor=document.createElement('a');
 element.append(anchor);

projects/forms/src/internal/controllers/state-selected.controller.ts

@@ -24,6 +24,8 @@ export class StateSelectedController<T extends Selected> implements ReactiveCont
 
 hostUpdated(){
 if(this.host.readOnly){
+this.host._internals!.ariaSelected=null;
+toggleState(this.host._internals!,'selected',false);
 this.#syncAnchorCurrentAttribute();
 return;
 }
@@ -35,9 +37,8 @@ export class StateSelectedController<T extends Selected> implements ReactiveCont
 return;
 }
 
-if(this.host.selected!==null&&this.host.selected!==undefined){
-this.host._internals!.ariaSelected=`${this.host.selected}`;
-}
+this.host._internals!.ariaSelected=
+this.host.selected===null||this.host.selected===undefined ? null : `${this.host.selected}`;
 
 toggleState(this.host._internals!,'selected',Boolean(this.host.selected));
 }
@@ -51,7 +52,7 @@ export class StateSelectedController<T extends Selected> implements ReactiveCont
 
 if(anchor&&isCurrent){
 this.#anchorCurrentTarget?.removeAttribute('aria-current');
-anchor.setAttribute('aria-current','page');
+anchor.setAttribute('aria-current',this.host.current??'page');
 this.#anchorCurrentTarget =anchor;
 return;
 }

…rs/type-native-button.controller.test.ts …ntrollers/type-submit.controller.test.tsprojects/forms/src/internal/controllers/type-native-button.controller.test.ts renamed to projects/forms/src/internal/controllers/type-submit.controller.test.ts projects/forms/src/internal/controllers/type-native-button.controller.test.ts renamed to projects/forms/src/internal/controllers/type-submit.controller.test.ts

@@ -5,26 +5,26 @@ import { html } from 'lit';
 import{afterEach,describe,expect,it,vi}from'vitest';
 import{createFixture,removeFixture}from'@internals/testing';
 
-import{TypeNativeButtonController}from'./type-native-button.controller.js';
+import{TypeSubmitController}from'./type-submit.controller.js';
 importtype{ButtonType}from'../../mixins/button.types.js';
 importtype{ReactiveController}from'./types.js';
 
-classNativeButtonBehaviorControllerTestElementextendsHTMLElement{
+classTypeSubmitControllerTestElementextendsHTMLElement{
 disabled=false;
 name?: string;
 readOnly=false;
 value?: string;
  #type?: ButtonType;
  #controllers =newSet<ReactiveController>();
 
-_nativeButtonBehaviorController=newTypeNativeButtonController(this);
+_typeSubmitController=newTypeSubmitController(this);
 
 getform(){
 returnthis.closest('form');
 }
 
 gettype(){
-returnthis.#type ??this._nativeButtonBehaviorController.defaultType;
+returnthis.#type ??this._typeSubmitController.defaultType;
 }
 
 settype(value: ButtonType|undefined){
@@ -48,11 +48,11 @@ class NativeButtonBehaviorControllerTestElement extends HTMLElement {
 }
 }
 
-if(!customElements.get('native-button-behavior-controller-test-element')){
-customElements.define('native-button-behavior-controller-test-element',NativeButtonBehaviorControllerTestElement);
+if(!customElements.get('forms-type-submit-controller-test-element')){
+customElements.define('forms-type-submit-controller-test-element',TypeSubmitControllerTestElement);
 }
 
-describe('NativeButtonBehaviorController',()=>{
+describe('type-submit.controller',()=>{
 letfixture: HTMLElement;
 
 afterEach(()=>{
@@ -61,10 +61,10 @@ describe('NativeButtonBehaviorController', () => {
 
 it('should default to submit when associated with a form and no type is set',async()=>{
 fixture=awaitcreateFixture(
-html`<form><native-button-behavior-controller-test-element></native-button-behavior-controller-test-element></form>`
+html`<form><forms-type-submit-controller-test-element></forms-type-submit-controller-test-element></form>`
 );
-constelement=fixture.querySelector<NativeButtonBehaviorControllerTestElement>(
-'native-button-behavior-controller-test-element'
+constelement=fixture.querySelector<TypeSubmitControllerTestElement>(
+'forms-type-submit-controller-test-element'
 )!;
 
 element.sync();
@@ -74,10 +74,10 @@ describe('NativeButtonBehaviorController', () => {
 
 it('should trigger clicks from enter and space keyup events',async()=>{
 fixture=awaitcreateFixture(
-html`<native-button-behavior-controller-test-element></native-button-behavior-controller-test-element>`
+html`<forms-type-submit-controller-test-element></forms-type-submit-controller-test-element>`
 );
-constelement=fixture.querySelector<NativeButtonBehaviorControllerTestElement>(
-'native-button-behavior-controller-test-element'
+constelement=fixture.querySelector<TypeSubmitControllerTestElement>(
+'forms-type-submit-controller-test-element'
 )!;
 constclick=vi.spyOn(element,'click').mockImplementation(()=>undefined);
 
@@ -91,11 +91,11 @@ describe('NativeButtonBehaviorController', () => {
 
 it('should submit with hidden native submitter data',async()=>{
 fixture=awaitcreateFixture(
-html`<form><native-button-behavior-controller-test-element></native-button-behavior-controller-test-element></form>`
+html`<form><forms-type-submit-controller-test-element></forms-type-submit-controller-test-element></form>`
 );
 constform=fixture.querySelector<HTMLFormElement>('form')!;
-constelement=fixture.querySelector<NativeButtonBehaviorControllerTestElement>(
-'native-button-behavior-controller-test-element'
+constelement=fixture.querySelector<TypeSubmitControllerTestElement>(
+'forms-type-submit-controller-test-element'
 )!;
 constrequestSubmit=vi.spyOn(form,'requestSubmit').mockImplementation(()=>undefined);
 
@@ -116,11 +116,11 @@ describe('NativeButtonBehaviorController', () => {
 
 it('should reset the associated form when type is reset',async()=>{
 fixture=awaitcreateFixture(
-html`<form><native-button-behavior-controller-test-element></native-button-behavior-controller-test-element></form>`
+html`<form><forms-type-submit-controller-test-element></forms-type-submit-controller-test-element></form>`
 );
 constform=fixture.querySelector<HTMLFormElement>('form')!;
-constelement=fixture.querySelector<NativeButtonBehaviorControllerTestElement>(
-'native-button-behavior-controller-test-element'
+constelement=fixture.querySelector<TypeSubmitControllerTestElement>(
+'forms-type-submit-controller-test-element'
 )!;
 constreset=vi.spyOn(form,'reset').mockImplementation(()=>undefined);
 
@@ -133,10 +133,10 @@ describe('NativeButtonBehaviorController', () => {
 
 it('should remove listeners when disabled, readonly, or disconnected',async()=>{
 fixture=awaitcreateFixture(
-html`<native-button-behavior-controller-test-element></native-button-behavior-controller-test-element>`
+html`<forms-type-submit-controller-test-element></forms-type-submit-controller-test-element>`
 );
-constelement=fixture.querySelector<NativeButtonBehaviorControllerTestElement>(
-'native-button-behavior-controller-test-element'
+constelement=fixture.querySelector<TypeSubmitControllerTestElement>(
+'forms-type-submit-controller-test-element'
 )!;
 constclick=vi.spyOn(element,'click').mockImplementation(()=>undefined);
 

…rollers/type-native-button.controller.ts …al/controllers/type-submit.controller.tsprojects/forms/src/internal/controllers/type-native-button.controller.ts renamed to projects/forms/src/internal/controllers/type-submit.controller.ts projects/forms/src/internal/controllers/type-native-button.controller.ts renamed to projects/forms/src/internal/controllers/type-submit.controller.ts

@@ -5,7 +5,7 @@ import { onKeys, stopEvent } from '../utils.js';
 importtype{ButtonType}from'../../mixins/button.types.js';
 importtype{ReactiveController,ReactiveElement}from'./types.js';
 
-typeNativeButtonBehaviorHost=ReactiveElement&{
+typeSubmitHost=ReactiveElement&{
 disabled: boolean;
 form: HTMLFormElement|null|string;
 name?: string;
@@ -14,7 +14,7 @@ type NativeButtonBehaviorHost = ReactiveElement & {
 value?: string;
 };
 
-exportclassTypeNativeButtonController<TextendsNativeButtonBehaviorHost>implementsReactiveController{
+exportclassTypeSubmitController<TextendsSubmitHost>implementsReactiveController{
  #defaultType: ButtonType|undefined;
  #submitter: HTMLButtonElement|undefined;
  #submitterForm: HTMLFormElement|undefined;
@@ -29,15 +29,15 @@ export class TypeNativeButtonController<T extends NativeButtonBehaviorHost> impl
 
 hostUpdated(){
 this.#setButtonType();
-this.#removeNativeButtonBehavior();
+this.#removeSubmitBehavior();
 if(!this.host.readOnly&&!this.host.disabled){
-this.host.addEventListener('click',this.#onNativeButtonClick);
-this.host.addEventListener('keyup',this.#onNativeButtonKeyup);
+this.host.addEventListener('click',this.#onSubmitClick);
+this.host.addEventListener('keyup',this.#onSubmitKeyup);
 }
 }
 
 hostDisconnected(){
-this.#removeNativeButtonBehavior();
+this.#removeSubmitBehavior();
 this.#removeSubmitter();
 }
 
@@ -47,16 +47,16 @@ export class TypeNativeButtonController<T extends NativeButtonBehaviorHost> impl
 }
 }
 
- #removeNativeButtonBehavior(){
-this.host.removeEventListener('click',this.#onNativeButtonClick);
-this.host.removeEventListener('keyup',this.#onNativeButtonKeyup);
+ #removeSubmitBehavior(){
+this.host.removeEventListener('click',this.#onSubmitClick);
+this.host.removeEventListener('keyup',this.#onSubmitKeyup);
 }
 
- #onNativeButtonKeyup=(event: KeyboardEvent)=>{
+ #onSubmitKeyup=(event: KeyboardEvent)=>{
 onKeys(['Enter','Space'],event,()=>this.host.click());
 };
 
- #onNativeButtonClick=(event: Event)=>{
+ #onSubmitClick=(event: Event)=>{
 if(this.host.disabled){
 stopEvent(event);
 return;