@internetarchive/ia-topnav 1.3.3 → 1.3.5-alpha1

package/package.json

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

package/src/assets/img/hamburger.js

@@ -0,0 +1,38 @@
+import { html, css } from 'https://offshoot.prod.archive.org/lit.js';
+import Icon from './icon.js';
+import icons from './icons.js';
+
+class HamBurger extends Icon {
+  static get styles() {
+    return css`
+      svg {
+        display: block;
+        height: 4rem;
+        width: 4rem;
+      }
+      .fill-color {
+        fill: var(--activeColor);
+      }
+    `;
+  }
+
+  static get closed() {
+    return html`
+      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" aria-labelledby="hamburgerTitleID hamburgerDescID">
+        <title id="hamburgerTitleID">Hamburger icon</title>
+        <desc id="hamburgerDescID">An icon used to represent a menu that can be toggled by interacting with this icon.</desc>
+        <path d="m30.5 26.5c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5z" fill="#999" fill-rule="evenodd"/>
+      </svg>
+    `;
+  }
+
+  static get opened() {
+    return icons.close;
+  }
+
+  render() {
+    return this.active ? HamBurger.opened : HamBurger.closed;
+  }
+}
+
+customElements.define('icon-hamburger', HamBurger);

package/src/assets/img/icon-close.js

@@ -2,8 +2,8 @@ import { html } from 'https://offshoot.prod.archive.org/lit.js';
 
 export default html`
   <svg
-    width="40px"
-    height="40px"
+    width="40"
+    height="40"
     viewBox="0 0 40 40"
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"

package/src/assets/img/icons.js

@@ -1,6 +1,5 @@
 import audio from './icon-audio.js';
 import close from './icon-close.js';
-import hamburger from './icon-hamburger.js';
 import donate from './icon-donate.js';
 import donateUnpadded from './icon-donate-unpadded.js';
 import ellipses from './icon-ellipses.js';
@@ -18,7 +17,6 @@ import web from './icon-web.js';
 export default {
   audio,
   close,
-  hamburger,
   donate,
   donateUnpadded,
   ellipses,

package/src/nav-search.js

@@ -34,13 +34,6 @@ class NavSearch extends TrackedElement {
     this.initSearchBetaOptIn();
   }
 
-  updated() {
-    if (this.open) {
-      this.shadowRoot.querySelector('[name=query]').focus();
-    }
-    return true;
-  }
-
   initSearchBetaOptIn() {
     this.inSearchBeta = !!window.localStorage?.getItem('SearchBeta-opt-in') ||
       !!window.localStorage?.getItem('SearchBeta-launched');
@@ -112,6 +105,7 @@ class NavSearch extends TrackedElement {
           <button
             type="submit"
             class="search"
+            tabindex="-1"
             data-event-click-tracking="${this.config.eventCategory}|NavSearchClose"
           >
             ${icons.search}

package/src/primary-nav.js

@@ -1,6 +1,7 @@
 import { html, nothing } from 'https://offshoot.prod.archive.org/lit.js';
 import TrackedElement from './tracked-element.js';
 import icons from './assets/img/icons.js';
+import './assets/img/hamburger.js';
 import './login-button.js';
 import './nav-search.js';
 import './media-menu.js';
@@ -106,6 +107,7 @@ class PrimaryNav extends TrackedElement {
         .dropdownOpen=${this.signedOutMenuOpen}
         .openMenu=${this.openMenu}
         @signedOutMenuToggled=${this.signedOutMenuToggled}
+        tabindex="-1"
       ></login-button>
     `;
   }
