From aa36463f717c3f33b447af995e55c08ee0ac3770 Mon Sep 17 00:00:00 2001 From: Ivan Kitanov Date: Thu, 26 Jun 2025 10:28:52 +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 | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts index 6084b0ef637..23f8446813b 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 e60214a6542..c81f51f3e2b 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -58,7 +58,7 @@ const CSS_CLASS_ITME_CHECKBOX_CHECKED = 'igx-checkbox--checked'; const defaultDropdownItemHeight = 40; const defaultDropdownItemMaxHeight = 400; -describe('igxCombo', () => { +fdescribe('igxCombo', () => { let fixture: ComponentFixture; let combo: IgxComboComponent; let input: DebugElement; @@ -3390,8 +3390,10 @@ 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(); + expect(input.nativeElement.getAttribute('aria-required')).toMatch('true'); fixture.componentInstance.reactiveForm.controls.townCombo.clearValidators(); fixture.componentInstance.reactiveForm.controls.townCombo.updateValueAndValidity(); @@ -3400,6 +3402,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 +3411,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 926d79a3d625f689cee00940aa32296036109a0b Mon Sep 17 00:00:00 2001 From: Ivan Kitanov Date: Fri, 27 Jun 2025 09:56:33 +0300 Subject: [PATCH 2/2] chore(combo): Remove fdescribe --- projects/igniteui-angular/src/lib/combo/combo.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 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 c81f51f3e2b..bdbb48f2555 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -58,7 +58,7 @@ const CSS_CLASS_ITME_CHECKBOX_CHECKED = 'igx-checkbox--checked'; const defaultDropdownItemHeight = 40; const defaultDropdownItemMaxHeight = 400; -fdescribe('igxCombo', () => { +describe('igxCombo', () => { let fixture: ComponentFixture; let combo: IgxComboComponent; let input: DebugElement;