feat(accessibility): Ensure links have sufficient contrast (#1398)

WISE-Community · Sep 5, 2023 · dc4c4d7 · dc4c4d7
1 parent 8517052
commit dc4c4d7
Show file tree

Hide file tree

Showing 16 changed files with 119 additions and 128 deletions.
diff --git a/src/app/modules/library/community-library/community-library.component.html b/src/app/modules/library/community-library/community-library.component.html
@@ -1,8 +1,6 @@
 <div class="content-block library-teacher__paginate">
   <div fxLayoutAlign="center center" fxLayout.xs="column">
-    <a class="info mat-caption" [routerLink]="" (click)="showInfo()" i18n
-      >What is Community Built?</a
-    >
+    <a class="mat-caption" href="#" (click)="showInfo($event)" i18n>What is Community Built?</a>
     <span fxFlex fxHide.xs></span>
     <mat-paginator
       [length]="filteredProjects.length"

diff --git a/src/app/modules/library/community-library/community-library.component.ts b/src/app/modules/library/community-library/community-library.component.ts
@@ -2,7 +2,7 @@ import { Component, Inject } from '@angular/core';
 import { LibraryService } from '../../../services/library.service';
 import { LibraryProject } from '../libraryProject';
 import { LibraryComponent } from '../library/library.component';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-community-library',
@@ -13,8 +13,8 @@ export class CommunityLibraryComponent extends LibraryComponent {
   projects: LibraryProject[] = [];
   filteredProjects: LibraryProject[] = [];
 
-  constructor(protected libraryService: LibraryService, public dialog: MatDialog) {
-    super(libraryService);
+  constructor(protected dialog: MatDialog, protected libraryService: LibraryService) {
+    super(dialog, libraryService);
   }
 
   ngOnInit() {
@@ -35,10 +35,8 @@ export class CommunityLibraryComponent extends LibraryComponent {
     }
   }
 
-  showInfo() {
-    this.dialog.open(CommunityLibraryDetailsComponent, {
-      panelClass: 'dialog-sm'
-    });
+  protected getDetailsComponent(): any {
+    return CommunityLibraryDetailsComponent;
   }
 }
 

diff --git a/src/app/modules/library/library/library.component.ts b/src/app/modules/library/library/library.component.ts
@@ -5,6 +5,7 @@ import { Standard } from '../standard';
 import { LibraryProject } from '../libraryProject';
 import { PageEvent, MatPaginator } from '@angular/material/paginator';
 import { Subscription } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
 
 @Directive()
 export abstract class LibraryComponent implements OnInit {
@@ -30,7 +31,7 @@ export abstract class LibraryComponent implements OnInit {
 
   @ViewChildren(MatPaginator) paginators!: QueryList<MatPaginator>;
 
-  constructor(protected libraryService: LibraryService) {}
+  constructor(protected dialog: MatDialog, protected libraryService: LibraryService) {}
 
   ngOnInit() {
     this.subscriptions.add(
@@ -186,4 +187,13 @@ export abstract class LibraryComponent implements OnInit {
   countVisibleProjects(set: LibraryProject[]): number {
     return set.filter((project) => 'project' && project.visible).length;
   }
+
+  protected showInfo(event: Event): void {
+    event.preventDefault();
+    this.dialog.open(this.getDetailsComponent(), {
+      panelClass: 'dialog-sm'
+    });
+  }
+
+  protected abstract getDetailsComponent(): any;
 }
diff --git a/src/app/modules/library/official-library/official-library.component.html b/src/app/modules/library/official-library/official-library.component.html
@@ -38,7 +38,7 @@
 
 <div *ngIf="!isSplitScreen" class="content-block library-teacher__official">
   <p ngClass.xs="center">
-    <a class="info mat-caption" [routerLink]="" (click)="showInfo()" i18n>What is WISE Tested?</a>
+    <a class="mat-caption" href="#" (click)="showInfo($event)" i18n>What is WISE Tested?</a>
   </p>
   <ng-container *ngTemplateOutlet="library"></ng-container>
 </div>

diff --git a/src/app/modules/library/official-library/official-library.component.ts b/src/app/modules/library/official-library/official-library.component.ts
@@ -18,8 +18,8 @@ export class OfficialLibraryComponent extends LibraryComponent {
   libraryGroups: LibraryGroup[] = [];
   expandedGroups: object = {};
 
-  constructor(protected libraryService: LibraryService, public dialog: MatDialog) {
-    super(libraryService);
+  constructor(protected dialog: MatDialog, protected libraryService: LibraryService) {
+    super(dialog, libraryService);
   }
 
   ngOnInit() {
@@ -45,10 +45,8 @@ export class OfficialLibraryComponent extends LibraryComponent {
     }
   }
 
-  showInfo() {
-    this.dialog.open(OfficialLibraryDetailsComponent, {
-      panelClass: 'dialog-sm'
-    });
+  protected getDetailsComponent(): any {
+    return OfficialLibraryDetailsComponent;
   }
 }
 

diff --git a/src/app/modules/library/personal-library/personal-library.component.html b/src/app/modules/library/personal-library/personal-library.component.html
@@ -1,6 +1,6 @@
 <div class="content-block library-teacher__paginate">
   <div fxLayoutAlign="center center" fxLayout.xs="column">
-    <a class="info mat-caption" [routerLink]="" (click)="showInfo()" i18n>What are My Units?</a>
+    <a class="mat-caption" href="#" (click)="showInfo($event)" i18n>What are My Units?</a>
     <span fxFlex fxHide.xs></span>
     <mat-paginator
       [length]="filteredProjects.length"

diff --git a/src/app/modules/library/personal-library/personal-library.component.ts b/src/app/modules/library/personal-library/personal-library.component.ts
@@ -2,7 +2,7 @@ import { Component, Inject } from '@angular/core';
 import { LibraryProject } from '../libraryProject';
 import { LibraryService } from '../../../services/library.service';
 import { LibraryComponent } from '../library/library.component';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-personal-library',
@@ -15,8 +15,8 @@ export class PersonalLibraryComponent extends LibraryComponent {
   personalProjects: LibraryProject[] = [];
   sharedProjects: LibraryProject[] = [];
 
-  constructor(protected libraryService: LibraryService, private dialog: MatDialog) {
-    super(libraryService);
+  constructor(protected dialog: MatDialog, protected libraryService: LibraryService) {
+    super(dialog, libraryService);
   }
 
   ngOnInit() {
@@ -77,10 +77,8 @@ export class PersonalLibraryComponent extends LibraryComponent {
     }
   }
 
-  showInfo() {
-    this.dialog.open(PersonalLibraryDetailsComponent, {
-      panelClass: 'dialog-sm'
-    });
+  protected getDetailsComponent(): any {
+    return PersonalLibraryDetailsComponent;
   }
 }
 

diff --git a/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.html b/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.html
@@ -37,10 +37,8 @@
   </div>
   <div>
     <span i18n>Access Code: {{ run.runCode }}</span> (<a
-      class="share-with-students-link"
-      [routerLink]=""
-      (click)="shareCode()"
-      (keyup.enter)="shareCode()"
+      href="#"
+      (click)="shareCode($event)"
       tabindex="0"
       i18n
       >Share with students</a

diff --git a/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.scss b/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.scss
@@ -30,7 +30,3 @@
 app-run-menu {
   margin: -8px -8px 0 0;
 }
-
-.share-with-students-link {
-  cursor: pointer;
-}
diff --git a/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.ts b/src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.ts
@@ -96,7 +96,8 @@ export class TeacherRunListItemComponent implements OnInit {
     return run.isCompleted(this.configService.getCurrentServerTime());
   }
 
-  shareCode(): void {
+  shareCode(event: Event): void {
+    event.preventDefault();
     this.dialog.open(ShareRunCodeDialogComponent, {
       data: this.run,
       panelClass: 'dialog-sm'

diff --git a/src/messages.xlf b/src/messages.xlf
@@ -5249,14 +5249,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>What is Community Built?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/community-library/community-library.component.html</context>
-          <context context-type="linenumber">4</context>
+          <context context-type="linenumber">3</context>
         </context-group>
       </trans-unit>
       <trans-unit id="fad56dfa6010a94cbb7433624f3328d1875189e1" datatype="html">
         <source> No community designed units found. </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/modules/library/community-library/community-library.component.html</context>
-          <context context-type="linenumber">26,28</context>
+          <context context-type="linenumber">24,26</context>
         </context-group>
       </trans-unit>
       <trans-unit id="d1acaeb5fa466988ff526619702c4bf21e0a5e15" datatype="html">
@@ -5405,7 +5405,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.html</context>
-          <context context-type="linenumber">74</context>
+          <context context-type="linenumber">72</context>
         </context-group>
       </trans-unit>
       <trans-unit id="59a08e65c39e2cecb841fc7123a77756f52c8db3" datatype="html">
@@ -7468,7 +7468,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.html</context>
-          <context context-type="linenumber">104</context>
+          <context context-type="linenumber">102</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2874cc3a35edcf67e588849afeb796f57163458b" datatype="html">
@@ -8638,35 +8638,35 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Share with students</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.html</context>
-          <context context-type="linenumber">46</context>
+          <context context-type="linenumber">44</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1de4ea44945520c73d40f9c5b417692a15bbdd0c" datatype="html">
         <source> Shared by <x id="INTERPOLATION" equiv-text="{{ run.owner.firstName }}"/> <x id="INTERPOLATION_1" equiv-text="{{ run.owner.lastName }}"/> </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.html</context>
-          <context context-type="linenumber">49,51</context>
+          <context context-type="linenumber">47,49</context>
         </context-group>
       </trans-unit>
       <trans-unit id="490233cd77b10fe95606d32aa5ed4be533645820" datatype="html">
         <source>(Legacy Unit)</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.html</context>
-          <context context-type="linenumber">77</context>
+          <context context-type="linenumber">75</context>
         </context-group>
       </trans-unit>
       <trans-unit id="f88e7633c282be79dd79aa3765a3a853a9b5a5a4" datatype="html">
         <source>Last student login: <x id="INTERPOLATION" equiv-text="{{ run.lastRun | date: &apos;short&apos; }}"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.html</context>
-          <context context-type="linenumber">101</context>
+          <context context-type="linenumber">99</context>
         </context-group>
       </trans-unit>
       <trans-unit id="f31a4ac5cfc26f2d23677bd24f59219dc5f1c491" datatype="html">
         <source>Teacher Tools</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/teacher/teacher-run-list-item/teacher-run-list-item.component.html</context>
-          <context context-type="linenumber">112</context>
+          <context context-type="linenumber">110</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1133960927497534087" datatype="html">

diff --git a/src/style/base/_base.scss b/src/style/base/_base.scss
@@ -7,13 +7,7 @@ strong, b, .strong {
 }
 
 a {
-  text-decoration: none;
-
-  &:not(.mat-mdc-button):not(.mat-mdc-raised-button):not(.mat-mdc-menu-item):not(.mat-mdc-unelevated-button):not(.mat-mdc-outlined-button):not(.mat-mdc-tab-link) {
-    &:hover, &:focus {
-      text-decoration: underline;
-    }
-  }
+  text-decoration: underline;
 }
 
 figure {

diff --git a/src/style/themes/_author.scss b/src/style/themes/_author.scss
@@ -56,26 +56,26 @@ $author-primary: (
 );
 
 $author-accent: (
-  50 : #fdebe8,
-  100 : #fbcdc7,
-  200 : #f8aca1,
-  300 : #f58a7b,
-  400 : #f2715f,
-  500 : #f05843,
-  600 : #ee503d,
-  700 : #ec4734,
-  800 : #e93d2c,
-  900 : #e52d1e,
-  A100 : #ffffff,
-  A200 : #ffe9e7,
-  A400 : #ffb9b4,
-  A700 : #ffa19b,
+  50 : #FBE0E8,
+  100 : #F6B3C6,
+  200 : #F080A0,
+  300 : #E94D79,
+  400 : #E5265D,
+  500 : #E00040,
+  600 : #DC003A,
+  700 : #D80032,
+  800 : #D3002A,
+  900 : #CB001C,
+  A100 : #FFF3F4,
+  A200 : #FFC0C5,
+  A400 : #FF8D96,
+  A700 : #FF747F,
   contrast: (
     50 : #000000,
     100 : #000000,
     200 : #000000,
     300 : #000000,
-    400 : #000000,
+    400 : #ffffff,
     500 : #ffffff,
     600 : #ffffff,
     700 : #ffffff,

diff --git a/src/style/themes/_dark.scss b/src/style/themes/_dark.scss
@@ -36,36 +36,36 @@ $dark-primary: (
 );
 
 $dark-accent: (
-    50 : #fdebe8,
-    100 : #fbcdc7,
-    200 : #f8aca1,
-    300 : #f58a7b,
-    400 : #f2715f,
-    500 : #f05843,
-    600 : #ee503d,
-    700 : #ec4734,
-    800 : #e93d2c,
-    900 : #e52d1e,
-    A100 : #ffffff,
-    A200 : #ffe9e7,
-    A400 : #ffb9b4,
-    A700 : #ffa19b,
-    contrast: (
-        50 : #000000,
-        100 : #000000,
-        200 : #000000,
-        300 : #000000,
-        400 : #000000,
-        500 : #ffffff,
-        600 : #ffffff,
-        700 : #ffffff,
-        800 : #ffffff,
-        900 : #ffffff,
-        A100 : #000000,
-        A200 : #000000,
-        A400 : #000000,
-        A700 : #000000,
-    )
+  50 : #FBE0E8,
+  100 : #F6B3C6,
+  200 : #F080A0,
+  300 : #E94D79,
+  400 : #E5265D,
+  500 : #E00040,
+  600 : #DC003A,
+  700 : #D80032,
+  800 : #D3002A,
+  900 : #CB001C,
+  A100 : #FFF3F4,
+  A200 : #FFC0C5,
+  A400 : #FF8D96,
+  A700 : #FF747F,
+  contrast: (
+    50 : #000000,
+    100 : #000000,
+    200 : #000000,
+    300 : #000000,
+    400 : #ffffff,
+    500 : #ffffff,
+    600 : #ffffff,
+    700 : #ffffff,
+    800 : #ffffff,
+    900 : #ffffff,
+    A100 : #000000,
+    A200 : #000000,
+    A400 : #000000,
+    A700 : #000000,
+  )
 );
 
 $dark-theme-primary: mat.define-palette($dark-primary);