remove the tabindex attr from non-interactive DOM elements

These changes follow guidance from Sandi and from the general DOM specification that the `tabindex` attribute (along with Angular's `isFocusable` and `isTabbable` attributes) should only be included on elements that can be interacted with via mouse clicks or keyboard input.

A number of elements in the degree planner view were non-interactive by design but still were in tabbable. This commit removes tabbing from those non-interactive elements.

src/app/app.component.html

-<div class="alert-banner" tabindex="0">
+<div class="alert-banner">
   <p><md-icon class="material-icons error" role="img" aria-hidden="true">warning</md-icon> Course Search & Enroll will not be available from June 28 at 4:00pm to July 8 at 8:00am due to the <a href="https://upgrade.sis.wisc.edu/" target="_blank">SIS Upgrade.</a></p>
 </div>
 <header ngClass.sm="hide-navigation-bar" ngClass.xs="hide-navigation-bar" role="banner">

src/app/degree-planner/degree-planner-view/degree-planner-view.component.html

@@ -20,7 +20,7 @@
           fxLayoutGap="20px"
           fxLayoutAlign="start center"
           style="margin: 24px 0px 24px 24px;">
-          <h1 class="sr-only" id="maincontent" tabindex="0">Degree Planner</h1>
+          <h1 class="sr-only" id="maincontent">Degree Planner</h1>
           <mat-form-field class="degree-plans-form-field" floatLabel="always">
             <mat-label>Degree Plans</mat-label>
             <mat-select

src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html

-<div class="term-container"
-    aria-label="List of saved for later courses"
-    id="saved-courses"
-    isFocusable="true"
-    isTabbable="true"
-    tabindex="0">
+<div class="term-container" aria-label="List of saved for later courses" id="saved-courses">
   <div
     class="course-list"
     cdkDropList

src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html

@@ -5,11 +5,7 @@
         <h3>Course key</h3>
       </mat-panel-title>
     </mat-expansion-panel-header>
-    <mat-list id="course-key-list" role="list"
-      aria-label="Course key List"
-      isFocusable="true"
-      isTabbable="true"
-      tabindex="0">
+    <mat-list id="course-key-list" role="list" aria-label="Course key List">
       <mat-list-item role="listitem">
         <i
           aria-hidden="true"
@@ -55,10 +51,7 @@
         <h3>Menu</h3>
       </mat-panel-title>
     </mat-expansion-panel-header>
-    <div aria-label="Utility menu items"
-      isFocusable="true"
-      isTabbable="true"
-      tabindex="0">
+    <div aria-label="Utility menu items">
       <a mat-button class="sidenav-link-btn" target="_blank" href="/api/degreeplanpdf?roadmapId={{ planId }}&hideGrades={{ !(showGrades$ | async) }}">
         <i aria-hidden="true" class="material-icons" alt="create pdf">picture_as_pdf</i>
         Create PDF

src/app/degree-planner/term-container/term-container.component.html

 <ng-template #enrolled id="enrolled-courses">
   <div class="course-list-wrapper">
     <div class="course-list">
-      <div class="course-list-inner"
-        attr.aria-label="List of courses in {{ termCode | getTermDescription }} term"
-        isFocusable="true"
-        isTabbable="true"
-        tabindex="0">
+      <div class="course-list-inner" attr.aria-label="List of courses in {{ termCode | getTermDescription }} term">
         <ng-container *ngIf="enrolledCourses.length === 0">
           <p *ngIf="(term$ | async).termCode.isPast()" aria-label="No courses taken" class="no-courses">
             No courses taken
@@ -40,11 +36,7 @@
       (cdkDropListDropped)="drop($event)"
       (cdkDropListEntered)="dragEnter($event)"
       (cdkDropListExited)="dragExit($event)">
-      <div class="course-list-inner term-body"
-        attr.aria-label="List of courses in {{ termCode | getTermDescription }} term"
-        isFocusable="true"
-        isTabbable="true"
-        tabindex="0">
+      <div class="course-list-inner term-body" attr.aria-label="List of courses in {{ termCode | getTermDescription }} term">
         <ng-container
           *ngIf="plannedCourses.length === 0 && !hasItemDraggedOver">
           <p *ngIf="(term$ | async).termCode.isActive()" class="no-courses">
@@ -100,11 +92,8 @@
       fxLayout="row"
       class="term-header"
       fxLayoutAlign="space-between center"
-      attr.aria-label="{{ termCode | getTermDescription }} term"
-      isFocusable="true"
-      isTabbable="true"
-      tabindex="0">
-      <h3 tabindex="0" class="term-description">{{ termCode | getTermDescription }}</h3>
+      attr.aria-label="{{ termCode | getTermDescription }} term">
+      <h3 class="term-description">{{ termCode | getTermDescription }}</h3>
 
       <div fxLayout="row" fxLayoutAlign="space-between center">
         <p class="text-right semi-bold credits">