From 2d8cf52b79ea16b16b9964e4fc235037b72e2397 Mon Sep 17 00:00:00 2001
From: ievavold <ievavold@wisc.edu>
Date: Mon, 17 Jun 2019 13:22:10 -0500
Subject: [PATCH] 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 | 2 +-
.../degree-planner-view.component.html | 2 +-
.../saved-for-later-container.component.html | 7 +------
.../sidenav-menu-item.component.html | 11 ++---------
.../term-container.component.html | 19 ++++---------------
5 files changed, 9 insertions(+), 32 deletions(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index d2cfbfe..68c64db 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<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">
diff --git a/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html b/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html
index 3bc8f5d..28d7abc 100644
--- a/src/app/degree-planner/degree-planner-view/degree-planner-view.component.html
+++ b/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
diff --git a/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html b/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html
index f8afdb5..cfcd23b 100644
--- a/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html
+++ b/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html
@@ -1,9 +1,4 @@
-<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
diff --git a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html b/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html
index 200d70e..245bc41 100644
--- a/src/app/degree-planner/sidenav-menu-item/sidenav-menu-item.component.html
+++ b/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
diff --git a/src/app/degree-planner/term-container/term-container.component.html b/src/app/degree-planner/term-container/term-container.component.html
index c513f97..1311470 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -1,11 +1,7 @@
<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">
--
GitLab