inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-9233] a11y testing: Edit Aspects - Interactive controls must not be nested (#10680)

Browse Source
This commit is contained in:
Mykyta Maliarchuk 2025-02-27 09:35:24 +01:00 committed by GitHub
parent ac11fa8a65
commit 1422604991
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 79 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
lib/content-services/src/lib/aspect-list/aspect-list.component.html
View File

@ -1,44 +1,51 @@
<div id="aspect-list-container" class="adf-aspect-list-container" *ngIf="aspects$ | async as aspects; else loading"> <div id="aspect-list-container" class="adf-aspect-list-container" *ngIf="aspects$ | async as aspects; else loading">
<mat-accordion class="adf-accordion-aspect-list"> <mat-accordion class="adf-accordion-aspect-list">
<mat-expansion-panel *ngFor="let aspect of aspects; let colIndex = index" <div class="adf-accordion-aspect-list-item"
[id]="'aspect-list-'+getId(aspect)" *ngFor="let aspect of aspects; let colIndex = index"
class="adf-accordion-aspect-list-expansion-panel"> [ngClass]="{'adf-hover' : !isPanelOpen[colIndex]}">
<mat-expansion-panel-header class='adf-accordion-aspect-list-expansion-panel-header' <mat-checkbox class="adf-aspect-list-check-button" [id]="'aspect-list-'+colIndex+'-check'"
[id]="'aspect-list-'+(getId(aspect))+'header'"> [checked]="nodeAspects?.includes(aspect?.entry?.id)"
<mat-panel-title class="adf-accordion-aspect-list-expansion-panel-header-title"> (click)="onCheckBoxClick($event)"
<mat-checkbox class="adf-aspect-list-check-button" [id]="'aspect-list-'+colIndex+'-check'" [aria-label]="getTitle(aspect)"
[checked]="nodeAspects?.includes(aspect?.entry?.id)" (change)="onChange($event, aspect?.entry?.id)"/>
(click)="onCheckBoxClick($event)" <mat-expansion-panel
(change)="onChange($event, aspect?.entry?.id)"> [id]="'aspect-list-'+getId(aspect)"
<p class="adf-aspect-list-element-title">{{getTitle(aspect)}}</p> class="adf-accordion-aspect-list-expansion-panel"
</mat-checkbox> (opened)="isPanelOpen[colIndex] = true"
</mat-panel-title> (afterCollapse)="isPanelOpen[colIndex] = false"
<mat-panel-description >
class="adf-accordion-aspect-list-expansion-panel-header-description" <mat-expansion-panel-header class='adf-accordion-aspect-list-expansion-panel-header'
[id]="'aspect-list-'+colIndex+'-title'" [id]="'aspect-list-'+(getId(aspect))+'header'">
[title]="getTitle(aspect)"> <mat-panel-title class="adf-accordion-aspect-list-expansion-panel-header-title">
{{getTitle(aspect)}} {{getTitle(aspect)}}
</mat-panel-description> </mat-panel-title>
</mat-expansion-panel-header> <mat-panel-description
<p class="adf-property-paragraph" [id]="'aspect-list-'+colIndex+'-description'"> {{aspect?.entry?.description}}</p> class="adf-accordion-aspect-list-expansion-panel-header-description"
[id]="'aspect-list-'+colIndex+'-title'"
[title]="getTitle(aspect)">
{{getTitle(aspect)}}
</mat-panel-description>
</mat-expansion-panel-header>
<p class="adf-property-paragraph" [id]="'aspect-list-'+colIndex+'-description'"> {{aspect?.entry?.description}}</p>
<table mat-table [dataSource]="aspect?.entry?.properties" *ngIf="aspect?.entry?.properties?.length > 0" class="adf-aspect-property-table" [id]="'aspect-list-'+colIndex+'-properties-table'"> <table mat-table [dataSource]="aspect?.entry?.properties" *ngIf="aspect?.entry?.properties?.length > 0" class="adf-aspect-property-table" [id]="'aspect-list-'+colIndex+'-properties-table'">
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<th class="adf-aspect-property-table-column-name" mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.PROPERTY_NAME' | translate}} </th> <th class="adf-aspect-property-table-column-name" mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.PROPERTY_NAME' | translate}} </th>
<td class="adf-aspect-property-table-column-name adf-aspect-property-table-cell" mat-cell *matCellDef="let property"> {{property.id}} </td> <td class="adf-aspect-property-table-column-name adf-aspect-property-table-cell" mat-cell *matCellDef="let property"> {{property.id}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="title"> <ng-container matColumnDef="title">
<th class="adf-aspect-property-table-column-title" mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DESCRIPTION' | translate}} </th> <th class="adf-aspect-property-table-column-title" mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DESCRIPTION' | translate}} </th>
<td class="adf-aspect-property-table-column-title adf-aspect-property-table-cell" mat-cell *matCellDef="let property"> {{property.title}} </td> <td class="adf-aspect-property-table-column-title adf-aspect-property-table-cell" mat-cell *matCellDef="let property"> {{property.title}} </td>
</ng-container> </ng-container>
<ng-container matColumnDef="dataType"> <ng-container matColumnDef="dataType">
<th class="adf-aspect-property-table-column-data-type" mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DATA_TYPE' | translate}} </th> <th class="adf-aspect-property-table-column-data-type" mat-header-cell *matHeaderCellDef> {{'ADF-ASPECT-LIST.DATA_TYPE' | translate}} </th>
<td class="adf-aspect-property-table-column-data-type adf-aspect-property-table-cell" mat-cell *matCellDef="let property"> {{property.dataType}} </td> <td class="adf-aspect-property-table-column-data-type adf-aspect-property-table-cell" mat-cell *matCellDef="let property"> {{property.dataType}} </td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="propertyColumns"></tr> <tr mat-header-row *matHeaderRowDef="propertyColumns"></tr>
<tr mat-row *matRowDef="let row; columns: propertyColumns;"></tr> <tr mat-row *matRowDef="let row; columns: propertyColumns;"></tr>
</table> </table>
</mat-expansion-panel> </mat-expansion-panel>
</div>
</mat-accordion> </mat-accordion>
</div> </div>

