feat(a11y): Add keyboard accessibility to AT unit home (#1943)

src/app/teacher/authoring-tool.module.ts

@@ -65,6 +65,7 @@ import { PreviewComponentButtonComponent } from '../../assets/wise5/authoringToo
 import { StepToolsComponent } from '../../assets/wise5/common/stepTools/step-tools.component';
 import { EditBranchComponent } from '../../assets/wise5/authoringTool/edit-branch/edit-branch.component';
 import { ComponentTypeButtonComponent } from '../../assets/wise5/authoringTool/components/component-type-button/component-type-button.component';
+import { MatExpansionModule } from '@angular/material/expansion';
 
 @NgModule({
   declarations: [
@@ -119,6 +120,7 @@ import { ComponentTypeButtonComponent } from '../../assets/wise5/authoringTool/c
     EditNodeTitleComponent,
     MatBadgeModule,
     MatChipsModule,
+    MatExpansionModule,
     ImportComponentModule,
     NgSelectModule,
     NodeAdvancedAuthoringModule,

src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.html

@@ -1,32 +1,29 @@
-<div id="{{ lesson.id }}" class="lesson" [ngClass]="{ 'lesson-collapsed': !expanded }">
-  <div
-    (click)="toggleExpanded()"
-    class="lesson-bar full-width pointer"
-    fxLayout="row wrap"
-    fxLayoutAlign="start center"
-  >
-    <mat-checkbox
-      color="primary"
-      (change)="selectNode($event.checked)"
-      (click)="$event.stopPropagation()"
-      [disabled]="nodeTypeSelected() === 'step'"
-      aria-label="Select lesson"
-      i18n-aria-label
-    >
-      <node-icon-and-title [nodeId]="lesson.id" [showPosition]="showPosition" />
-    </mat-checkbox>
-    <div
-      class="lesson-expand-collapse-div"
-      matTooltip="Click to expand/collapse lesson"
-      matTooltipPosition="above"
-      i18n-matTooltip
-    ></div>
-    <div class="lesson-buttons" [ngClass]="{ 'lesson-expanded': expanded }" fxLayoutGap="8px">
+<mat-expansion-panel
+  [expanded]="expanded"
+  class="lesson"
+  (opened)="toggleExpanded(true)"
+  (closed)="toggleExpanded(false)"
+>
+  <mat-expansion-panel-header aria-label="Expand/collapse lesson" i18n-aria-label>
+    <mat-panel-title>
+      <mat-checkbox
+        color="primary"
+        (change)="selectNode($event.checked)"
+        (click)="$event.stopPropagation()"
+        (keydown)="$event.stopPropagation()"
+        [disabled]="nodeTypeSelected() === 'step'"
+        aria-label="Select lesson"
+        i18n-aria-label
+      >
+        <node-icon-and-title [nodeId]="lesson.id" [showPosition]="showPosition" />
+      </mat-checkbox>
+    </mat-panel-title>
+    <mat-panel-description class="text" fxLayoutAlign="end center" fxLayoutGap="4px">
       <button
         class="enable-in-translation"
         mat-icon-button
-        (click)="setCurrentNode(lesson.id)"
-        color="primary"
+        (click)="$event.stopPropagation(); setCurrentNode(lesson.id)"
+        (keydown)="$event.stopPropagation()"
         matTooltip="Edit lesson"
         matTooltipPosition="above"
         i18n-matTooltip
@@ -36,7 +33,7 @@
       <button
         mat-icon-button
         (click)="$event.stopPropagation(); move()"
-        color="primary"
+        (keydown)="$event.stopPropagation()"
         matTooltip="Move lesson"
         matTooltipPosition="above"
         i18n-matTooltip
@@ -46,30 +43,17 @@
       <button
         mat-icon-button
         (click)="$event.stopPropagation(); delete()"
-        color="primary"
+        (keydown)="$event.stopPropagation()"
         matTooltip="Delete lesson"
         matTooltipPosition="above"
         i18n-matTooltip
       >
         <mat-icon>delete</mat-icon>
       </button>
-    </div>
-    <div class="expand-collapse-icon">
-      <div *ngIf="!expanded" fxLayoutAlign="center center">
-        <mat-icon>expand_more</mat-icon>
-      </div>
-      <div *ngIf="expanded" fxLayoutAlign="center center">
-        <mat-icon>expand_less</mat-icon>
-      </div>
-    </div>
-  </div>
-  <div *ngIf="expanded" fxLayout="column">
-    <div
-      *ngFor="let childId of lesson.ids"
-      class="step-div"
-      fxLayout="row wrap"
-      fxLayoutAlign="start center"
-    >
+    </mat-panel-description>
+  </mat-expansion-panel-header>
+  <div>
+    <div *ngFor="let childId of lesson.ids" fxLayout="row wrap" fxLayoutAlign="start center">
       <project-authoring-step
         [step]="idToNode[childId]"
         (selectNodeEvent)="selectNodeEvent.emit($event)"
@@ -93,4 +77,4 @@
       </button>
     </div>
   </div>
-</div>
+</mat-expansion-panel>

src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.scss

@@ -1,53 +1,23 @@
 .lesson {
-  padding: 8px;
-  margin: 16px 0px;
-  border: 2px solid #dddddd;
-  border-radius: 6px;
-  position: relative;
-}
-
-.lesson:hover {
-  &.lesson-collapsed {
-    background-color: #add8e6;
+  .mat-expansion-panel-header {
+    padding-inline-start: 8px;
   }
-}
-
-.lesson:hover .lesson-buttons {
-  display: block;
-}
-
-.lesson-bar {
-  height: 40px;
-}
-
-.full-width {
-  width: 100%;
-}
 
-.pointer {
-  cursor: pointer;
-}
-
-.lesson-expand-collapse-div {
-  flex-grow: 1;
-  align-self: stretch;
-}
-
-.lesson-buttons {
-  margin-right: 8px;
-  display: none;
+  .mat-expansion-panel-body {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
 
-  &.lesson-expanded {
-    display: block;
+  .lesson-bar {
+    height: 40px;
   }
-}
 
-.expand-collapse-icon {
-  width: 40px;
-  margin-right: 10px;
-}
+  .full-width {
+    width: 100%;
+  }
 
-.no-steps-message {
-  height: 40px;
-  margin-left: 40px;
+  .no-steps-message {
+    height: 40px;
+    margin-left: 40px;
+  }
 }

src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.spec.ts

@@ -12,8 +12,6 @@ import { NodeIconAndTitleComponent } from '../choose-node-location/node-icon-and
 import { FormsModule } from '@angular/forms';
 import { MatIconModule } from '@angular/material/icon';
 import { ProjectAuthoringStepComponent } from '../project-authoring-step/project-authoring-step.component';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { ProjectAuthoringLessonHarness } from './project-authoring-lesson.harness';
 import { DeleteNodeService } from '../../services/deleteNodeService';
 import { CopyNodesService } from '../../services/copyNodesService';
 import { MatMenuModule } from '@angular/material/menu';
@@ -24,11 +22,12 @@ import { CopyTranslationsService } from '../../services/copyTranslationsService'
 import { TeacherProjectTranslationService } from '../../services/teacherProjectTranslationService';
 import { RemoveNodeIdFromTransitionsService } from '../../services/removeNodeIdFromTransitionsService';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 let component: ProjectAuthoringLessonComponent;
 let fixture: ComponentFixture<ProjectAuthoringLessonComponent>;
 const groupId1 = 'group1';
-let harness: ProjectAuthoringLessonHarness;
 const nodeId1 = 'node1';
 const nodeId2 = 'node2';
 let teacherProjectService: TeacherProjectService;
@@ -49,9 +48,11 @@ describe('ProjectAuthoringLessonComponent', () => {
       declarations: [ProjectAuthoringLessonComponent, ProjectAuthoringStepComponent],
       imports: [
         AddStepButtonComponent,
+        BrowserAnimationsModule,
         FormsModule,
         MatCheckboxModule,
         MatDialogModule,
+        MatExpansionModule,
         MatIconModule,
         MatMenuModule,
         NodeIconAndTitleComponent,
@@ -85,40 +86,9 @@ describe('ProjectAuthoringLessonComponent', () => {
     component = fixture.componentInstance;
     component.lesson = group1;
     fixture.detectChanges();
-    harness = await TestbedHarnessEnvironment.harnessForFixture(
-      fixture,
-      ProjectAuthoringLessonHarness
-    );
   });
 
-  lessonIsExpanded_clickCollapseButton_hideSteps();
-  lessonIsCollapsed_clickExpandButton_showSteps();
-});
-
-function lessonIsExpanded_clickCollapseButton_hideSteps() {
-  describe('lesson is expanded', () => {
-    describe('lesson div is clicked', () => {
-      it('hides steps', async () => {
-        component.expanded = true;
-        (await harness.getExpandCollapseDiv()).click();
-        expect(component.expanded).toBeFalse();
-        const steps = await harness.getSteps();
-        expect(steps.length).toEqual(0);
-      });
-    });
+  it('creates', () => {
+    expect(component).toBeTruthy();
   });
-}
-
-function lessonIsCollapsed_clickExpandButton_showSteps() {
-  describe('lesson is collapsed', () => {
-    describe('lesson div is clicked', () => {
-      it('shows steps', async () => {
-        component.expanded = false;
-        (await harness.getExpandCollapseDiv()).click();
-        expect(component.expanded).toBeTrue();
-        const steps = await harness.getSteps();
-        expect(steps.length).toEqual(2);
-      });
-    });
-  });
-}
+});

src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, Signal } from '@angular/core';
+import { Component, EventEmitter, Input, Output, Signal, ViewEncapsulation } from '@angular/core';
 import { TeacherDataService } from '../../services/teacherDataService';
 import { TeacherProjectService } from '../../services/teacherProjectService';
 import { SelectNodeEvent } from '../domain/select-node-event';
@@ -12,7 +12,8 @@ import { AddStepTarget } from '../../../../app/domain/addStepTarget';
 @Component({
   selector: 'project-authoring-lesson',
   templateUrl: './project-authoring-lesson.component.html',
-  styleUrls: ['./project-authoring-lesson.component.scss']
+  styleUrls: ['./project-authoring-lesson.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class ProjectAuthoringLessonComponent {
   @Input() expanded: boolean = true;
@@ -47,8 +48,8 @@ export class ProjectAuthoringLessonComponent {
     this.dataService.setCurrentNodeByNodeId(nodeId);
   }
 
-  protected toggleExpanded(): void {
-    this.expanded = !this.expanded;
+  protected toggleExpanded(opened: boolean = true): void {
+    this.expanded = opened;
     this.onExpandedChanged.emit({ id: this.lesson.id, expanded: this.expanded });
   }
 

src/assets/wise5/authoringTool/project-authoring-lesson/project-authoring-lesson.harness.ts

@@ -4,11 +4,11 @@ import {
   ProjectAuthoringNodeHarness,
   ProjectAuthoringNodeHarnessFilters
 } from '../project-authoring/project-authoring-node.harness';
+import { MatExpansionPanelHarness } from '@angular/material/expansion/testing';
 
 export class ProjectAuthoringLessonHarness extends ProjectAuthoringNodeHarness {
   static hostSelector = 'project-authoring-lesson';
-  getExpandCollapseDiv = this.locatorFor('.lesson-expand-collapse-div');
-  getExpandCollapseIcon = this.locatorFor('.expand-collapse-icon .mat-icon');
+  getLesson = this.locatorFor(MatExpansionPanelHarness);
   getSteps = this.locatorForAll(ProjectAuthoringStepHarness);
 
   static with(
@@ -24,10 +24,10 @@ export class ProjectAuthoringLessonHarness extends ProjectAuthoringNodeHarness {
   }
 
   async isExpanded(): Promise<boolean> {
-    return (await (await this.getExpandCollapseIcon()).text()) === 'expand_less';
+    return (await (await this.getLesson()).isExpanded()) === true;
   }
 
   async isCollapsed(): Promise<boolean> {
-    return (await (await this.getExpandCollapseIcon()).text()) === 'expand_more';
+    return (await (await this.getLesson()).isExpanded()) === false;
   }
 }