Skip to content

Commit

Permalink
fix(multi-select): add aria-describedby, aria-invalid (#1256)
Browse files Browse the repository at this point in the history
* fix(multi-select): add aria-describedby

* docs(multi-select): update example

* fix(multi-select): add aria-describedby, aria-invalid
  • Loading branch information
vt-allianz authored and GitHub Enterprise committed Aug 14, 2024
1 parent 7f23419 commit 98f784d
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
(blur)="_onTriggerBlur(); _inputFocused = false"
[attr.aria-expanded]="_isOpen"
[attr.aria-labelledby]="_getAriaLabelledBy()"
[attr.aria-describedby]="_ariaDescribedby || null"
[attr.aria-invalid]="errorState"
[id]="id"
(focus)="disabled ? null : (_inputFocused = true)"
(keydown)="_onKeydown($event)"
Expand Down
48 changes: 46 additions & 2 deletions projects/ng-aquila/src/dropdown/multi-select/multi-select.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@ import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { CommonModule } from '@angular/common';
import { Component, Directive, Type, ViewChild } from '@angular/core';
import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing';
import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { NxErrorComponent } from '@aposin/ng-aquila/base';
import { NxDropdownIntl } from '@aposin/ng-aquila/dropdown';
import { NxFormfieldComponent, NxFormfieldModule } from '@aposin/ng-aquila/formfield';
import { NxFormfieldComponent, NxFormfieldErrorDirective, NxFormfieldModule } from '@aposin/ng-aquila/formfield';

import { NxDropdownModule } from '../dropdown.module';
import { NxMultiSelectComponent } from './multi-select.component';
Expand Down Expand Up @@ -139,6 +140,7 @@ describe('NxMultiSelectComponent', () => {
ComplexMultiSelectComponent,
ReactiveMultiSelectComponent,
IntlOverrideMultiSelect,
ErrorMultiSelectComponent,
],
}).compileComponents();
}
Expand Down Expand Up @@ -376,6 +378,28 @@ describe('NxMultiSelectComponent', () => {
stateChangesSubscription.unsubscribe();
}));

it('should add aria-describedby and aria-invalid', async () => {
createTestComponent(ErrorMultiSelectComponent);
const input = await multiSelectHarness.getValue();
const ariaInvalid = await input.getAttribute('aria-invalid');
const ariaDescribedBy = await input.getAttribute('aria-describedby');
expect(ariaInvalid).toBe('false');
expect(ariaDescribedBy).toBe(null);

await multiSelectHarness.click();
await multiSelectHarness.closeWithEsc();
const input2 = await multiSelectHarness.getValue();
const error = (testInstance as ErrorMultiSelectComponent).error;

await input2.blur();
fixture.detectChanges();
const ariaDescribedBy2 = await input2.getAttribute('aria-describedby');
const ariaInvalid2 = await input2.getAttribute('aria-invalid');

expect(ariaDescribedBy2).toBe(error.id);
expect(ariaInvalid2).toBe('true');
});

describe('and using "clear" button', () => {
beforeEach(async () => {
await multiSelectInstance._clear();
Expand Down Expand Up @@ -1077,3 +1101,23 @@ class ReactiveMultiSelectComponent extends DropdownTest {
testControl: ['BMW'],
});
}

@Component({
template: `<form [formGroup]="testForm">
<nx-formfield>
<nx-multi-select formControlName="testControl" [options]="options"></nx-multi-select>
<nx-error nxFormfieldError> this is error </nx-error>
</nx-formfield>
</form>`,
standalone: true,
imports: [OverlayModule, NxDropdownModule, FormsModule, ReactiveFormsModule, NxFormfieldModule, NxErrorComponent, NxFormfieldErrorDirective],
})
class ErrorMultiSelectComponent extends DropdownTest {
options = ['BMW', 'Audi', 'Volvo', 'Mini'];

testForm = new FormBuilder().group({
testControl: ['', Validators.required],
});

@ViewChild(NxFormfieldErrorDirective) error!: NxFormfieldErrorDirective;
}

0 comments on commit 98f784d

Please sign in to comment.