31
lib/content-services/src/lib/aspect-list/aspect-list.component.scss
View File

@ -26,18 +26,28 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
.adf-aspect-list-check-button { .adf-aspect-list-check-button {
margin-right: 5px; margin-right: 5px;
height: 48px;
align-items: center; align-items: center;
display: flex; display: flex;
} }
.adf-aspect-list-element-title { .adf-accordion-aspect-list-item {
font-size: smaller; padding-left: 14px;
display: flex; display: flex;
align-items: center; box-shadow: 0 2px 2px -1px var(--adf-theme-foreground-text-color-007);
&.adf-hover {
&:hover {
background-color: var(--adf-theme-background-hover-color);
}
}
} }
.adf-accordion-aspect-list-expansion-panel { .adf-accordion-aspect-list-expansion-panel {
margin: 0; margin: 0;
width: 100%;
box-shadow: none;
background: border-box;
#{$mat-checkbox-background} { #{$mat-checkbox-background} {
height: 16px; height: 16px;
@ -46,11 +56,12 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
&-header { &-header {
font-size: smaller; font-size: smaller;
padding-left: 12px; padding-left: 0;
height: 48px;
} }
&-header-title { &-header-title {
flex: 1 1 0; color: var(--theme-secondary-text);
} }
&-header-description { &-header-description {
@ -94,3 +105,13 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
} }
} }
} }
.adf-accordion-aspect-list
.adf-accordion-aspect-list-item
.adf-accordion-aspect-list-expansion-panel
.adf-accordion-aspect-list-expansion-panel-header {
&:hover,
&:focus {
background: none;
}
}

