Merge pull request #186 from GSA/accessibility-dev

Accessibility - Keyboard Focus, Focus Visibility and Color Contrast

Author: collinschreyer-dev

src/app/admin-header/admin-header.component.html

@@ -1,19 +1,22 @@
 <div class="active-tabs" ng-if="showActivitySelection()">
   <div class="custom-tabs">
     <ul class="custom-tabs__list">
-      <li class="custom-tabs__item" 
-          [ngClass]="{'custom-tabs__item--active': active['masquerade']}"
-          (click)="menuClick.emit('masquerade'); setActiveTab('masquerade')">
+      <li class="custom-tabs__item" [ngClass]="{'custom-tabs__item--active': active['masquerade']}"
+        (click)="menuClick.emit('masquerade'); setActiveTab('masquerade')" tabindex="0"
+        (keydown.enter)="menuClick.emit('masquerade'); setActiveTab('masquerade')"
+        (keydown.space)="menuClick.emit('masquerade'); setActiveTab('masquerade')">
         <a class="custom-tabs__link">MASQUERADE</a>
       </li>
-      <li class="custom-tabs__item" 
-          [ngClass]="{'custom-tabs__item--active': active['reports']}"
-          (click)="menuClick.emit('reports'); setActiveTab('reports')">
+      <li class="custom-tabs__item" [ngClass]="{'custom-tabs__item--active': active['reports']}"
+        (click)="menuClick.emit('reports'); setActiveTab('reports')" tabindex="0"
+        (keydown.enter)="menuClick.emit('reports'); setActiveTab('reports')"
+        (keydown.space)="menuClick.emit('reports'); setActiveTab('reports')">
         <a class="custom-tabs__link">REPORTS</a>
       </li>
-      <li class="custom-tabs__item" 
-          [ngClass]="{'custom-tabs__item--active': active['metric-downloads']}"
-          (click)="menuClick.emit('metric-downloads'); setActiveTab('metric-downloads')">
+      <li class="custom-tabs__item" [ngClass]="{'custom-tabs__item--active': active['metric-downloads']}"
+        (click)="menuClick.emit('metric-downloads'); setActiveTab('metric-downloads')" tabindex="0"
+        (keydown.enter)="menuClick.emit('metric-downloads'); setActiveTab('metric-downloads')"
+        (keydown.space)="menuClick.emit('metric-downloads'); setActiveTab('metric-downloads')">
         <a class="custom-tabs__link">METRIC DOWNLOADS</a>
       </li>
     </ul>

src/app/analytics/analytics.component.scss

@@ -1,5 +1,3 @@
-
-
 .analytic-div {
   background-color: #ebf3f9;
   padding: 30px 0px !important;
@@ -56,7 +54,8 @@
   font-size: 20px;
   color: #687a8b;
   padding: 20px;
-  /* font-weight.*300 */;
+  /* font-weight.*300 */
+  ;
 }
 
 .analytic-bar:hover {
@@ -65,11 +64,13 @@
   border-left: 1px solid #53A9DE;
 }
 
