refine skip button

scripts/nav.js

@@ -23,7 +23,7 @@ const constructMenuLink = function(title, href) {
 }
 
 const constructSkipLink = function() {
-  const a = constructMenuLink("skip", "#main");
+  const a = constructMenuLink("skip to main", "#main");
   a.id = "skip";
 
   return a;
@@ -107,18 +107,11 @@ dropdownButton.addEventListener("keydown", (event) => {
 });
 
 firstDropdownItem.addEventListener("keydown", (event) => {
-  if (event.key === "Tab" && event.shiftKey) {
-    event.preventDefault();
-    closeDropdown();
-    dropdownButton.focus();
-  }
+  if (event.key === "Tab" && event.shiftKey) closeDropdown();
 });
 
 lastDropdownItem.addEventListener("keydown", (event) => {
-  if (event.key === "Tab" && !event.shiftKey) {
-    event.preventDefault();
-    closeDropdown();
-  }
+  if (event.key === "Tab" && !event.shiftKey) closeDropdown();
 });
 
 document.addEventListener("keydown", (event) => {

styles/nav.css

@@ -58,6 +58,13 @@ nav button:focus-visible {
 	z-index: 999;
 }
 
+@media (any-hover: hover) {
+  #skip:hover {
+    color: var(--color-bg);
+    background-color: var(--color-accent);
+  }
+}
+
 #current-page {
   border-right-width: .5rem;
   border-left-width: .5rem;