[ACS-9233] a11y testing: Edit Aspects - Interactive controls must not…

… be nested (#10680)
Alfresco · Feb 27, 2025 · 1422604 · 1422604
1 parent ac11fa8
commit 1422604
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 52 deletions.
diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.html b/lib/content-services/src/lib/aspect-list/aspect-list.component.html
@@ -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>
 

diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss
@@ -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;
+    }
+}
diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts b/lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts
@@ -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]);

diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.ts b/lib/content-services/src/lib/aspect-list/aspect-list.component.ts
@@ -60,6 +60,7 @@ export class AspectListComponent implements OnInit {
     nodeAspectStatus: string[] = [];
     notDisplayedAspects: string[] = [];
     hasEqualAspect: boolean = true;
+    isPanelOpen: boolean[] = [];
 
     private readonly destroyRef = inject(DestroyRef);