-.analytic-padding-left{
-  float: left; padding: 0px 15px 0px 0px;
+.analytic-padding-left {
+  float: left;
+  padding: 0px 15px 0px 0px;
 
 }
-.analytic-padding{
+
+.analytic-padding {
   padding: 30px 0px 10px 0px;
 }
 
@@ -104,7 +105,7 @@ option {
 }
 
 
-.analytic-select-style{
+.analytic-select-style {
   height: 32px;
   padding: 5px 30px 5px 15px;
   font-size: 16px;
@@ -113,35 +114,41 @@ option {
 }
 
 
-.analytic-select-container{
+.analytic-select-container {
   padding: 0px 40px 40px 40px !important;
   background-color: #fbfcff;
   border-top: 1px solid #dadada;
 }
-.analytic-select-position{
+
+.analytic-select-position {
   display: inline-block;
   vertical-align: middle;
   padding-right: 10px;
   font-size: 24px;
   font-weight: 600
 }
-.analytic-second-select-position{
+
+.analytic-second-select-position {
   display: inline-block;
   vertical-align: middle;
 }
-.analytic-section1-container{
+
+.analytic-section1-container {
   padding: 0px 40px 40px 40px !important;
   background-color: #fbfcff;
 }
-.analytic-section2-container{
+
+.analytic-section2-container {
   padding: 0px 40px 60px 40px !important;
   background-color: #fbfcff;
 }
-.analytic-section3-container{
+
+.analytic-section3-container {
   margin-bottom: 40px !important;
   padding: 40px 40px 10px 40px !important;
   border-top: 1px solid #dadada;
 }
+
 /*
 .scanned-solicitation {
     width: calc(100% - 300px);
@@ -168,16 +175,17 @@ option {
   margin-bottom: 60px !important
 }
 
-.machine-readable, .prediction-result, .exclude  {
+.machine-readable,
+.prediction-result,
+.exclude {
   width: 350px;
   float: right;
   margin-bottom: 40px !important;
 }
 
 
 
-@media (max-width: 992px)
-{
+@media (max-width: 992px) {
   .row-eq-height {
     -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
@@ -195,39 +203,40 @@ option {
 
 /*analytics page*/
 
-.supfont{
+.supfont {
   font-size: 20px;
 }
-.precposi{
+
+.precposi {
   position: relative;
 }
 
-.chart-container{
+.chart-container {
   max-width: 300px;
   padding: 0px
 }
 
-.circle-chart{
+.circle-chart {
   font-size: 20px;
   margin-bottom: 20px;
   font-weight: 600
 }
 
-.percentage{
+.percentage {
   position: absolute;
-  top: 79px; width: 100%;
+  top: 79px;
+  width: 100%;
   text-align: center;
   font-size: 30px;
   color: #2C81C0
-
 }
 
-.chart-span{
+.chart-span {
   font-size: 1.5em;
   font-weight: 700
 }
 
-.per-result{
+.per-result {
   padding: 30px 10px;
   text-align: center;
   font-size: 16px;
@@ -237,17 +246,17 @@ option {
 
 
 /* top-agencies*/
-.padding-right{
+.padding-right {
   padding-right: 40px;
 }
 
-.top-agency-title{
+.top-agency-title {
   font-size: 20px;
   margin-bottom: 70px;
   font-weight: 600
 }
 
-.top-agency-bar-chart{
+.top-agency-bar-chart {
   width: 100%;
   position: relative;
   font-size: 18px;
@@ -256,101 +265,116 @@ option {
   display: table;
   text-align: center
 }
-.top-agency-nodata{
+
+.top-agency-nodata {
   display: table-cell;
   vertical-align: middle
 }
 
-.top-agency-content{
+.top-agency-content {
   width: 100%;
   margin-bottom: 40px;
   padding-left: 40px;
   position: relative
 }
 
-.top-agency-position{
+.top-agency-position {
   position: relative;
   left: 63px;
   top: -25px;
   width: calc(100% - 80px);
 }
-.top-agency-pos-absolute{
+
+.top-agency-pos-absolute {
   position: absolute
 }
 
-.top-agency-posi1{
+.top-agency-posi1 {
   position: absolute;
   right: 28px;
   top: -105px;
 }
-.top-agency-posi1-blue{
+
+.top-agency-posi1-blue {
   width: 15px;
   height: 15px;
   background-color: #2C81C0;
   display: inline-block;
   vertical-align: middle
 }
-.top-agency-posi1-white{
+
+.top-agency-posi1-white {
   width: 15px;
   height: 15px;
   background-color: #eeeeee;
   display: inline-block;
   vertical-align: middle
 }
-.top-agency-posi1-display{
+
+.top-agency-posi1-display {
   display: inline-block;
   vertical-align: middle
 }
 
-.top-agency-posi2{
+.top-agency-posi2 {
   position: absolute;
   right: 0px;
   top: -80px;
 }
-.top-agency-posi3{
+
+.top-agency-posi3 {
   position: absolute;
   top: -55px;
   width: 100%;
   text-align: center;
   font-weight: 600;
   font-size: 16px;
 }
-.top-agency-posi4{
+
+.top-agency-posi4 {
   position: absolute;
   left: 0px;
   transform: rotate(-90deg);
   font-size: 16px;
   font-weight: 600;
   text-align: center
 }
-.top-agency-table{
+
+.top-agency-table {
   width: 100%;
   transform: translateZ(0);
 }
-.top-agency-td1{
-  border-right:1px solid #4a4a4a;
+
+.top-agency-td1 {
+  border-right: 1px solid #4a4a4a;
   padding-right: 20px;
   width: 40px;
   height: 30px;
   font-weight: 500
 }
-.top-agency-td2{
+
+.top-agency-td2 {
   vertical-align: middle
 }
 
-.top-agency-div1{
-  background-color:#2C81C0;
+// Compliant solicitations color scheme for the Top 10 Section 508 Compliant Agencies bar charts 
+// Compliant color 
+.top-agency-div1 {
+  background-color: #00a91c;
   height: 10px;
   float: left
 }
-.top-agency-div2{
-  background-color:#eeeeee;
+
+// Non-Compliant color 
+.top-agency-div2 {
+  background-color: #d54309;
   height: 10px;
   float: left;
   position: relative
 }
-.top-agency-div3{
+
+.top-agency-div3 {
   position: absolute;
   right: -40px;
   top: -5px;
-}
+}