@internetarchive/ia-item-navigator 2.1.3-alpha.1 → 2.2.0

package/src/interfaces/menu-interfaces.ts

@@ -5,25 +5,21 @@ export type MenuId = string;
 export interface MenuShortcutInterface {
   icon: TemplateResult;
   id: MenuId;
+  label: string;
 }
 
 export interface MenuDetailsInterface extends MenuShortcutInterface {
-  label: string;
   menuDetails?: TemplateResult;
   selected?: boolean;
   followable?: boolean;
   href?: string;
+  component?: TemplateResult;
 }
 
-export interface MenuProviderBaseConfigInterface {
+export interface MenuProviderInterface extends MenuDetailsInterface {
   item: MetadataResponse;
   baseHost: string;
   subPrefix: string;
   updated?: any;
-}
-export interface MenuProviderInterface
-  extends MenuProviderBaseConfigInterface,
-    MenuDetailsInterface,
-    MenuShortcutInterface {
-  actionButton: TemplateResult;
+  actionButton?: TemplateResult;
 }

package/src/loader.ts

@@ -1,4 +1,3 @@
-/* eslint-disable class-methods-use-this */
 import { css, html, LitElement, svg, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 

package/src/menu-slider/ia-menu-slider.ts

@@ -1,5 +1,5 @@
-import { LitElement, html, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { LitElement, TemplateResult, html, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
 import menuSliderCSS from './styles/menu-slider';
 import '@internetarchive/icon-collapse-sidebar';
 import './menu-button';
@@ -23,16 +23,21 @@ export class IaMenuSlider extends LitElement {
 
   @property({ type: String }) selectedMenu = '';
 
-  @property({ type: Object }) selectedMenuAction = nothing;
+  @property({ type: Object }) selectedMenuAction:
+    | TemplateResult
+    | typeof nothing = nothing;
 
   @property({ type: Boolean }) animateMenuOpen = false;
 
+  @query('.content.open button.close') contentCloseButton!: HTMLElement;
+
+  @query('.menu-list') menuList!: HTMLUListElement;
+
   updated() {
-    const { actionButton } =
-      this.selectedMenuDetails || ({} as Record<string, any>);
+    const actionButton = this.selectedMenuDetails?.actionButton || nothing;
     const actionButtonHasChanged = actionButton !== this.selectedMenuAction;
     if (actionButtonHasChanged) {
-      this.selectedMenuAction = actionButton || nothing;
+      this.selectedMenuAction = actionButton;
     }
   }
 
@@ -42,9 +47,10 @@ export class IaMenuSlider extends LitElement {
   setSelectedMenu({ detail }: CustomEvent) {
     const { id } = detail;
     this.selectedMenu = this.selectedMenu === id ? '' : id;
-    const { actionButton } =
-      this.selectedMenuDetails || ({} as Record<string, any>);
-    this.selectedMenuAction = actionButton || nothing;
+    this.selectedMenuAction = this.selectedMenuDetails?.actionButton || nothing;
+    this.updateComplete.then(() => {
+      this.contentCloseButton?.focus();
+    });
   }
 
   /**
@@ -61,18 +67,41 @@ export class IaMenuSlider extends LitElement {
     this.dispatchEvent(drawerClosed);
   }
 
-  get selectedMenuDetails() {
-    const selectedMenu = this.menus.find(
-      menu => (menu as any).id === this.selectedMenu,
-    );
-    return selectedMenu;
+  closePanel() {
+    const menuId = this.selectedMenu;
+    this.selectedMenu = '';
+    this.selectedMenuAction = nothing;
+
+    // Return focus to the menu button that was previously selected
+    if (menuId) {
+      this.updateComplete.then(() => {
+        const menuIndex = this.menus.findIndex(menu => menu.id === menuId);
+        if (menuIndex !== -1) {
+          const menuButton = this.menuList.querySelector(
+            `li:nth-child(${menuIndex + 1}) menu-button`,
+          ) as HTMLElement;
+          menuButton?.focus();
+        }
+      });
+    }
   }
 
-  get selectedMenuComponent() {
-    const menuItem = this.selectedMenuDetails;
-    return menuItem && (menuItem as any)?.component
-      ? (menuItem as any).component
-      : html``;
+  /**
+   * Handle keyboard events, specifically ESC key to close menu details
+   */
+  handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      if (this.selectedMenu) {
+        this.closePanel();
+      } else {
+        this.closeMenu();
+      }
+    }
+  }
+
+  get selectedMenuDetails() {
+    return this.menus.find(menu => menu.id === this.selectedMenu);
   }
 
   /* render */
@@ -89,17 +118,17 @@ export class IaMenuSlider extends LitElement {
 
   get menuItems() {
     return this.menus.map(
-      (menu: Record<string, any>) => html`
+      menu => html`
         <li>
           <menu-button
             @menuTypeSelected=${this.setSelectedMenu}
             .icon=${menu.icon}
             .label=${menu.label}
-            .menuDetails=${menu.menuDetails}
+            .menuDetails=${menu.menuDetails || ''}
             .buttonId=${menu.id}
             .selected=${menu.id === this.selectedMenu}
-            .followable=${menu.followable}
-            .href=${menu.href}
+            .followable=${menu.followable || false}
+            .href=${menu.href || ''}
           ></menu-button>
         </li>
       `,
@@ -107,8 +136,7 @@ export class IaMenuSlider extends LitElement {
   }
 
   get renderMenuHeader() {
-    const { label = '', menuDetails = '' } =
-      this.selectedMenuDetails || ({} as Record<string, any>);
+    const { label = '', menuDetails = '' } = this.selectedMenuDetails || {};
     const headerClass = this.selectedMenuAction ? 'with-secondary-action' : '';
     const actionBlock = this.selectedMenuAction
       ? html`<span class="custom-action">${this.selectedMenuAction}</span>`
@@ -119,7 +147,15 @@ export class IaMenuSlider extends LitElement {
           <h3>${label}</h3>
           <span class="extra-details">${menuDetails}</span>
         </div>
-        ${actionBlock} ${this.closeButton}
+        ${actionBlock}
+        <button
+          class="close"
+          aria-label="Close this menu"
+          title="Close this menu"
+          @click=${this.closePanel}
+        >
+          <ia-icon-collapse-sidebar></ia-icon-collapse-sidebar>
+        </button>
       </header>
     `;
   }
@@ -129,6 +165,7 @@ export class IaMenuSlider extends LitElement {
       <button
         class="close"
         aria-label="Close this menu"
+        title="Close this menu"
         @click=${this.closeMenu}
       >
         <ia-icon-collapse-sidebar></ia-icon-collapse-sidebar>
@@ -139,7 +176,7 @@ export class IaMenuSlider extends LitElement {
   /** @inheritdoc */
   render() {
     return html`
-      <div class="main">
+      <div class="main" @keydown=${this.handleKeyDown}>
         <div class="menu ${this.sliderDetailsClass}">
           ${this.closeButton}
           <ul class="menu-list">
@@ -151,7 +188,9 @@ export class IaMenuSlider extends LitElement {
           >
             ${this.renderMenuHeader}
             <section>
-              <div class="selected-menu">${this.selectedMenuComponent}</div>
+              <div class="selected-menu">
+                ${this.selectedMenuDetails?.component || nothing}
+              </div>
             </section>
           </div>
         </div>

package/src/menu-slider/menu-button.ts

@@ -1,4 +1,4 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import menuButtonCSS from './styles/menu-button';
 
@@ -8,13 +8,18 @@ export class MenuButton extends LitElement {
     return menuButtonCSS;
   }
 
-  @property({ type: String }) icon = '';
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  @property({ type: Object }) icon: TemplateResult | string = '';
 
   @property({ type: String }) href = '';
 
   @property({ type: String }) label = '';
 
-  @property({ type: String }) menuDetails = '';
+  @property({ type: Object }) menuDetails: TemplateResult | string = '';
 
   @property({ type: String }) buttonId = '';
 
@@ -49,7 +54,12 @@ export class MenuButton extends LitElement {
 
   get menuItem() {
     return html`
-      <span class="icon ${this.iconClass}"> ${this.icon} </span>
+      <span
+        class="icon ${this.iconClass}"
+        aria-hidden="true"
+        title="${this.label}"
+        >${this.icon}</span
+      >
       <span class="label">${this.label}</span>
       <span class="menu-details">${this.menuDetails}</span>
     `;

package/src/menu-slider/styles/menu-button.ts

@@ -6,6 +6,11 @@ export default css`
     text-decoration: none;
   }
 
+  button.menu-item {
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
   .menu-item {
     display: inline-flex;
     width: 100%;
@@ -18,12 +23,12 @@ export default css`
     align-items: center;
     border: none;
     cursor: pointer;
+    transition: background-color 0.2s;
+    border-radius: 6px;
   }
 
-  button.menu-item {
-    -webkit-appearance: none;
-    appearance: none;
-    border-radius: 0;
+  .menu-item:hover {
+    background-color: rgba(255, 255, 255, 0.1);
   }
 
   .label {
@@ -60,6 +65,11 @@ export default css`
     justify-content: center;
   }
 
+  .menu-item > .icon > * {
+    /* Prevent tooltip containing icon literal description */
+    pointer-events: none;
+  }
+
   .menu-item.selected .icon {
     background-color: var(--activeButtonBg);
     border-radius: 1rem 0 0 1rem;

package/src/menu-slider/styles/menu-slider.ts

@@ -29,10 +29,6 @@ export default css`
     transform: translateX(calc(${sliderWidth} * -1));
   }
 
-  .menu > button.close {
-    right: 0.7rem;
-  }
-
   button {
     cursor: pointer;
   }
@@ -72,11 +68,13 @@ export default css`
     position: absolute;
   }
   button.close {
-    right: 0.5rem;
-  }
-
-  button.close * {
-    float: right;
+    min-width: 38px;
+    min-height: 38px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    right: 0;
+    top: 0;
   }
 
   .content {

package/src/menus/share-panel.ts

@@ -1,5 +1,3 @@
-/* eslint-disable lit-a11y/click-events-have-key-events */
-/* eslint-disable lit-a11y/list */
 import {
   css,
   CSSResult,
@@ -83,7 +81,7 @@ export class IauxSharingOptions extends LitElement {
     this.sharingOptions = [
       {
         name: 'Twitter',
-        icon: html`<ia-icon-twitter></ia-icon-twitter>`,
+        icon: html`<ia-icon-twitter aria-hidden="true"></ia-icon-twitter>`,
         url: `https://twitter.com/intent/tweet?${new URLSearchParams({
           url: shareUrl,
           text: shareBlurb,
@@ -92,14 +90,14 @@ export class IauxSharingOptions extends LitElement {
       },
       {
         name: 'Facebook',
-        icon: html`<ia-icon-facebook></ia-icon-facebook>`,
+        icon: html`<ia-icon-facebook aria-hidden="true"></ia-icon-facebook>`,
         url: `https://www.facebook.com/sharer/sharer.php?${new URLSearchParams({
           u: shareUrl,
         })}`,
       },
       {
         name: 'Tumblr',
-        icon: html`<ia-icon-tumblr></ia-icon-tumblr>`,
+        icon: html`<ia-icon-tumblr aria-hidden="true"></ia-icon-tumblr>`,
         url: `https://www.tumblr.com/widgets/share/tool/preview?${new URLSearchParams(
           {
             posttype: 'link',
@@ -110,7 +108,7 @@ export class IauxSharingOptions extends LitElement {
       },
       {
         name: 'Pinterest',
-        icon: html`<ia-icon-pinterest></ia-icon-pinterest>`,
+        icon: html`<ia-icon-pinterest aria-hidden="true"></ia-icon-pinterest>`,
         url: `http://www.pinterest.com/pin/create/button/?${new URLSearchParams(
           {
             url: shareUrl,
@@ -120,7 +118,7 @@ export class IauxSharingOptions extends LitElement {
       },
       {
         name: 'Email',
-        icon: html`<ia-icon-email></ia-icon-email>`,
+        icon: html`<ia-icon-email aria-hidden="true"></ia-icon-email>`,
         url: `mailto:?${new URLSearchParams({
           subject: shareBlurb,
           body: shareUrl,
@@ -153,7 +151,7 @@ export class IauxSharingOptions extends LitElement {
   render() {
     return html`
       ${this.header}
-      <main>
+      <div>
         ${this.sharingOptions.map(
           option =>
             html` <a class="share-option" href="${option.url}" target="_blank">
@@ -162,7 +160,7 @@ export class IauxSharingOptions extends LitElement {
         )}
         <details>
           <summary class="share-option">
-            <ia-icon-link></ia-icon-link>
+            <ia-icon-link aria-hidden="true"></ia-icon-link>
             Get an embeddable link
           </summary>
           <div class="embed">
@@ -187,7 +185,7 @@ export class IauxSharingOptions extends LitElement {
             </p>
           </div>
         </details>
-      </main>
+      </div>
     `;
   }
 
@@ -222,7 +220,7 @@ export class IauxSharingOptions extends LitElement {
         font-size: 1.4rem;
       }
 
-      main {
+      :host > div {
         padding: 1rem 0;
       }
 
@@ -233,6 +231,12 @@ export class IauxSharingOptions extends LitElement {
         text-decoration: none;
         color: var(--shareLinkColor);
         cursor: pointer;
+        transition: background-color 0.2s;
+        border-radius: 6px;
+      }
+
+      .share-option:hover {
+        background-color: rgba(255, 255, 255, 0.05);
       }
 
       .share-option > * {

package/src/menus/viewable-files.ts

@@ -1,5 +1,3 @@
-/* eslint-disable max-classes-per-file */
-/* eslint-disable lit-a11y/list */
 import { css, html, LitElement, nothing, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';

package/test/ia-stub.ts

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import { Metadata } from '@internetarchive/iaux-item-metadata';
 import {
   File,
@@ -23,7 +22,7 @@ export class ItemStub implements MetadataResponse {
     this.files_count = 0;
     this.item_last_updated = 2020;
     this.item_size = 111;
-    this.metadata = { identifier: 'foo' } as Metadata;
+    this.metadata = new Metadata({ identifier: 'foo' });
     this.server = 'foo-server';
     this.uniq = 2;
     this.workable_servers = ['abc'];

package/test/iaux-item-navigator.test.ts

@@ -1,4 +1,3 @@
-/* eslint-disable camelcase */
 import { html, fixture, expect } from '@open-wc/testing';
 import Sinon from 'sinon';
 
@@ -344,6 +343,7 @@ describe('ItemNavigator', () => {
       const anotherShortcut = {
         id: 'foo',
         icon: html`<i class="foo-shortcut"></i>`,
+        label: 'Foo',
       };
       el.menuContents = [menuProvider];
       el.menuShortcuts = [shortcut, anotherShortcut];

package/test/no-theater-available.test.ts

@@ -11,7 +11,6 @@ describe('IANoTheaterAvailable', () => {
     );
     let eventFired = false;
     el.addEventListener('loadingStateUpdated', () => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       eventFired = true;
     });
     expect(eventFired).to.be.false;

package/web-test-runner.config.mjs

@@ -3,6 +3,9 @@
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   files: 'dist/test/**/*.test.js',
   nodeResolve: true,
+  coverageConfig: {
+    exclude: ['./dist/test/**/*', './node_modules/**/*'],
+  },
 
   /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
   // esbuildTarget: 'auto',