@internetarchive/collection-browser 0.4.18-alpha.6 → 0.4.18

package/src/sort-filter-bar/alpha-bar.ts

@@ -11,8 +11,6 @@ export class AlphaBar extends LitElement {
 
   @property({ type: Object }) letterCounts?: PrefixFilterCounts;
 
-  @property({ type: String }) ariaLandmarkLabel?: string;
-
   @state()
   private tooltipShown: boolean = false;
 
@@ -30,7 +28,7 @@ export class AlphaBar extends LitElement {
 
   render() {
     return html`
-      <section id="container" aria-label=${this.ariaLandmarkLabel ?? nothing}>
+      <div id="container">
         <ul>
           ${this.alphabet.map(
             letter =>
@@ -42,28 +40,29 @@ export class AlphaBar extends LitElement {
                   @mousemove=${this.handleMouseMove}
                   @mouseleave=${this.handleMouseLeave}
                 >
-                  ${this.letterButtonTemplate(letter)}
+                  ${this.letterCounts?.[letter]
+                    ? this.letterLinkTemplate(letter)
+                    : html`<span>${letter}</span>`}
                   ${this.tooltipTemplate(letter)}
                 </li>
               `
           )}
         </ul>
-      </section>
+      </div>
     `;
   }
 
-  private letterButtonTemplate(letter: string) {
-    const ariaLabel = `${letter}: ${this.letterCounts?.[letter] ?? 0} results`;
+  private letterLinkTemplate(letter: string) {
     return html`
-      <button
-        aria-label=${ariaLabel}
-        ?disabled=${!this.letterCounts?.[letter]}
-        @click=${() => {
+      <a
+        href="#"
+        @click=${(e: Event) => {
+          e.preventDefault();
           this.letterClicked(letter);
         }}
       >
         ${letter}
-      </button>
+      </a>
     `;
   }
 
@@ -190,31 +189,25 @@ export class AlphaBar extends LitElement {
       border-radius: 4px;
     }
 
-    li:hover:not(.selected) button:not(:disabled) {
+    li:hover:not(.selected) a {
       background-color: #c0c0c0;
     }
 
-    button {
+    a,
+    span {
       display: flex;
       justify-content: center;
       align-items: center;
       aspect-ratio: 1 / 1;
     }
 
-    button {
-      width: 100%;
-      height: 100%;
+    a {
       color: #333;
-      appearance: none;
-      background: none;
-      border: none;
+      text-decoration: none;
       border-radius: 4px;
-      font-family: inherit;
-      font-size: inherit;
-      cursor: pointer;
     }
 
-    button:disabled {
+    span {
       color: #aaa;
       cursor: default;
     }
@@ -223,7 +216,7 @@ export class AlphaBar extends LitElement {
       background-color: #2c2c2c;
     }
 
-    .selected button {
+    .selected a {
       color: white;
     }
 
@@ -232,7 +225,6 @@ export class AlphaBar extends LitElement {
       top: 100%;
       left: -9999px;
       margin-top: 3px;
-      z-index: 1;
 
       opacity: 0;
       transition: opacity 0.2s ease;

package/src/sort-filter-bar/sort-filter-bar.ts

@@ -30,7 +30,6 @@ import { sortDisabledIcon } from './img/sort-toggle-disabled';
 import { tileIcon } from './img/tile';
 import { listIcon } from './img/list';
 import { compactIcon } from './img/compact';
-import { srOnlyStyle } from '../styles/sr-only';
 
 type AlphaSelector = 'creator' | 'title';
 
@@ -118,7 +117,7 @@ export class SortFilterBar
   render() {
     return html`
       <div id="container">
-        <section id="sort-bar" aria-label="Sorting options">
+        <div id="sort-bar">
           <div class="sort-direction-container">
             ${this.sortDirectionSelectorTemplate}
           </div>
@@ -130,7 +129,7 @@ export class SortFilterBar
           </div>
 
           <div id="display-style-selector">${this.displayOptionTemplate}</div>
-        </section>
+        </div>
 
         ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}
         ${this.alphaBarTemplate}
@@ -258,17 +257,12 @@ export class SortFilterBar
 
   /** Template to render the sort direction toggle button */
   private get sortDirectionSelectorTemplate(): TemplateResult {
-    const oppositeSortDirectionReadable =
-      this.sortDirection === 'asc' ? 'descending' : 'ascending';
-    const srLabel = `Change to ${oppositeSortDirectionReadable} sort`;
-
     return html`
       <button
         class="sort-direction-selector"
         ?disabled=${this.selectedSort === 'relevance'}
         @click=${this.toggleSortDirection}
       >
-        <span class="sr-only">${srLabel}</span>
         ${this.sortDirectionIcon}
       </button>
     `;
@@ -735,7 +729,6 @@ export class SortFilterBar
     return html` <alpha-bar
       .selectedLetter=${this.selectedTitleFilter}
       .letterCounts=${this.prefixFilterCountMap?.title}
-      ariaLandmarkLabel="Filter by title letter"
       @letterChanged=${this.titleLetterChanged}
     ></alpha-bar>`;
   }
@@ -744,7 +737,6 @@ export class SortFilterBar
     return html` <alpha-bar
       .selectedLetter=${this.selectedCreatorFilter}
       .letterCounts=${this.prefixFilterCountMap?.creator}
-      ariaLandmarkLabel="Filter by creator letter"
       @letterChanged=${this.creatorLetterChanged}
     ></alpha-bar>`;
   }
@@ -805,220 +797,214 @@ export class SortFilterBar
     this.dispatchEvent(event);
   }
 
