From: nsedrickm <nsedrick101@gmail.com>
Date: Mon, 20 Jun 2022 17:32:27 +0000 (+0100)
Subject: mgr/dashboard: Improve accessibility for navigation components
X-Git-Tag: v18.0.0~71^2~1
X-Git-Url: http://git.apps.os.sepia.ceph.com/?a=commitdiff_plain;h=d84c82787985ef919030603fdd1ec61c114dbdbc;p=ceph-ci.git

mgr/dashboard: Improve accessibility for navigation components

* Fix all dropdown accessibility issues by setting their roles as buttons
* Increase navlink font-size to 16px
* Add new primary color variable $primary-wcag-aa-large-text: #25828e  to meet WCAG level AA color contrast ratio for active navlink backgrounds

Fixes: https://tracker.ceph.com/issues/56021
Signed-off-by: nsedrickm <nsedrick101@gmail.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
index fa4b38d167a..eda1e83be54 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/administration/administration.component.html
@@ -4,7 +4,8 @@
   <a ngbDropdownToggle
      class="dropdown-toggle"
      i18n-title
-     title="Dashboard Settings">
+     title="Dashboard Settings"
+     role="button">
     <i [ngClass]="[icons.deepCheck]"></i>
     <span i18n
           class="d-md-none">Dashboard Settings</span>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
index ed5ad8f1535..9739c738558 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/dashboard-help/dashboard-help.component.html
@@ -2,7 +2,8 @@
      placement="bottom-right">
   <a ngbDropdownToggle
      i18n-title
-     title="Help">
+     title="Help"
+     role="button">
     <i [ngClass]="[icons.questionCircle]"></i>
     <span i18n
           class="d-md-none">Help</span>
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html
index bf0f22fbb4a..61e0e0527fe 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/identity/identity.component.html
@@ -2,7 +2,8 @@
      placement="bottom-right">
   <a ngbDropdownToggle
      i18n-title
-     title="Logged in user">
+     title="Logged in user"
+     role="button">
     <i [ngClass]="[icons.user]"></i>
     <span i18n
           class="d-md-none">Logged in user</span>
@@ -11,7 +12,7 @@
     <button ngbDropdownItem
             disabled
             i18n>Signed in as <strong>{{ username }}</strong></button>
-    <li class="dropdown-divider"></li>
+    <hr class="dropdown-divider" />
     <button ngbDropdownItem
             *ngIf="!sso"
             routerLink="/user-profile/edit">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
index f58ca7dfd7c..1812853e89e 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
@@ -96,10 +96,12 @@
         <a (click)="toggleSubMenu('cluster')"
            class="nav-link dropdown-toggle"
            [attr.aria-expanded]="displayedSubMenu == 'cluster'"
-           aria-controls="collapseBasic">
+           aria-controls="cluster-nav"
+           role="button">
           <ng-container i18n>Cluster</ng-container>
         </a>
         <ul class="list-unstyled"
+            id="cluster-nav"
             [ngbCollapse]="displayedSubMenu !== 'cluster'">
           <li routerLinkActive="active"
               class="tc_submenuitem tc_submenuitem_hosts"
@@ -192,12 +194,14 @@
         <a class="nav-link dropdown-toggle"
            (click)="toggleSubMenu('block')"
            [attr.aria-expanded]="displayedSubMenu == 'block'"
-           aria-controls="collapseBasic"
+           aria-controls="block-nav"
+           role="button"
            [ngStyle]="blockHealthColor()">
           <ng-container i18n>Block</ng-container>
         </a>
 
         <ul class="list-unstyled"
+            id="block-nav"
             [ngbCollapse]="displayedSubMenu !== 'block'">
           <li routerLinkActive="active"
               class="tc_submenuitem tc_submenuitem_block_images"
@@ -252,10 +256,12 @@
         <a class="nav-link dropdown-toggle"
            (click)="toggleSubMenu('rgw')"
            [attr.aria-expanded]="displayedSubMenu == 'rgw'"
