refs #21654 [finc] make resolver traffic light accessible

* adjust styling
* reuse de_15 style by moving to finc theme
** no-bullet class (add zero padding)
** resolver links list item styling (marging and padding, more space between items)
* remove stair effect
* add no-bullet class to phtml
* clearer translation

local/languages/en.ini

@@ -1943,7 +1943,7 @@ Address-Contact-Hours = "Address, Contact"
 
 ; resolver link access status
 resolver_link_access_denied = "not available"
-resolver_link_access_limited = "Available in Campus LAN"
+resolver_link_access_limited = "Available in Campus network"
 resolver_link_access_open = "available"
 resolver_link_access_unknown = "Record unknown to resolver"
 ; message to be shown upon empty resolver response

themes/finc/scss/compiled.scss

@@ -231,7 +231,16 @@ h4 {
 // address {}
 
 // Lists
+
 // ul,
+/// no bullets for LIs -- (note: apply style to parent UL in phtml)!
+.no-bullet {
+  padding-left: 0;
+
+  li {
+    list-style-type: none;
+  }
+}
 // ol {}
 // li {}
 // dl {}
@@ -1343,6 +1352,10 @@ table.collapse.in {
 }
 
 //// Redi link-resolver traffic lights
+.resolver .show-availability {
+  display: inline;
+}
+
 .traffic-light {
   display: inline;
   padding: 0;
@@ -2419,6 +2432,21 @@ footer {
   }
 }
 
+/////// Holdings, Access-Tab
+.holdings-tab {
+  // increase 'line height' for links to improve readability
+  &.tab-pane {
+    ul {
+      margin-top: 1em;
+      padding-left: 0;
+    }
+
+    li {
+      margin-bottom: .5em;
+    }
+  }
+}
+
 ////// Hierarchy tree
 #treeSelector {
   border-bottom: $border-default-styles;

themes/finc/templates/ajax/resolverLinks.phtml

@@ -9,15 +9,20 @@
       <?php /*
       <strong><?=$this->transEsc('Electronic')?></strong>
       */ ?>
-      <ul>
+      <ul class="no-bullet">
         <?php foreach ($this->electronic as $link): ?>
           <li>
             <?php if (!empty($link['href'])): ?>
               <?php /* finc-specific change #7986 - CK - traffic light */ ?>
-              <div <?php if(!empty($link['access'])): ?> data-toggle="tooltip" title="<?=$this->transEsc('resolver_link_access_'.$link['access'])?>" class="traffic-light access-<?=$link['access']?>"<?php endif;?>>
-                <span class="first"></span>
-                <span class="second"></span>
-                <span class="last"></span>
+              <div class="show-availability">
+                <span class="sr-only">
+                  <?=$this->translate('Availability')?>: <?=$this->transEsc('resolver_link_access_' . $link['access'])?>
+                </span>
+                <div aria-hidden="true"<?php if(!empty($link['access'])): ?> data-toggle="tooltip" title="<?=$this->transEsc('resolver_link_access_'.$link['access'])?>" class="traffic-light access-<?=$link['access']?>"<?php endif;?>>
+                  <span class="first"></span>
+                  <span class="second"></span>
+                  <span class="last"></span>
+                </div>
               </div>
               <?php /* finc-specific change #7986 - END */ ?>
               <?= $this->externalLink(