-  static get styles() {
-    return [
-      srOnlyStyle,
-      css`
-        #container {
-          position: relative;
-        }
+  static styles = css`
+    #container {
+      position: relative;
+    }
 
-        #sort-bar {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          border-bottom: 1px solid #2c2c2c;
-          font-size: 1.4rem;
-        }
+    #sort-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #2c2c2c;
+      font-size: 1.4rem;
+    }
 
-        ul {
-          list-style: none;
-          display: flex;
-          align-items: center;
-          margin: 0;
-          padding: 0;
-        }
+    ul {
+      list-style: none;
+      display: flex;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+    }
 
-        li {
-          padding: 0;
-        }
+    li {
+      padding: 0;
+    }
 
-        .sort-by-text {
-          margin-right: 5px;
-          font-weight: bold;
-          white-space: nowrap;
-        }
+    .sort-by-text {
+      margin-right: 5px;
+      font-weight: bold;
+      white-space: nowrap;
+    }
 
-        .sort-direction-container {
-          display: flex;
-          align-self: stretch;
-          flex: 0;
-          margin: 0 5px;
-        }
+    .sort-direction-container {
+      display: flex;
+      align-self: stretch;
+      flex: 0;
+      margin: 0 5px;
+    }
 
-        .sort-direction-selector {
-          padding: 0;
-          border: none;
-          appearance: none;
-          background: transparent;
-          cursor: pointer;
-        }
+    .sort-direction-selector {
+      padding: 0;
+      border: none;
+      appearance: none;
+      background: transparent;
+      cursor: pointer;
+    }
 
-        .sort-direction-selector:disabled {
-          cursor: default;
-        }
+    .sort-direction-selector:disabled {
+      cursor: default;
+    }
 
-        .sort-direction-icon {
-          display: flex;
-          align-items: center;
-          background: none;
-          color: inherit;
-          border: none;
-          padding: 0;
-          outline: inherit;
-          width: 14px;
-          height: 14px;
-        }
+    .sort-direction-icon {
+      display: flex;
+      align-items: center;
+      background: none;
+      color: inherit;
+      border: none;
+      padding: 0;
+      outline: inherit;
+      width: 14px;
+      height: 14px;
+    }
 
-        .sort-direction-icon > svg {
-          flex: 1;
-        }
+    .sort-direction-icon > svg {
+      flex: 1;
+    }
 
-        #date-sort-selector,
-        #view-sort-selector {
-          position: absolute;
-          left: 150px;
-          top: 45px;
-
-          z-index: 1;
-          padding: 1rem;
-          background-color: white;
-          border-radius: 2.5rem;
-          border: 1px solid #404142;
-        }
+    #date-sort-selector,
+    #view-sort-selector {
+      position: absolute;
+      left: 150px;
+      top: 45px;
+
+      z-index: 1;
+      padding: 1rem;
+      background-color: white;
+      border-radius: 2.5rem;
+      border: 1px solid #404142;
+    }
 
-        #sort-selector-container {
-          flex: 1;
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-        }
+    #sort-selector-container {
+      flex: 1;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
 
