feat(a11y): Add keyboard accessibility to AT node authoring (#1950)

* Allow lesson titles to fill container width

src/assets/wise5/authoringTool/components/edit-component-advanced-button/edit-component-advanced-button.component.html

@@ -1,8 +1,8 @@
 <button
   class="enable-in-translation"
   mat-icon-button
-  color="primary"
   (click)="$event.stopPropagation(); showComponentAdvancedAuthoring()"
+  (keydown)="$event.stopPropagation()"
   matTooltip="Advanced"
   matTooltipPosition="above"
   i18n-matTooltip

src/assets/wise5/authoringTool/components/preview-component-button/preview-component-button.component.html

@@ -1,10 +1,10 @@
 <button
   mat-icon-button
-  color="primary"
   matTooltip="Preview component"
   matTooltipPosition="above"
   i18n-matTooltip
   (click)="$event.stopPropagation(); popUpComponentPreview()"
+  (keydown)="$event.stopPropagation()"
 >
   <mat-icon>preview</mat-icon>
 </button>

src/assets/wise5/authoringTool/node/copy-component-button/copy-component-button.component.html

@@ -1,7 +1,7 @@
 <button
   mat-icon-button
-  color="primary"
-  (click)="copy($event)"
+  (click)="$event.stopPropagation(); copy()"
+  (keydown)="$event.stopPropagation()"
   matTooltip="Copy component"
   matTooltipPosition="above"
   i18n-matTooltip

src/assets/wise5/authoringTool/node/copy-component-button/copy-component-button.component.ts

@@ -22,8 +22,7 @@ export class CopyComponentButtonComponent {
     private projectService: TeacherProjectService
   ) {}
 
-  protected copy(event: Event): void {
-    event.stopPropagation();
+  protected copy(): void {
     const newComponents = this.node.copyComponents([this.componentId], this.componentId);
     this.projectService.saveProject();
     this.copyTranslationsService.tryCopyComponents(this.node, newComponents);

src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html

@@ -1,8 +1,13 @@
-<div class="top-button-bar">
-  <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="16px">
+<div class="node-authoring">
+  <div
+    class="node-authoring-header"
+    fxLayout="row wrap"
+    fxLayoutAlign="start center"
+    fxLayoutGap="16px"
+  >
     <teacher-node-icon [nodeId]="nodeId" [canEdit]="true" size="18" />
     <edit-node-title [node]="node" />
-    <div class="node-buttons" fxLayoutGap="16px">
+    <div fxLayoutGap="16px">
       <button
         class="enable-in-translation"
         mat-raised-button
@@ -16,189 +21,154 @@
       </button>
     </div>
   </div>
+  <div class="node-authoring-controls">
+    @if (!isGroupNode) {
+      <div class="components-header" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="4px">
+        <h5 i18n>Components</h5>
+        <add-component-button
+          [node]="node"
+          (newComponentsEvent)="highlightAndExpandComponents($event)"
+        />
+        <div *ngIf="isAnyComponentSelected()">
+          <button
+            mat-icon-button
+            color="primary"
+            (click)="chooseComponentLocation('move')"
+            matTooltip="Move Components"
+            matTooltipPosition="above"
+            i18n-matTooltip
+          >
+            <mat-icon>redo</mat-icon>
+          </button>
+          <button
+            mat-icon-button
+            color="primary"
+            (click)="chooseComponentLocation('copy')"
+            matTooltip="Copy Components"
+            matTooltipPosition="above"
+            i18n-matTooltip
+          >
+            <mat-icon>content_copy</mat-icon>
+          </button>
+          <button
+            mat-icon-button
+            color="primary"
+            (click)="deleteComponents()"
+            matTooltip="Delete Components"
+            matTooltipPosition="above"
+            i18n-matTooltip
+          >
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+        <span fxFlex></span>
+        <div fxLayoutGap="16px">
+          <button
+            class="enable-in-translation"
+            mat-raised-button
+            color="primary"
+            (click)="setAllComponentsIsExpanded(true)"
+            [disabled]="getNumberOfComponentsExpanded() === components.length"
+            i18n
+          >
+            + Expand All
+          </button>
+          <button
+            class="enable-in-translation"
+            mat-raised-button
+            color="primary"
+            (click)="setAllComponentsIsExpanded(false)"
+            [disabled]="getNumberOfComponentsExpanded() === 0"
+            i18n
+          >
+            - Collapse All
+          </button>
+        </div>
+      </div>
+    }
+  </div>
+  @if (components.length === 0 && !isGroupNode) {
+    <p i18n>This step does not have any components. Click the + button to add a component.</p>
+  }
   <div
-    *ngIf="!isGroupNode"
-    class="components-header"
-    fxLayout="row"
-    fxLayoutAlign="start center"
-    fxLayoutGap="4px"
+    cdkDropList
+    (cdkDropListDropped)="dropComponent($event)"
+    cdkScrollable
+    fxLayout="column"
+    fxLayoutGap="8px"
   >
-    <h5 i18n>Components</h5>
-    <add-component-button
-      [node]="node"
-      (newComponentsEvent)="highlightAndExpandComponents($event)"
-    />
-    <div *ngIf="isAnyComponentSelected()">
-      <button
-        mat-icon-button
-        color="primary"
-        (click)="chooseComponentLocation('move')"
-        matTooltip="Move Components"
-        matTooltipPosition="above"
-        i18n-matTooltip
-      >
-        <mat-icon>redo</mat-icon>
-      </button>
-      <button
-        mat-icon-button
-        color="primary"
-        (click)="chooseComponentLocation('copy')"
-        matTooltip="Copy Components"
-        matTooltipPosition="above"
-        i18n-matTooltip
-      >
-        <mat-icon>content_copy</mat-icon>
-      </button>
-      <button
-        mat-icon-button
-        color="primary"
-        (click)="deleteComponents()"
-        matTooltip="Delete Components"
-        matTooltipPosition="above"
-        i18n-matTooltip
-      >
-        <mat-icon>delete</mat-icon>
-      </button>
-    </div>
-    <span fxFlex></span>
-    <div *ngIf="!isGroupNode" fxLayoutGap="16px">
-      <button
-        class="enable-in-translation"
-        mat-raised-button
-        color="primary"
-        (click)="setAllComponentsIsExpanded(true)"
-        [disabled]="getNumberOfComponentsExpanded() === components.length"
-        i18n
-      >
-        + Expand All
-      </button>
-      <button
-        class="enable-in-translation"
-        mat-raised-button
-        color="primary"
-        (click)="setAllComponentsIsExpanded(false)"
-        [disabled]="getNumberOfComponentsExpanded() === 0"
-        i18n
-      >
-        - Collapse All
-      </button>
-    </div>
-  </div>
-</div>
-<div *ngIf="components.length === 0 && !isGroupNode" class="no-components-message">
-  <em i18n>This step does not have any components. Click the + button to add a component.</em>
-</div>
-<div cdkDropList (cdkDropListDropped)="dropComponent($event)" cdkScrollable>
-  <div *ngFor="let component of components; let i = index">
-    <div
-      [id]="component.id"
-      class="component"
-      cdkDrag
-      [cdkDragDisabled]="components.length < 2"
-      fxLayout="row"
-      fxLayoutAlign="start"
-      [ngClass]="{
-        'component-header-highlight': !componentsToExpanded[component.id]
-      }"
-    >
-      <div style="width: 100%">
-        <div
-          (click)="toggleComponent(component.id)"
-          class="component-header"
-          fxLayout="row"
-          fxLayoutAlign="start center"
-          fxLayoutGap="8px"
-          aria-label="Toggle component authoring"
-          i18n-aria-label
+    @for (component of components; track component.id; let i = $index) {
+      <div fxLayout="row" fxLayoutGap="4px">
+        <mat-expansion-panel
+          [id]="component.id"
+          [expanded]="componentsToExpanded[component.id]"
+          class="component"
+          cdkDrag
+          [cdkDragDisabled]="components.length < 2"
+          (opened)="toggleComponent(component.id, true)"
+          (closed)="toggleComponent(component.id, false)"
         >
-          <div fxLayout="row" fxLayoutAlign="start center">
-            <mat-icon
-              class="drag-handle"
-              *ngIf="components.length > 1"
-              cdkDragHandle
-              title="Drag to reorder"
-              i18n-title
-              >drag_indicator</mat-icon
-            >
-            <mat-checkbox
-              color="primary"
-              [(ngModel)]="componentsToChecked()[component.id]"
-              (change)="componentCheckboxChanged(component.id, $event.checked)"
-              (click)="$event.stopPropagation()"
-              aria-label="Select component"
-              i18n-aria-label
-            >
-              <span class="component-label"
-                >{{ i + 1 }}. {{ getComponentTypeLabel(component.type) }}</span
+          <mat-expansion-panel-header aria-label="Expand/collapse component" i18n-aria-label>
+            <mat-panel-title fxLayout="row" fxLayoutAlign="start center">
+              @if (components.length > 1) {
+                <mat-icon class="drag-handle" cdkDragHandle title="Drag to reorder" i18n-title
+                  >drag_indicator</mat-icon
+                >
+              }
+              <mat-checkbox
+                color="primary"
+                [(ngModel)]="componentsToChecked()[component.id]"
+                (change)="componentCheckboxChanged(component.id, $event.checked)"
+                (click)="$event.stopPropagation()"
+                (keydown)="$event.stopPropagation()"
+                aria-label="Select component"
+                i18n-aria-label
               >
-            </mat-checkbox>
-          </div>
-          <ng-container>
-            <div
-              class="component-expand-collapse-div"
-              matTooltip="Click to expand/collapse"
-              matTooltipPosition="above"
-              i18n-matTooltip
-            ></div>
-            <edit-component-advanced-button
-              *ngIf="componentsToExpanded[component.id]"
-              [componentContent]="component"
-              [nodeId]="nodeId"
-            />
-            <preview-component-button
-              class="dynamic-component-button"
-              [ngClass]="{
-                'show-dynamic-component-button': componentsToExpanded[component.id]
-              }"
-              [nodeId]="nodeId"
-              [componentId]="component.id"
-            />
-            <copy-component-button
-              class="dynamic-component-button"
-              [ngClass]="{
-                'show-dynamic-component-button': componentsToExpanded[component.id]
-              }"
-              [node]="node"
-              [componentId]="component.id"
-              (newComponentEvent)="highlightAndExpandComponents($event)"
-            />
-            <button
-              mat-icon-button
-              color="primary"
-              class="dynamic-component-button"
-              [ngClass]="{
-                'show-dynamic-component-button': componentsToExpanded[component.id]
-              }"
-              (click)="deleteComponent($event, i + 1, component)"
-              matTooltip="Delete Component"
-              matTooltipPosition="above"
-              i18n-matTooltip
-            >
-              <mat-icon>delete</mat-icon>
-            </button>
-          </ng-container>
-          <div fxLayout="row" fxLayoutAlign="end center">
-            <div *ngIf="!componentsToExpanded[component.id]" fxLayoutAlign="end center">
-              <mat-icon>expand_more</mat-icon>
-            </div>
-            <div *ngIf="componentsToExpanded[component.id]" fxLayoutAlign="end center">
-              <mat-icon>expand_less</mat-icon>
-            </div>
+                <span>{{ i + 1 }}. {{ getComponentTypeLabel(component.type) }}</span>
+              </mat-checkbox>
+            </mat-panel-title>
+            <mat-panel-description class="text" fxLayoutAlign="end center" fxLayoutGap="4px">
+              <edit-component-advanced-button [componentContent]="component" [nodeId]="nodeId" />
+              <preview-component-button
+                class="component-action"
+                [nodeId]="nodeId"
+                [componentId]="component.id"
+              />
+              <copy-component-button
+                class="component-action"
+                [node]="node"
+                [componentId]="component.id"
+                (newComponentEvent)="highlightAndExpandComponents($event)"
+              />
+              <button
+                mat-icon-button
+                class="component-action"
+                (click)="$event.stopPropagation(); deleteComponent($event, i + 1, component)"
+                (keydown)="$event.stopPropagation()"
+                matTooltip="Delete Component"
+                matTooltipPosition="above"
+                i18n-matTooltip
+              >
+                <mat-icon>delete</mat-icon>
+              </button>
+            </mat-panel-description>
+          </mat-expansion-panel-header>
+          <div>
+            @if (componentsToExpanded[component.id]) {
+              <component-authoring-component
+                [nodeId]="nodeId"
+                [componentContent]="component"
+              ></component-authoring-component>
+            }
           </div>
-        </div>
-        <div *ngIf="componentsToExpanded[component.id]" class="component-authoring">
-          <component-authoring-component
-            [nodeId]="nodeId"
-            [componentContent]="component"
-          ></component-authoring-component>
-        </div>
+        </mat-expansion-panel>
         <add-component-button
           class="add-component"
           [insertAfterComponentId]="component.id"
           [node]="node"
           (newComponentsEvent)="highlightAndExpandComponents($event)"
         />
       </div>
-    </div>
+    }
   </div>
 </div>