@internetarchive/ia-topnav 1.3.5-alpha10 → 1.3.5-alpha12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-topnav",
-  "version": "1.3.5-alpha10",
+  "version": "1.3.5-alpha12",
   "description": "Top nav for Internet Archive",
   "license": "AGPL-3.0-only",
   "main": "index.js",

package/src/ia-topnav.js

@@ -201,7 +201,7 @@ export default class IATopNav extends LitElement {
         tabindex="${this.userMenuTabIndex}"
         @menuToggled=${this.menuToggled}
         @trackClick=${this.trackClick}
-        @moveFocusToOthers=${(e) => this.currentTab = e.detail}
+        @focusToNext=${(e) => this.currentTab = e.detail}
       ></user-menu>
     `;
   }
@@ -293,8 +293,8 @@ export default class IATopNav extends LitElement {
           .selectedMenuOption=${this.selectedMenuOption}
           .mediaSliderOpen=${this.mediaSliderOpen}
           .menus=${this.menus}
-          tabindex="${this.mediaSliderOpen ? '1' : ''}"
-          @moveFocusToOthers=${(e) => this.currentTab = e.detail}
+          tabindex="${this.mediaSliderOpen ? '1' : '-1'}"
+          @focusToNext=${(e) => this.currentTab = e.detail}
         ></media-slider>
       </div>
       ${this.username ? this.userMenu : this.signedOutDropdown}

package/src/lib/keyboard-navigation.js

@@ -30,17 +30,19 @@ export default class KeyboardNavigation {
    * @returns {HTMLElement[]} An array of focusable elements.
    */
   getFocusableElements() {
-    const focusableTagSelectors = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
+    const focusableTagSelectors = 'a[href], button, input, [tabindex]:not([tabindex="-1"])';
     const isDisabledOrHidden = el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden');
 
     let elements;
     if (this.menuOption === 'web') {
+      // wayback focusable elements
       const waybackSlider = this.elementsContainer.querySelector('wayback-slider').shadowRoot;
       const waybackSearch = waybackSlider.querySelector('wayback-search');
       const waybackSearchElements = Array.from(waybackSearch.shadowRoot.querySelectorAll(focusableTagSelectors));
 
       const normalElements = Array.from(waybackSlider.querySelectorAll(focusableTagSelectors));
 
+      // wayback save-form focusable elements
       const savePageForm = waybackSlider.querySelector('save-page-form');
       const savePageFormElements = Array.from(savePageForm.shadowRoot.querySelectorAll(focusableTagSelectors));
 
@@ -101,7 +103,6 @@ export default class KeyboardNavigation {
    * @param {KeyboardEvent} event - The keyboard event object.
    */
   handleTabKey(event) {
-    console.log(this)
     if (this.menuOption) {
       const isShiftPressed = event.shiftKey;
       this.focusNextMenuItem(isShiftPressed);
@@ -117,7 +118,7 @@ export default class KeyboardNavigation {
    */
   focusNextMenuItem(isPrevious = false) {
     this.elementsContainer.dispatchEvent(
-      new CustomEvent('moveFocusToOthers', {
+      new CustomEvent('focusToNext', {
         bubbles: true,
         composed: true,
         detail: {

package/src/primary-nav.js

@@ -83,11 +83,9 @@ class PrimaryNav extends TrackedElement {
 
   updated(props) {
     const { currentTab } = this;
-    console.log(currentTab)
     const isUserMenuTab = currentTab && currentTab.mediatype === 'usermenu';
     if (props.has('currentTab')) {
       if (isUserMenuTab) {
-        console.log('inside-user-menu');
         const focusElement = currentTab.moveTo === 'next'
           ? this.shadowRoot.querySelector('a.upload')
           : this.shadowRoot.querySelector('.user-menu');
@@ -96,7 +94,6 @@ class PrimaryNav extends TrackedElement {
           focusElement.focus();
         }
       } else if (this.currentTab.moveTo === 'next') {
-        console.log('inside-media-menu');
         this.shadowRoot.querySelector('.user-menu').focus();
       }
     }
@@ -224,7 +221,6 @@ class PrimaryNav extends TrackedElement {
             data-event-click-tracking="${this.config.eventCategory}|NavHome"
             title="Go home"
             class="link-home"
-            tabindex="-1"
             >${icons.iaLogo}${logoWordmarkStacked}</a
           >
           ${this.secondLogoSlot}

package/src/styles/primary-nav.js

@@ -2,7 +2,6 @@ import { css } from 'https://offshoot.prod.archive.org/lit.js';
 
 export default css`
   button:focus,
-  a:focus,
   input:focus {
     outline: none;
   }
@@ -157,6 +156,7 @@ export default css`
   .user-menu:hover,
   .user-menu:focus {
     color: var(--linkHoverColor);
+    outline: none;
   }
 
   .user-menu.active {
@@ -174,6 +174,10 @@ export default css`
     text-decoration: none;
     display: inline-flex;
   }
+  a.link-home:focus,
+  a.link-home:focus-visible {
+    outline-offset: 1px;
+  }
 
   @media only screen and (min-width: 890px) and (max-device-width: 905px) {
     .branding.second-logo {
@@ -217,10 +221,6 @@ export default css`
       display: none;
     }
 
-    .branding {
-      margin-top: 1rem;
-    }
-
     .ia-logo,
     .ia-wordmark {
       margin-right: 10px;
@@ -272,6 +272,9 @@ export default css`
     .upload:hover {
       color: var(--linkHoverColor);
     }
+    .upload:focus-visible {
+      outline: none;
+    }
 
     .upload svg {
       vertical-align: middle;