-        #desktop-sort-container,
-        #mobile-sort-container {
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-        }
+    #desktop-sort-container,
+    #mobile-sort-container {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
 
-        /*
-          we move the desktop sort selector offscreen instead of display: none
-          because we need to observe the width of it vs its container to determine
-          if it's wide enough to display the desktop version and if you display: none,
-          the width becomes 0
-        */
-        #desktop-sort-container.hidden {
-          position: absolute;
-          top: -9999px;
-          left: -9999px;
-          visibility: hidden;
-        }
+    /*
+      we move the desktop sort selector offscreen instead of display: none
+      because we need to observe the width of it vs its container to determine
+      if it's wide enough to display the desktop version and if you display: none,
+      the width becomes 0
+    */
+    #desktop-sort-container.hidden {
+      position: absolute;
+      top: -9999px;
+      left: -9999px;
+      visibility: hidden;
+    }
 
-        #mobile-sort-container.hidden {
-          display: none;
-        }
+    #mobile-sort-container.hidden {
+      display: none;
+    }
 
-        #sort-selector-backdrop {
-          position: fixed;
-          top: 0;
-          left: 0;
-          width: 100vw;
-          height: 100vh;
-          z-index: 1;
-          background-color: transparent;
-        }
+    #sort-selector-backdrop {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      z-index: 1;
+      background-color: transparent;
+    }
 
-        #desktop-sort-selector {
-          display: inline-flex;
-        }
+    #desktop-sort-selector {
+      display: inline-flex;
+    }
 
-        #desktop-sort-selector li {
-          display: flex;
-          align-items: center;
-          padding-left: 5px;
-          padding-right: 5px;
-        }
+    #desktop-sort-selector li {
+      display: flex;
+      align-items: center;
+      padding-left: 5px;
+      padding-right: 5px;
+    }
 
-        #desktop-sort-selector li a {
-          padding: 0 5px;
-          text-decoration: none;
-          color: #333;
-          line-height: 2;
-        }
+    #desktop-sort-selector li a {
+      padding: 0 5px;
+      text-decoration: none;
+      color: #333;
+      line-height: 2;
+    }
 
-        #desktop-sort-selector li button {
-          padding: 0px 5px;
-          border: none;
-          background: none;
-          font-family: inherit;
-          font-size: inherit;
-          color: #333;
-          line-height: 2;
-          cursor: pointer;
-          appearance: none;
-        }
+    #desktop-sort-selector li button {
+      padding: 0px 5px;
+      border: none;
+      background: none;
+      font-size: inherit;
+      color: #333;
+      line-height: 2;
+      cursor: pointer;
+      appearance: none;
+    }
 
-        #desktop-sort-selector li button.selected {
-          font-weight: bold;
-        }
+    #desktop-sort-selector li button.selected {
+      font-weight: bold;
+    }
 
-        #display-style-selector {
-          flex: 0;
-        }
+    #display-style-selector {
+      flex: 0;
+    }
 
-        #display-style-selector button {
-          background: none;
-          color: inherit;
-          border: none;
-          appearance: none;
-          cursor: pointer;
-          -webkit-appearance: none;
-          fill: #bbbbbb;
-        }
+    #display-style-selector button {
+      background: none;
+      color: inherit;
+      border: none;
+      appearance: none;
+      cursor: pointer;
+      -webkit-appearance: none;
+      fill: #bbbbbb;
+    }
 
-        #display-style-selector button.active {
-          fill: var(--ia-theme-primary-text-color, #2c2c2c);
-        }
+    #display-style-selector button.active {
+      fill: var(--ia-theme-primary-text-color, #2c2c2c);
+    }
 
-        #display-style-selector button svg {
-          width: 24px;
-          height: 24px;
-        }
+    #display-style-selector button svg {
+      width: 24px;
+      height: 24px;
+    }
 
