Visual changes for accessibility fixes

src/app/dars/audit/audit.component.html

@@ -6,6 +6,13 @@
         <span *ngFor="let line of audit.errorText">{{ line }}</span>
       </div>
     </div>
+    <h1 class="text-align-center">
+      {{audit.header.clientDefinedMessage}}
+      <br />
+      {{audit.header.degreeProgramTitle1}}
+      <br />
+      {{audit.header.degreeProgramTitle2}}
+    </h1>
     <div class="audit-metadata">
       <div>
         <p>{{audit.header.preparedLabel}}: {{audit.header.preparedDate}}</p>
@@ -21,15 +28,6 @@
         </p>
       </div>
     </div>
-
-    <h1 class="text-align-center">
-      {{audit.header.clientDefinedMessage}}
-      <br />
-      {{audit.header.degreeProgramTitle1}}
-      <br />
-      {{audit.header.degreeProgramTitle2}}
-    </h1>
-
   </header>
 
   <section class="audit-section" class="audit-top-section">

src/app/dars/metadata-table/metadata-table.component.scss

@@ -24,7 +24,7 @@ $black: #000000;
     display: block;
     box-sizing: border-box;
     width: 100%;
-    color: #7d7a7a;
+    color: #494949;
     text-align-last: left;
 
     > div {

src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.html

@@ -133,7 +133,7 @@
                 <small>{{ course.title }}</small>
               </label>
               <mat-form-field>
-                <mat-label>{{ course.creditMin }}-{{ course.creditMax }} cr</mat-label>
+                <mat-label>{{ course.creditMin }}-{{ course.creditMax }} credits</mat-label>
                 <mat-select
                   formControlName="creditsDropdown"
                   attr.aria-label="{{ credit }} credits"
@@ -142,7 +142,7 @@
                     attr.aria-label="{{ credit }} credits"
                     *ngFor="let credit of course.range"
                     [value]="credit">
-                    {{ credit }} cr
+                    {{ credit }} credits
                   </mat-option>
                 </mat-select>
               </mat-form-field>

src/app/dars/new-degree-audit-dialog/new-degree-audit-dialog.component.scss

@@ -43,7 +43,7 @@
   }
 
   mat-form-field {
-    width: 72px;
+    width: 90px;
     display: block;
     flex-grow: 0;
     text-align: right;

src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.html

@@ -155,13 +155,13 @@
                   <small>{{ course.title }}</small>
                 </label>
                 <mat-form-field>
-                  <mat-label>{{ course.creditMin }}-{{ course.creditMax }} cr</mat-label>
+                  <mat-label>{{ course.creditMin }}-{{ course.creditMax }} credits</mat-label>
                   <mat-select formControlName="creditsDropdown" aria-labelledby="credits-range-{{ course.id }}">
                     <mat-option
                       attr.aria-label="{{ credit }} credits"
                       *ngFor="let credit of course.range"
                       [value]="credit">
-                      {{ credit }} cr
+                      {{ credit }} credits
                     </mat-option>
                   </mat-select>
                 </mat-form-field>

src/app/dars/new-what-if-audit-dialog/new-what-if-audit-dialog.component.scss

@@ -44,7 +44,7 @@
   }
 
   mat-form-field {
-    width: 72px;
+    width: 90px;
     display: block;
     flex-grow: 0;
     text-align: right;

src/assets/sass/general.scss

@@ -150,6 +150,7 @@ main {
 .mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float
   .mat-form-field-label {
   font-size: 16px;
+  color: #494949;
 }
 
 .mat-warn .mat-input-element,
@@ -311,6 +312,10 @@ main {
 
 // Form fields styles
 
+.mat-paginator-range-actions {
+  color: #494949;
+}
+
 .includeCoursesFrom {
   .mat-radio-label {
     white-space: normal !important;