From 447dd6eddf92f1eb2af1b9df3e3bb6deb4b3ca6a Mon Sep 17 00:00:00 2001 From: Paulina Nogal <pnogal@wisc.edu> Date: Wed, 5 Dec 2018 18:39:09 +0000 Subject: [PATCH] Tooltips for note icons --- .../dialogs/notes-dialog/notes-dialog.component.html | 8 ++++---- .../term-container/term-container.component.html | 2 +- src/app/shared/shared.module.ts | 4 +++- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/app/degree-planner/dialogs/notes-dialog/notes-dialog.component.html b/src/app/degree-planner/dialogs/notes-dialog/notes-dialog.component.html index 955e529..c338c6d 100644 --- a/src/app/degree-planner/dialogs/notes-dialog/notes-dialog.component.html +++ b/src/app/degree-planner/dialogs/notes-dialog/notes-dialog.component.html @@ -1,6 +1,6 @@ <mat-toolbar color="primary" class="dialog-toolbar"> <h2 class="dialog-toolbar-title">{{ id ? 'Edit' : 'Add' }} Note</h2> - <button mat-button mat-dialog-close class="close-btn"><i class="material-icons">clear</i></button> + <button mat-button mat-dialog-close class="close-btn" aria-label="Close note dialog"><i class="material-icons">clear</i></button> </mat-toolbar> <mat-dialog-content id="note-dialog" class="mat-typography dialog-with-toolbar"> @@ -15,8 +15,8 @@ </mat-dialog-content> </div> <mat-dialog-actions align="end"> - <button mat-button class="btn-secondary" mat-dialog-close>Cancel</button> - <button mat-raised-button id="saveNote" class="btn-primary mat-button" (click)="saveNote()" [disabled]="!note || note.length > 512">Save</button> + <button mat-button class="btn-secondary" mat-dialog-close aria-label="Close note dialog">Cancel</button> + <button mat-raised-button id="saveNote" class="btn-primary mat-button" (click)="saveNote()" [disabled]="!note || note.length > 512" aria-label="Save note for selected term and close dialog">Save</button> </mat-dialog-actions> <div id="delete-note-section" *ngIf="id"> @@ -25,7 +25,7 @@ <p>Once the note is deleted, there is no going back.</p> </div> <mat-dialog-actions align="end"> - <button mat-raised-button class="btn-delete mat-button" (click)="removeNote()" mat-dialog-close>Delete</button> + <button mat-raised-button class="btn-delete mat-button" (click)="removeNote()" mat-dialog-close aria-label="Delete note from selected term">Delete</button> </mat-dialog-actions> </div> </div> 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 c849747..63e6628 100644 --- a/src/app/degree-planner/term-container/term-container.component.html +++ b/src/app/degree-planner/term-container/term-container.component.html @@ -5,7 +5,7 @@ <div fxLayout="row" fxLayoutAlign="end center"> <p class="text-right semi-bold credits">{{getTotalCredits()}} Cr</p> <button mat-icon-button> - <mat-icon aria-label="Term notes" class="add-note-icon" (click)="openNotesDialog()">{{ noteForTerm() ? 'insert_drive_file' :'note_add' }}</mat-icon> + <mat-icon aria-label="Open dialog with notes in this term" class="add-note-icon" (click)="openNotesDialog()" [matTooltip]="noteForTerm() ? 'Edit Note' : 'Add Note'" matTooltipPosition="above">{{ noteForTerm() ? 'insert_drive_file' : 'note_add' }}</mat-icon> </button> </div> </div> diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 53c3941..c09a08e 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -14,6 +14,7 @@ import { MatExpansionModule } from '@angular/material/expansion'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatDialogModule } from '@angular/material/dialog'; import { MatInputModule } from '@angular/material/input'; +import { MatTooltipModule } from '@angular/material/tooltip'; import { GetTermDescriptionPipe } from './get-term-description.pipe'; import { AcademicYearStatePipe } from './academic-year-state.pipe'; @@ -34,7 +35,8 @@ const modules = [ MatSidenavModule, MatToolbarModule, MatDialogModule, - MatInputModule + MatInputModule, + MatTooltipModule ]; @NgModule({ -- GitLab