@@ -123,7 +125,7 @@ class PrimaryNav extends TrackedElement {
 
     return html`
       <button
-        class="mobile-search-trigger"
+        class="search-trigger"
         @click="${this.toggleSearchMenu}"
         data-event-click-tracking="${this.config.eventCategory}|NavSearchOpen"
       >
@@ -151,7 +153,15 @@ class PrimaryNav extends TrackedElement {
   }
 
   get uploadButtonTemplate() {
-    return html`<a href="${formatUrl('/create', this.baseHost)}" class="upload">
+    return html`
+      <a href="${formatUrl('/create', this.baseHost)}"
+        class="upload"
+        tabindex="1"
+        @focus=${(e) => {
+          if (e.relatedTarget !== null) {
+            this.toggleSearchMenu(e)
+          }
+        }}>
       ${icons.upload}
       <span>Upload</span>
     </a>`;
@@ -187,6 +197,7 @@ 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}
@@ -213,7 +224,7 @@ class PrimaryNav extends TrackedElement {
           data-event-click-tracking="${this.config.eventCategory}|NavHamburger"
           title="Open main menu"
         >
-          ${this.openMenu === 'media' ? icons.close : icons.hamburger}
+          <icon-hamburger ?active=${this.openMenu === 'media'}></icon-hamburger>
         </button>
       </nav>
     `;

package/src/search-menu.js

@@ -29,6 +29,29 @@ class SearchMenu extends TrackedElement {
     this.selectedSearchType = '';
   }
 
+  firstUpdated() {
+    this.shadowRoot.addEventListener('keyup', (e) => {
+      const searchTypes = this.shadowRoot.querySelectorAll('.search-menu-inner label input[type=radio]');
+      const length = searchTypes.length - 1;
+
+      // early return if searchTypes not found
+      if (!length) return;
+
+      const searchTypeHandler = (index) => {
+        const searchType = searchTypes[index];
+        searchType.checked = true;
+        searchType.dispatchEvent(new Event('change'));
+        searchType.focus();
+      };
+
+      if (e.key === 'Home') {
+        searchTypeHandler(0);
+      } else if (e.key === 'End') {
+        searchTypeHandler(length);
+      }
+    });
+  }
+
   selectSearchType(e) {
     this.selectedSearchType = e.target.value;
   }
@@ -70,7 +93,7 @@ class SearchMenu extends TrackedElement {
       }
       return html`
         <label @click="${this.selectSearchType}">
-          <input form="nav-search" type="radio" name="sin" value="${value}" ?checked=${isDefault} @change=${this.searchInChanged} />
+          <input tabindex="3" form="nav-search" type="radio" name="sin" value="${value}" ?checked=${isDefault} @change=${this.searchInChanged} />
           Search ${label}
         </label>
       `;
@@ -104,6 +127,7 @@ class SearchMenu extends TrackedElement {
             href="${formatUrl('/advancedsearch.php', this.baseHost)}"
             @click=${this.trackClick}
             data-event-click-tracking="${this.config.eventCategory}|NavAdvancedSearch"
+            tabindex="4"
             >Advanced Search</a
           >
         </div>

package/src/styles/primary-nav.js

@@ -109,14 +109,14 @@ export default css`
     user-select: none;
   }
 
-  .mobile-search-trigger {
+  .search-trigger {
     padding: 0;
   }
-  .mobile-search-trigger svg {
+  .search-trigger svg {
     height: 4rem;
     width: 4rem;
   }
-  .mobile-search-trigger .fill-color {
+  .search-trigger .fill-color {
     fill: var(--iconFill);
   }
 
@@ -220,7 +220,7 @@ export default css`
     }
 
     .hamburger,
-    .mobile-search-trigger,
+    .search-trigger,
     .mobile-donate-link {
       display: none;
     }

package/src/styles/search-menu.js

@@ -43,6 +43,9 @@ export default css`
   .advanced-search {
     text-decoration: none;
     color: var(--linkColor);
+    line-height: normal;
+    padding: 0.5rem;
+    margin-top: 5px;
   }
 
   @media (min-width: 890px) {

package/test/ia-topnav.test.js

@@ -198,7 +198,7 @@ describe('<ia-topnav>', () => {
 
   it('toggles search menu when search toggle button clicked', async () => {
     const el = await fixture(container());
-    el.shadowRoot.querySelector('primary-nav').shadowRoot.querySelector('.mobile-search-trigger').click();
+    el.shadowRoot.querySelector('primary-nav').shadowRoot.querySelector('.search-trigger').click();
     await el.updateComplete;
 
     expect(el.openMenu).to.equal('search');

package/test/primary-nav.test.js

@@ -40,7 +40,7 @@ describe('<primary-nav>', () => {
       hideSearch: true,
     }));
 
-    expect(el.shadowRoot.querySelector('.mobile-search-trigger')).to.equal(null);
+    expect(el.shadowRoot.querySelector('.search-trigger')).to.equal(null);
     expect(el.shadowRoot.querySelector('nav-search')).to.equal(null);
   });
 

package/src/assets/img/icon-hamburger.js

@@ -1,18 +0,0 @@
-import { html } from 'https://offshoot.prod.archive.org/lit.js';
-
-export default html`
-  <svg
-    viewBox="0 0 40 40"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-labelledby="hamburgerTitleID"
-  >
-    <title id="hamburgerTitleID">Hamburger icon</title>
-    <path
-      d="m30.5 26.5c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5zm0-8c.8284271 0 1.5.6715729 1.5 1.5s-.6715729 1.5-1.5 1.5h-21c-.82842712 0-1.5-.6715729-1.5-1.5s.67157288-1.5 1.5-1.5z"
-      fill="#999"
-      fill-rule="evenodd"
-    />
-  </svg>
-`;
-
-