Accessible markup additions and hover state for menu

Author: djanelle-mit

app/assets/stylesheets/partials/_source_tabs.scss

@@ -85,6 +85,11 @@
       a {
         background-color: $color-gray-950;
         width: 100%;
+
+        &:hover {
+          border-color: $color-gray-950;
+          background-color: $color-gray-900;
+        }
       }
 
     }

app/javascript/source_tabs.js

@@ -7,10 +7,10 @@ container.classList.add('has-js')
 
 primary.insertAdjacentHTML('beforeend', `
   <li class="-more">
-    <button type="button" aria-haspopup="true" aria-expanded="false">
+    <button type="button" aria-haspopup="true" aria-expanded="false" aria-controls="more-options">
       More <i class="fa-light fa-chevron-down"></i>
     </button>
-    <ul class="-secondary">
+    <ul class="-secondary" id="more-options" aria-label="More options">
       ${primary.innerHTML}
     </ul>
   </li>