diff --git a/src/angular/autocomplete/autocomplete-trigger.ts b/src/angular/autocomplete/autocomplete-trigger.ts index 3046d3d4d3..98dc62d70a 100644 --- a/src/angular/autocomplete/autocomplete-trigger.ts +++ b/src/angular/autocomplete/autocomplete-trigger.ts @@ -114,7 +114,7 @@ export function getSbbAutocompleteMissingPanelError(): Error { '[attr.aria-autocomplete]': 'autocompleteDisabled ? null : "list"', '[attr.aria-activedescendant]': '(panelOpen && activeOption) ? activeOption.id : null', '[attr.aria-expanded]': 'autocompleteDisabled ? null : panelOpen.toString()', - '[attr.aria-owns]': '(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id', + '[attr.aria-controls]': '(autocompleteDisabled || !panelOpen) ? null : autocomplete?.id', '[attr.aria-haspopup]': 'autocompleteDisabled ? null : "listbox"', '[class.sbb-focused]': 'panelOpen', // Note: we use `focusin`, as opposed to `focus`, in order to open the panel diff --git a/src/angular/autocomplete/autocomplete.spec.ts b/src/angular/autocomplete/autocomplete.spec.ts index f758a4ca16..dbbe630dba 100644 --- a/src/angular/autocomplete/autocomplete.spec.ts +++ b/src/angular/autocomplete/autocomplete.spec.ts @@ -2202,24 +2202,24 @@ describe('SbbAutocomplete', () => { .toBe('false'); })); - it('should set aria-owns based on the attached autocomplete', () => { + it('should set aria-controls based on the attached autocomplete', () => { fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); const panel = fixture.debugElement.query(By.css('.sbb-autocomplete-panel')).nativeElement; - expect(input.getAttribute('aria-owns')) - .withContext('Expected aria-owns to match attached autocomplete.') + expect(input.getAttribute('aria-controls')) + .withContext('Expected aria-controls to match attached autocomplete.') .toBe(panel.getAttribute('id')); }); - it('should not set aria-owns while the autocomplete is closed', () => { - expect(input.getAttribute('aria-owns')).toBeFalsy(); + it('should not set aria-controls while the autocomplete is closed', () => { + expect(input.getAttribute('aria-controls')).toBeFalsy(); fixture.componentInstance.trigger.openPanel(); fixture.detectChanges(); - expect(input.getAttribute('aria-owns')).toBeTruthy(); + expect(input.getAttribute('aria-controls')).toBeTruthy(); }); it('should restore focus to the input when clicking to select a value', fakeAsync(() => { @@ -2246,7 +2246,7 @@ describe('SbbAutocomplete', () => { expect(input.getAttribute('role')).toBeFalsy(); expect(input.getAttribute('aria-autocomplete')).toBeFalsy(); expect(input.getAttribute('aria-expanded')).toBeFalsy(); - expect(input.getAttribute('aria-owns')).toBeFalsy(); + expect(input.getAttribute('aria-controls')).toBeFalsy(); }); }); diff --git a/src/angular/autocomplete/autocomplete.ts b/src/angular/autocomplete/autocomplete.ts index 527f6958bc..2e71aa6ded 100644 --- a/src/angular/autocomplete/autocomplete.ts +++ b/src/angular/autocomplete/autocomplete.ts @@ -252,7 +252,7 @@ export class SbbAutocomplete implements AfterContentInit, OnDestroy { } private _showHintIfNoOptions: boolean = false; - /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */ + /** Unique ID to be used by autocomplete trigger's "aria-controls" property. */ id: string = `sbb-autocomplete-${nextId++}`; /** diff --git a/src/angular/chips/chip-list.spec.ts b/src/angular/chips/chip-list.spec.ts index 3f00e53951..411cbd95f2 100644 --- a/src/angular/chips/chip-list.spec.ts +++ b/src/angular/chips/chip-list.spec.ts @@ -462,7 +462,6 @@ describe('SbbChipList', () => { expect(label.getAttribute('for')).toBeTruthy(); expect(label.getAttribute('for')).toBe(input.getAttribute('id')); - expect(label.getAttribute('aria-owns')).toBe(input.getAttribute('id')); }); }); diff --git a/src/angular/core/option/option-hint.ts b/src/angular/core/option/option-hint.ts index 2c2be77cc3..13b8ae2f95 100644 --- a/src/angular/core/option/option-hint.ts +++ b/src/angular/core/option/option-hint.ts @@ -14,6 +14,6 @@ let nextId = 0; }, }) export class SbbOptionHint { - /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */ + /** Unique ID to be used by autocomplete trigger's "aria-controls" property. */ id: string = `sbb-option-hint-${nextId++}`; } diff --git a/src/angular/form-field/form-field.html b/src/angular/form-field/form-field.html index dfb163c4e1..2fd2dacaf2 100644 --- a/src/angular/form-field/form-field.html +++ b/src/angular/form-field/form-field.html @@ -1,12 +1,9 @@
-