From 8c3fb53bc0e0f1471e36d7fcb2ef49fe2b2dabbc Mon Sep 17 00:00:00 2001 From: Ivan Kitanov Date: Thu, 26 Jun 2025 10:21:04 +0300 Subject: [PATCH 1/2] fix(combo): Sync aria required with required state --- projects/igniteui-angular/src/lib/combo/combo.common.ts | 1 + .../igniteui-angular/src/lib/combo/combo.component.spec.ts | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts index 1221e1f43ed..a38e2157840 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.common.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts @@ -1322,6 +1322,7 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh protected manageRequiredAsterisk(): void { if (this.ngControl) { this.inputGroup.isRequired = this.required; + this.comboInput.nativeElement.setAttribute('aria-required', this.required.toString()); } } diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index a3cfa04b310..a15d9860143 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -3390,8 +3390,11 @@ describe('igxCombo', () => { it('should add/remove asterisk when setting validators dynamically', () => { let inputGroupIsRequiredClass = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUTGROUP_REQUIRED)); let asterisk = window.getComputedStyle(fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUTGROUP_LABEL)).nativeElement, ':after').content; + input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`)); expect(asterisk).toBe('"*"'); expect(inputGroupIsRequiredClass).toBeDefined(); + console.log(input.nativeElement); + expect(input.nativeElement.getAttribute('aria-required')).toMatch('true'); fixture.componentInstance.reactiveForm.controls.townCombo.clearValidators(); fixture.componentInstance.reactiveForm.controls.townCombo.updateValueAndValidity(); @@ -3400,6 +3403,7 @@ describe('igxCombo', () => { asterisk = window.getComputedStyle(fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUTGROUP_LABEL)).nativeElement, ':after').content; expect(asterisk).toBe('none'); expect(inputGroupIsRequiredClass).toBeNull(); + expect(input.nativeElement.getAttribute('aria-required')).toMatch('false'); fixture.componentInstance.reactiveForm.controls.townCombo.setValidators(Validators.required); fixture.componentInstance.reactiveForm.controls.townCombo.updateValueAndValidity(); @@ -3408,6 +3412,7 @@ describe('igxCombo', () => { asterisk = window.getComputedStyle(fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUTGROUP_LABEL)).nativeElement, ':after').content; expect(asterisk).toBe('"*"'); expect(inputGroupIsRequiredClass).toBeDefined(); + expect(input.nativeElement.getAttribute('aria-required')).toMatch('true'); }); it('Should update validity state when programmatically setting errors on reactive form controls', fakeAsync(() => { From 028252898228b27d07a9d49c91d55d2283878830 Mon Sep 17 00:00:00 2001 From: Ivan Kitanov Date: Thu, 26 Jun 2025 10:32:01 +0300 Subject: [PATCH 2/2] chore(combo): Removing unnecessary console.log --- projects/igniteui-angular/src/lib/combo/combo.component.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index a15d9860143..7bf28eb77cd 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -3393,7 +3393,6 @@ describe('igxCombo', () => { input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`)); expect(asterisk).toBe('"*"'); expect(inputGroupIsRequiredClass).toBeDefined(); - console.log(input.nativeElement); expect(input.nativeElement.getAttribute('aria-required')).toMatch('true'); fixture.componentInstance.reactiveForm.controls.townCombo.clearValidators();