-           aria-controls="collapseBasic">
+           aria-controls="gateway-nav"
+           role="button">
           <ng-container i18n>Object Gateway</ng-container>
         </a>
         <ul class="list-unstyled"
+            id="gateway-nav"
             [ngbCollapse]="displayedSubMenu !== 'rgw'">
           <li routerLinkActive="active"
               class="tc_submenuitem tc_submenuitem_rgw_daemons">
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
index f0ce4cd92de..693a5613b96 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.scss
@@ -18,7 +18,7 @@
 ::ng-deep cd-navigation .cd-navbar-top {
   .cd-navbar-brand {
     background: vv.$secondary;
-    border-top: 4px solid vv.$primary;
+    border-top: 4px solid vv.$primary-wcag-aa-large-text;
 
     .navbar-brand,
     .navbar-brand:hover {
@@ -49,7 +49,7 @@
     }
 
     .cd-navbar-utility > .active > a {
-      background-color: vv.$primary;
+      background-color: vv.$primary-wcag-aa-large-text;
       color: vv.$gray-200;
     }
 
@@ -83,7 +83,7 @@
   .navbar-nav > li > .cd-navbar > a:hover,
   .navbar-nav > li > a:hover,
   .navbar-nav > li:hover {
-    background-color: vv.$primary;
+    background-color: vv.$primary-wcag-aa-large-text;
   }
 
   .navbar-nav > .open > .cd-navbar > [ngbDropdown] > a,
@@ -119,7 +119,7 @@
       }
 
       .open .dropdown-menu {
-        background-color: vv.$primary;
+        background-color: vv.$primary-wcag-aa-large-text;
         border: 0;
         padding-bottom: 0;
         padding-top: 0;
@@ -131,12 +131,12 @@
       }
 
       .open .dropdown-menu > .active > a {
-        background-color: vv.$primary;
+        background-color: vv.$primary-wcag-aa-large-text;
       }
     }
 
     .navbar-nav > li > a:hover {
-      background-color: vv.$primary;
+      background-color: vv.$primary-wcag-aa-large-text;
     }
   }
 }
@@ -150,9 +150,9 @@ $sidebar-width: 200px;
 .cd-navbar-primary .active > a,
 .cd-navbar-primary > .active > a:focus,
 .cd-navbar-primary > .active > a:hover {
-  background-color: vv.$primary !important;
+  background-color: vv.$primary-wcag-aa-large-text !important;
   border: 0 !important;
-  color: vv.$gray-200 !important;
+  color: vv.$white !important;
 }
 
 .wrapper {
@@ -190,14 +190,14 @@ $sidebar-width: 200px;
       li a {
         color: vv.$white;
         display: block;
-        font-size: 1.1em;
+        font-size: 1.3em;
         padding: 10px;
         padding-left: 27px;
 
         text-decoration: none;
 
         &:hover {
-          background: vv.$primary;
+          background: vv.$primary-wcag-aa-large-text;
           color: vv.$white;
         }
 
@@ -233,7 +233,7 @@ $sidebar-width: 200px;
 
   ul ul a {
     background: lighten(vv.$secondary, 10);
-    font-size: 0.9em !important;
+    font-size: 1.1em !important;
     padding-left: 40px !important;
   }
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
index bba23747b01..c3647ca5a26 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
@@ -114,6 +114,7 @@
     <button class="close float-right"
             tabindex="-1"
             type="button"
+            title="close"
             (click)="closeSidebar()">
       <span>
         <i [ngClass]="icons.close"></i>
diff --git a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
index a4cd2abf24c..9cb81de0e19 100644
--- a/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles/defaults/_bootstrap-defaults.scss
@@ -25,6 +25,7 @@ $cyan: #17a2b8 !default;
 $barley-white: #fcecba !default;
 
 $primary: #2b99a8 !default;
+$primary-wcag-aa-large-text: #25828e !default;
 $secondary: #374249 !default;
 $success: $green !default;
 $info: $primary !default;