LIB-473 Improve pop-up link accessiblity+update chat status icons to FA6

unb-libraries · Nov 2, 2023 · a7a9333 · a7a9333
1 parent 5082078
commit a7a9333
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/custom/modules/lib_core/css/discovery-search.css b/custom/modules/lib_core/css/discovery-search.css
@@ -74,9 +74,6 @@
 #ask-us .askus-header .askus-icon .fas:before {
   font-size: 2.4rem;
 }
-#ask-us  #lh3-chat a.focus-ring {
-  border-radius: .5rem;
-}
 #ask-us .askus-footer {
   font-size: inherit;
   margin-top: 1.75rem;
@@ -89,9 +86,11 @@
 #ask-us .askus-footer a:focus {
   background: inherit;
   border-color: transparent;
+  border-radius: 0;
   box-shadow: none;
   color: #900;
-  outline: 1px dotted #fff;
+  outline-offset: 3px;
+  outline: 2px dotted #900;
 }
 #ask-us .askus-footer span:not(.sr-only) {
   margin: 0;

diff --git a/custom/modules/unb_libraries_askus/css/askus.css b/custom/modules/unb_libraries_askus/css/askus.css
@@ -24,6 +24,9 @@
     background-color: #f0f0f0;
     text-decoration: none!important;
 }
+#lh3-chat .form-control .fas {
+  margin-top: .58rem;
+}
 .chat-embedded #lh3-online {
     border: 1px solid #aaa;
     box-shadow: none;

diff --git a/custom/modules/unb_libraries_askus/unb_libraries_askus.module b/custom/modules/unb_libraries_askus/unb_libraries_askus.module
@@ -122,26 +122,26 @@ function _unb_libraries_askus_get_widget($type) {
 
           default:
             $html .= '<a class="form-control media" href="' . $askus_src . '">
-                <i class="fa-solid fa-circle fa-xs mr-1 mt-2 text-success"></i>CHAT is open.</a>';
+                <span class="fas fa-circle fa-xs mr-1 text-success"></span>CHAT is open.</a>';
         }
         $html .=
       '</div>
       <div id="lh3-offline" class="form-control media status" style="display:none;">
-        <i class="fa-solid fa-circle fa-xs mr-1 mt-2 text-danger"></i>
+        <span class="fas fa-circle fa-xs mr-1 text-danger"></span>
         <div class="media-body">CHAT is closed.<span class="offline-msg"></span></div>
       </div>
       <div id="lh3-away" class="form-control media status" style="display:none;">
-        <i class="fa-solid fa-circle fa-xs mr-1 mt-2 text-warning"></i>
+        <span class="fas fa-circle fa-xs mr-1 text-warning"></span>
         <div class="media-body">CHAT is away.</div>
       </div>
       <div id="lh3-busy" class="form-control media status"  style="display:none;">
-        <i class="fa-solid fa-circle fa-xs mr-1 mt-2 text-warning"></i>
+        <span class="fas fa-circle fa-xs mr-1 text-warning"></span>
         <div class="ch-nd d-none" data-ch-format-time="h:mma" data-ch-id="hil_help"></div>
         <div class="busy">CHAT is busy.</div>
       </div>
     </div>
     <div class="form-control media status text-dark" id="lh3-noscript">
-      <i class="fa-solid fa-circle-exclamation fa-xs mr-1 mt-2"></i>CHAT requires JavaScript.
+      <span class="fas fa-circle-exclamation fa-xs mr-1"></span>CHAT requires JavaScript.
     </div >';
 
   return $html;