16
lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts
View File

@ -180,7 +180,9 @@ describe('AspectListComponent', () => {
}); });
it('should show aspect id when name or title is not set', () => { it('should show aspect id when name or title is not set', () => {
const noNameAspect = fixture.nativeElement.querySelector('#aspect-list-cst-nonamedAspect .adf-aspect-list-element-title'); const noNameAspect = fixture.nativeElement.querySelector(
'#aspect-list-cst-nonamedAspect .adf-accordion-aspect-list-expansion-panel-header-title'
);
expect(noNameAspect).toBeDefined(); expect(noNameAspect).toBeDefined();
expect(noNameAspect).not.toBeNull(); expect(noNameAspect).not.toBeNull();
expect(noNameAspect.innerText).toBe('cst:nonamedAspect'); expect(noNameAspect.innerText).toBe('cst:nonamedAspect');
@ -203,14 +205,12 @@ describe('AspectListComponent', () => {
}); });
it('should show node aspects as checked', async () => { it('should show node aspects as checked', async () => {
const panel = await loader.getHarness(MatExpansionPanelHarness); const checkbox = await loader.getHarness(MatCheckboxHarness);
const checkbox = await panel.getHarness(MatCheckboxHarness);
expect(await checkbox.isChecked()).toBe(true); expect(await checkbox.isChecked()).toBe(true);
}); });
it('should add checked and remove unchecked aspects', async () => { it('should add checked and remove unchecked aspects', async () => {
const panel = (await loader.getAllHarnesses(MatExpansionPanelHarness))[1]; const checkbox = (await loader.getAllHarnesses(MatCheckboxHarness))[1];
const checkbox = await panel.getHarness(MatCheckboxHarness);
expect(await checkbox.isChecked()).toBe(false); expect(await checkbox.isChecked()).toBe(false);
await checkbox.toggle(); await checkbox.toggle();
@ -223,8 +223,7 @@ describe('AspectListComponent', () => {
}); });
it('should reset aspects on reset', async () => { it('should reset aspects on reset', async () => {
const panel = (await loader.getAllHarnesses(MatExpansionPanelHarness))[1]; const checkbox = (await loader.getAllHarnesses(MatCheckboxHarness))[1];
const checkbox = await panel.getHarness(MatCheckboxHarness);
expect(await checkbox.isChecked()).toBe(false); expect(await checkbox.isChecked()).toBe(false);
await checkbox.toggle(); await checkbox.toggle();
@ -246,8 +245,7 @@ describe('AspectListComponent', () => {
spyOn(component.valueChanged, 'emit'); spyOn(component.valueChanged, 'emit');
spyOn(component.updateCounter, 'emit'); spyOn(component.updateCounter, 'emit');
const panel = (await loader.getAllHarnesses(MatExpansionPanelHarness))[1]; const checkbox = (await loader.getAllHarnesses(MatCheckboxHarness))[1];
const checkbox = await panel.getHarness(MatCheckboxHarness);
await checkbox.toggle(); await checkbox.toggle();
fixture.detectChanges(); fixture.detectChanges();
expect(component.valueChanged.emit).toHaveBeenCalledWith(['frs:AspectOne', 'frs:SecondAspect', ...storedAspect]); expect(component.valueChanged.emit).toHaveBeenCalledWith(['frs:AspectOne', 'frs:SecondAspect', ...storedAspect]);

1
lib/content-services/src/lib/aspect-list/aspect-list.component.ts
View File

@ -60,6 +60,7 @@ export class AspectListComponent implements OnInit {
nodeAspectStatus: string[] = []; nodeAspectStatus: string[] = [];
notDisplayedAspects: string[] = []; notDisplayedAspects: string[] = [];
hasEqualAspect: boolean = true; hasEqualAspect: boolean = true;
isPanelOpen: boolean[] = [];
private readonly destroyRef = inject(DestroyRef); private readonly destroyRef = inject(DestroyRef);