[ACS-9230] a11y testing: Search Page / Search Filters / Certain ARIA roles must contain particular children (#10627)

This commit is contained in:
dominikiwanekhyland
2025-02-10 14:51:16 +01:00
committed by GitHub
parent 0edbae8c59
commit 2784310556
5 changed files with 8 additions and 11 deletions

View File

@@ -1,10 +1,9 @@
<mat-chip-option [attr.data-automation-id]="'search-filter-chip-tabbed-' + tabbedFacet.label" <mat-chip [attr.data-automation-id]="'search-filter-chip-tabbed-' + tabbedFacet.label"
[disableRipple]="true" [disableRipple]="true"
class="adf-search-filter-chip-tabbed" class="adf-search-filter-chip-tabbed"
[class.adf-search-toggle-chip]="displayValue || menuTrigger.menuOpen" [class.adf-search-toggle-chip]="displayValue || menuTrigger.menuOpen"
[disabled]="!isPopulated" [disabled]="!isPopulated"
tabindex="0" tabindex="0"
role="button"
[matMenuTriggerFor]="menu" [matMenuTriggerFor]="menu"
(menuOpened)="onMenuOpen()" (menuOpened)="onMenuOpen()"
(keydown.enter)="onEnterKeydown()" (keydown.enter)="onEnterKeydown()"
@@ -22,7 +21,7 @@
<ng-template #disabledIcon> <ng-template #disabledIcon>
<mat-icon>remove</mat-icon> <mat-icon>remove</mat-icon>
</ng-template> </ng-template>
</mat-chip-option> </mat-chip>
<mat-menu #menu="matMenu" class="adf-search-widget-extra-width" backdropClass="adf-search-filter-chip-menu" (closed)="onClosed()"> <mat-menu #menu="matMenu" class="adf-search-widget-extra-width" backdropClass="adf-search-filter-chip-menu" (closed)="onClosed()">
<div #menuContainer [attr.data-automation-id]="'search-field-' + tabbedFacet.label"> <div #menuContainer [attr.data-automation-id]="'search-field-' + tabbedFacet.label">

View File

@@ -1,10 +1,9 @@
<mat-chip-option [attr.data-automation-id]="'search-filter-chip-' + field.label" <mat-chip [attr.data-automation-id]="'search-filter-chip-' + field.label"
[disableRipple]="true" [disableRipple]="true"
class="adf-search-filter-chip adf-search-filter-facet-chip" class="adf-search-filter-chip adf-search-filter-facet-chip"
[class.adf-search-toggle-chip]="(facetField.displayValue$ | async) || menuTrigger.menuOpen" [class.adf-search-toggle-chip]="(facetField.displayValue$ | async) || menuTrigger.menuOpen"
[disabled]="!isPopulated()" [disabled]="!isPopulated()"
tabindex="0" tabindex="0"
role="button"
[matMenuTriggerFor]="menu" [matMenuTriggerFor]="menu"
(menuOpened)="onMenuOpen()" (menuOpened)="onMenuOpen()"
(keydown.enter)="onEnterKeydown()" (keydown.enter)="onEnterKeydown()"
@@ -24,7 +23,7 @@
<ng-template #disabledIcon> <ng-template #disabledIcon>
<mat-icon>remove</mat-icon> <mat-icon>remove</mat-icon>
</ng-template> </ng-template>
</mat-chip-option> </mat-chip>
<mat-menu #menu="matMenu" backdropClass="adf-search-filter-chip-menu" (closed)="onClosed()"> <mat-menu #menu="matMenu" backdropClass="adf-search-filter-chip-menu" (closed)="onClosed()">
<div #menuContainer [attr.data-automation-id]="'search-field-' + field.label"> <div #menuContainer [attr.data-automation-id]="'search-field-' + field.label">

View File

@@ -25,7 +25,7 @@ import { MatMenuHarness } from '@angular/material/menu/testing';
import { HarnessLoader, TestKey } from '@angular/cdk/testing'; import { HarnessLoader, TestKey } from '@angular/cdk/testing';
import { MatButtonHarness } from '@angular/material/button/testing'; import { MatButtonHarness } from '@angular/material/button/testing';
import { MatIconHarness } from '@angular/material/icon/testing'; import { MatIconHarness } from '@angular/material/icon/testing';
import { MatChipOptionHarness } from '@angular/material/chips/testing'; import { MatChipHarness } from '@angular/material/chips/testing';
describe('SearchFacetChipComponent', () => { describe('SearchFacetChipComponent', () => {
let loader: HarnessLoader; let loader: HarnessLoader;
@@ -88,7 +88,7 @@ describe('SearchFacetChipComponent', () => {
}); });
it('should display remove icon and disable facet when no items are loaded', async () => { it('should display remove icon and disable facet when no items are loaded', async () => {
const menu = await loader.getHarness(MatChipOptionHarness); const menu = await loader.getHarness(MatChipHarness);
const disabled = await menu.isDisabled(); const disabled = await menu.isDisabled();
expect(disabled).toBe(true); expect(disabled).toBe(true);

View File

@@ -1,4 +1,4 @@
<mat-chip-listbox role="listbox" [attr.aria-label]="'SEARCH.FILTER.ARIA-LABEL.SEARCH_FILTER' | translate"> <mat-chip-set [attr.aria-label]="'SEARCH.FILTER.ARIA-LABEL.SEARCH_FILTER' | translate">
<ng-container *ngFor="let category of categories"> <ng-container *ngFor="let category of categories">
<adf-search-widget-chip [category]="category" /> <adf-search-widget-chip [category]="category" />
</ng-container> </ng-container>
@@ -16,4 +16,4 @@
</ng-container> </ng-container>
<ng-content></ng-content> <ng-content></ng-content>
</mat-chip-listbox> </mat-chip-set>

View File

@@ -3,7 +3,6 @@
class="adf-search-filter-chip" class="adf-search-filter-chip"
[class.adf-search-toggle-chip]="(widget.getDisplayValue() | async) || menuTrigger.menuOpen" [class.adf-search-toggle-chip]="(widget.getDisplayValue() | async) || menuTrigger.menuOpen"
tabindex="0" tabindex="0"
role="button"
[matMenuTriggerFor]="menu" [matMenuTriggerFor]="menu"
(menuOpened)="onMenuOpen()" (menuOpened)="onMenuOpen()"
(keydown.enter)="onEnterKeydown()" (keydown.enter)="onEnterKeydown()"