-        ia-dropdown {
-          --dropdownTextColor: white;
-          --dropdownOffsetTop: 0;
-          --dropdownBorderTopWidth: 0;
-          --dropdownBorderTopLeftRadius: 0;
-          --dropdownBorderTopRightRadius: 0;
-          --dropdownWhiteSpace: nowrap;
-          --dropdownListZIndex: 2;
-          --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);
-          --dropdownSelectedTextColor: white;
-          --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);
-          --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);
-          --caretHeight: 9px;
-          --caretWidth: 12px;
-          --caretPadding: 0 5px 0 0;
-        }
-        ia-dropdown.selected .dropdown-label {
-          font-weight: bold;
-        }
-        ia-dropdown.open {
-          z-index: 2;
-        }
+    ia-dropdown {
+      --dropdownTextColor: white;
+      --dropdownOffsetTop: 0;
+      --dropdownBorderTopWidth: 0;
+      --dropdownBorderTopLeftRadius: 0;
+      --dropdownBorderTopRightRadius: 0;
+      --dropdownWhiteSpace: nowrap;
+      --dropdownListZIndex: 2;
+      --dropdownCaretColor: var(--ia-theme-primary-text-color, #2c2c2c);
+      --dropdownSelectedTextColor: white;
+      --dropdownSelectedBgColor: rgba(255, 255, 255, 0.3);
+      --dropdownHoverBgColor: rgba(255, 255, 255, 0.3);
+      --caretHeight: 9px;
+      --caretWidth: 12px;
+      --caretPadding: 0 5px 0 0;
+    }
+    ia-dropdown.selected .dropdown-label {
+      font-weight: bold;
+    }
+    ia-dropdown.open {
+      z-index: 2;
+    }
 
-        .dropdown-label {
-          display: inline-block;
-          height: 100%;
-          padding-left: 5px;
-          font-size: 1.4rem;
-          line-height: 2;
-          color: var(--ia-theme-primary-text-color, #2c2c2c);
-          white-space: nowrap;
-          user-select: none;
-        }
-      `,
-    ];
-  }
+    .dropdown-label {
+      display: inline-block;
+      height: 100%;
+      padding-left: 5px;
+      font-size: 1.4rem;
+      line-height: 2;
+      color: var(--ia-theme-primary-text-color, #2c2c2c);
+      white-space: nowrap;
+      user-select: none;
+    }
+  `;
 }

package/src/tiles/grid/account-tile.ts

@@ -42,7 +42,7 @@ export class AccountTile extends LitElement {
 
   private get getTitleTemplate() {
     return html`<div id="title">
-      <h4 class="truncated">${this.model?.identifier}</h4>
+      <h1 class="truncated">${this.model?.identifier}</h1>
     </div>`;
   }
 

package/src/tiles/grid/collection-tile.ts

@@ -49,7 +49,7 @@ export class CollectionTile extends LitElement {
 
   private get getTitleTemplate() {
     return html`<div id="title">
-      <h4 class="truncated">${this.model?.title}</h4>
+      <h1 class="truncated">${this.model?.title}</h1>
     </div>`;
   }
 
@@ -117,7 +117,7 @@ export class CollectionTile extends LitElement {
           flex-grow: initial;
         }
 
-        h4.truncated {
+        h1.truncated {
           color: ${whiteColor};
         }
 

package/src/tiles/grid/item-tile.ts

@@ -49,9 +49,9 @@ export class ItemTile extends LitElement {
             ${this.imageBlockTemplate}
 
             <div id="title">
-              <h4 class="truncated" title=${ifDefined(itemTitle)}>
+              <h1 class="truncated" title=${ifDefined(itemTitle)}>
                 ${itemTitle}
-              </h4>
+              </h1>
             </div>
 
             ${this.volumeIssueTemplate}

package/src/tiles/grid/styles/tile-grid-shared-styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import { srOnlyStyle } from '../../../styles/sr-only';
 
 /**
  * Base tile styles
@@ -9,9 +8,6 @@ const tileBackgroundColor = css`var(--tileBackgroundColor, #ffffff)`;
 const tileCornerRadius = css`var(--tileCornerRadius, 4px)`;
 
 export const baseTileStyles = css`
-  /* Include .sr-only styles for all tiles */
-  ${srOnlyStyle}
-
   .container {
     background-color: ${tileBackgroundColor};
     border: 1px #2c2c2c;
@@ -72,7 +68,7 @@ export const baseTileStyles = css`
     -webkit-box-orient: vertical;
   }
 
-  h4.truncated {
+  h1.truncated {
     display: -webkit-box;
     margin: 0px;
     line-height: 15px;
@@ -126,4 +122,18 @@ export const baseTileStyles = css`
   .hidden {
     display: none;
   }
+
+  .sr-only {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    margin: -1px !important;
+    padding: 0 !important;
+    border: 0 !important;
+    overflow: hidden !important;
+    white-space: nowrap !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+  }
 `;