Added keyboard support for lesson toggle open/close in unit plan; fixed lesson title hover state for multiline titles. #2836

Author: breity

src/main/webapp/wise5/vle/nav-item/nav-item.component.html

@@ -1,7 +1,8 @@
 <ng-container *ngIf="nodeStatus.isVisible" [ngSwitch]="type">
   <mat-card *ngSwitchCase="'card'" [ngClass]="{'expanded mat-elevation-z6': expanded}">
-    <mat-card-header (click)="itemClicked($event)" role="button" matRipple fxLayout="row"
-                     tabindex="0" i18n-aria-label aria-label="Expand or collapse lesson content">
+    <mat-card-header (click)="itemClicked($event)" (keyup.enter)="itemClicked($event)" role="button"
+                     matRipple fxLayout="row" tabindex="0" i18n-aria-label
+                     aria-label="Expand or collapse lesson content">
       <node-icon mat-card-avatar class="group-icon" [nodeId]="nodeId" size="36"
                  [icon]="nodeStatus.icon"></node-icon>
       <mat-card-title class="title" style="color: {{nodeStatus.icon.color}};">
@@ -36,8 +37,7 @@
     </mat-card-actions>
   </mat-card>
   <button mat-list-item class="list-item" *ngSwitchCase="'list'" (click)="itemClicked($event)"
-          tabindex="0" i18n-title title="Go to {{nodeTitle}}"
-          [ngClass]="{'group':isGroup}">
+          tabindex="0" i18n-title title="Go to {{nodeTitle}}" [ngClass]="{'group':isGroup}">
     <node-icon matListAvatar [nodeId]="nodeId" [icon]="nodeStatus.icon"></node-icon>
     <p matLine>{{ nodeTitle }}</p>
     <div fxLayoutAlign="center center" fxLayoutGap="8px">

src/main/webapp/wise5/vle/nav-item/nav-item.component.scss

@@ -15,11 +15,16 @@
 }
 
 .mat-card-header {
+  cursor: pointer;
+
   &:focus, &:hover {
     outline: none;
 
     .title {
-      border-bottom: 1px dashed #aaaaaa;
+      text-decoration-line: underline;
+      text-decoration-style: dashed;
+      text-decoration-color: inherit;
+      text-decoration-thickness: from-font;
     }
   }
 }