mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[ACS-9233] a11y testing: Edit Aspects - Interactive controls must not be nested (#10680)
This commit is contained in:
Mykyta Maliarchuk
GitHub
parent
ac11fa8a65
commit
1422604991
@ -1,44 +1,51 @@
|
||||
<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-expansion-panel *ngFor="let aspect of aspects; let colIndex = index"
|
||||
[id]="'aspect-list-'+getId(aspect)"
|
||||
class="adf-accordion-aspect-list-expansion-panel">
|
||||
<mat-expansion-panel-header class='adf-accordion-aspect-list-expansion-panel-header'
|
||||
[id]="'aspect-list-'+(getId(aspect))+'header'">
|
||||
<mat-panel-title class="adf-accordion-aspect-list-expansion-panel-header-title">
|
||||
<mat-checkbox class="adf-aspect-list-check-button" [id]="'aspect-list-'+colIndex+'-check'"
|
||||
[checked]="nodeAspects?.includes(aspect?.entry?.id)"
|
||||
(click)="onCheckBoxClick($event)"
|
||||
(change)="onChange($event, aspect?.entry?.id)">
|
||||
<p class="adf-aspect-list-element-title">{{getTitle(aspect)}}</p>
|
||||
</mat-checkbox>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description
|
||||
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>
|
||||
<div class="adf-accordion-aspect-list-item"
|
||||
*ngFor="let aspect of aspects; let colIndex = index"
|
||||
[ngClass]="{'adf-hover' : !isPanelOpen[colIndex]}">
|
||||
<mat-checkbox class="adf-aspect-list-check-button" [id]="'aspect-list-'+colIndex+'-check'"
|
||||
[checked]="nodeAspects?.includes(aspect?.entry?.id)"
|
||||
(click)="onCheckBoxClick($event)"
|
||||
[aria-label]="getTitle(aspect)"
|
||||
(change)="onChange($event, aspect?.entry?.id)"/>
|
||||
<mat-expansion-panel
|
||||
[id]="'aspect-list-'+getId(aspect)"
|
||||
class="adf-accordion-aspect-list-expansion-panel"
|
||||
(opened)="isPanelOpen[colIndex] = true"
|
||||
(afterCollapse)="isPanelOpen[colIndex] = false"
|
||||
>
|
||||
<mat-expansion-panel-header class='adf-accordion-aspect-list-expansion-panel-header'
|
||||
[id]="'aspect-list-'+(getId(aspect))+'header'">
|
||||
<mat-panel-title class="adf-accordion-aspect-list-expansion-panel-header-title">
|
||||
{{getTitle(aspect)}}
|
||||
</mat-panel-title>
|
||||
<mat-panel-description
|
||||
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'">
|
||||
<ng-container matColumnDef="name">
|
||||
<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>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="title">
|
||||
<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>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="dataType">
|
||||
<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>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="propertyColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: propertyColumns;"></tr>
|
||||
</table>
|
||||
</mat-expansion-panel>
|
||||
<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">
|
||||
<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>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="title">
|
||||
<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>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="dataType">
|
||||
<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>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="propertyColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: propertyColumns;"></tr>
|
||||
</table>
|
||||
</mat-expansion-panel>
|
||||
</div>
|
||||
</mat-accordion>
|
||||
</div>
|
||||
|
||||
|
||||
@ -26,18 +26,28 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
|
||||
|
||||
.adf-aspect-list-check-button {
|
||||
margin-right: 5px;
|
||||
height: 48px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.adf-aspect-list-element-title {
|
||||
font-size: smaller;
|
||||
.adf-accordion-aspect-list-item {
|
||||
padding-left: 14px;
|
||||
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 {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
background: border-box;
|
||||
|
||||
#{$mat-checkbox-background} {
|
||||
height: 16px;
|
||||
@ -46,11 +56,12 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei
|
||||
|
||||
&-header {
|
||||
font-size: smaller;
|
||||
padding-left: 12px;
|
||||
padding-left: 0;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
&-header-title {
|
||||
flex: 1 1 0;
|
||||
color: var(--theme-secondary-text);
|
||||
}
|
||||
|
||||
&-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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -180,7 +180,9 @@ describe('AspectListComponent', () => {
|
||||
});
|
||||
|
||||
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).not.toBeNull();
|
||||
expect(noNameAspect.innerText).toBe('cst:nonamedAspect');
|
||||
@ -203,14 +205,12 @@ describe('AspectListComponent', () => {
|
||||
});
|
||||
|
||||
it('should show node aspects as checked', async () => {
|
||||
const panel = await loader.getHarness(MatExpansionPanelHarness);
|
||||
const checkbox = await panel.getHarness(MatCheckboxHarness);
|
||||
const checkbox = await loader.getHarness(MatCheckboxHarness);
|
||||
expect(await checkbox.isChecked()).toBe(true);
|
||||
});
|
||||
|
||||
it('should add checked and remove unchecked aspects', async () => {
|
||||
const panel = (await loader.getAllHarnesses(MatExpansionPanelHarness))[1];
|
||||
const checkbox = await panel.getHarness(MatCheckboxHarness);
|
||||
const checkbox = (await loader.getAllHarnesses(MatCheckboxHarness))[1];
|
||||
expect(await checkbox.isChecked()).toBe(false);
|
||||
|
||||
await checkbox.toggle();
|
||||
@ -223,8 +223,7 @@ describe('AspectListComponent', () => {
|
||||
});
|
||||
|
||||
it('should reset aspects on reset', async () => {
|
||||
const panel = (await loader.getAllHarnesses(MatExpansionPanelHarness))[1];
|
||||
const checkbox = await panel.getHarness(MatCheckboxHarness);
|
||||
const checkbox = (await loader.getAllHarnesses(MatCheckboxHarness))[1];
|
||||
expect(await checkbox.isChecked()).toBe(false);
|
||||
|
||||
await checkbox.toggle();
|
||||
@ -246,8 +245,7 @@ describe('AspectListComponent', () => {
|
||||
|
||||
spyOn(component.valueChanged, 'emit');
|
||||
spyOn(component.updateCounter, 'emit');
|
||||
const panel = (await loader.getAllHarnesses(MatExpansionPanelHarness))[1];
|
||||
const checkbox = await panel.getHarness(MatCheckboxHarness);
|
||||
const checkbox = (await loader.getAllHarnesses(MatCheckboxHarness))[1];
|
||||
await checkbox.toggle();
|
||||
fixture.detectChanges();
|
||||
expect(component.valueChanged.emit).toHaveBeenCalledWith(['frs:AspectOne', 'frs:SecondAspect', ...storedAspect]);
|
||||
|
||||
@ -60,6 +60,7 @@ export class AspectListComponent implements OnInit {
|
||||
nodeAspectStatus: string[] = [];
|
||||
notDisplayedAspects: string[] = [];
|
||||
hasEqualAspect: boolean = true;
|
||||
isPanelOpen: boolean[] = [];
|
||||
|
||||
private readonly destroyRef = inject(DestroyRef);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user