@internetarchive/collection-browser 0.4.19 → 1.0.0

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

@@ -11,6 +11,8 @@ export class AlphaBar extends LitElement {
 
   @property({ type: Object }) letterCounts?: PrefixFilterCounts;
 
+  @property({ type: String }) ariaLandmarkLabel?: string;
+
   @state()
   private tooltipShown: boolean = false;
 
@@ -28,7 +30,7 @@ export class AlphaBar extends LitElement {
 
   render() {
     return html`
-      <div id="container">
+      <section id="container" aria-label=${this.ariaLandmarkLabel ?? nothing}>
         <ul>
           ${this.alphabet.map(
             letter =>
@@ -40,29 +42,28 @@ export class AlphaBar extends LitElement {
                   @mousemove=${this.handleMouseMove}
                   @mouseleave=${this.handleMouseLeave}
                 >
-                  ${this.letterCounts?.[letter]
-                    ? this.letterLinkTemplate(letter)
-                    : html`<span>${letter}</span>`}
+                  ${this.letterButtonTemplate(letter)}
                   ${this.tooltipTemplate(letter)}
                 </li>
               `
           )}
         </ul>
-      </div>
+      </section>
     `;
   }
 
-  private letterLinkTemplate(letter: string) {
+  private letterButtonTemplate(letter: string) {
+    const ariaLabel = `${letter}: ${this.letterCounts?.[letter] ?? 0} results`;
     return html`
-      <a
-        href="#"
-        @click=${(e: Event) => {
-          e.preventDefault();
+      <button
+        aria-label=${ariaLabel}
+        ?disabled=${!this.letterCounts?.[letter]}
+        @click=${() => {
           this.letterClicked(letter);
         }}
       >
         ${letter}
-      </a>
+      </button>
     `;
   }
 
@@ -189,25 +190,31 @@ export class AlphaBar extends LitElement {
       border-radius: 4px;
     }
 
-    li:hover:not(.selected) a {
+    li:hover:not(.selected) button:not(:disabled) {
       background-color: #c0c0c0;
     }
 
-    a,
-    span {
+    button {
       display: flex;
       justify-content: center;
       align-items: center;
       aspect-ratio: 1 / 1;
     }
 
-    a {
+    button {
+      width: 100%;
+      height: 100%;
       color: #333;
-      text-decoration: none;
+      appearance: none;
+      background: none;
+      border: none;
       border-radius: 4px;
+      font-family: inherit;
+      font-size: inherit;
+      cursor: pointer;
     }
 
-    span {
+    button:disabled {
       color: #aaa;
       cursor: default;
     }
@@ -216,7 +223,7 @@ export class AlphaBar extends LitElement {
       background-color: #2c2c2c;
     }
 
-    .selected a {
+    .selected button {
       color: white;
     }
 
@@ -225,6 +232,7 @@ 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,6 +30,7 @@ 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';
 
@@ -117,7 +118,7 @@ export class SortFilterBar
   render() {
     return html`
       <div id="container">
-        <div id="sort-bar">
+        <section id="sort-bar" aria-label="Sorting options">
           <div class="sort-direction-container">
             ${this.sortDirectionSelectorTemplate}
           </div>
@@ -129,7 +130,7 @@ export class SortFilterBar
           </div>
 
           <div id="display-style-selector">${this.displayOptionTemplate}</div>
-        </div>
+        </section>
 
         ${this.dropdownBackdropVisible ? this.dropdownBackdrop : nothing}
         ${this.alphaBarTemplate}
@@ -257,12 +258,17 @@ 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>
     `;
@@ -729,6 +735,7 @@ export class SortFilterBar
     return html` <alpha-bar
       .selectedLetter=${this.selectedTitleFilter}
       .letterCounts=${this.prefixFilterCountMap?.title}
+      ariaLandmarkLabel="Filter by title letter"
       @letterChanged=${this.titleLetterChanged}
     ></alpha-bar>`;
   }
@@ -737,6 +744,7 @@ export class SortFilterBar
     return html` <alpha-bar
       .selectedLetter=${this.selectedCreatorFilter}
       .letterCounts=${this.prefixFilterCountMap?.creator}
+      ariaLandmarkLabel="Filter by creator letter"
       @letterChanged=${this.creatorLetterChanged}
     ></alpha-bar>`;
   }
@@ -797,214 +805,220 @@ export class SortFilterBar
     this.dispatchEvent(event);
   }
 
-  static styles = css`
-    #container {
-      position: relative;
-    }
+  static get styles() {
+    return [
+      srOnlyStyle,
+      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-size: inherit;
-      color: #333;
-      line-height: 2;
-      cursor: pointer;
-      appearance: none;
-    }
+        #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.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/styles/sr-only.ts

@@ -0,0 +1,18 @@
+import { css } from 'lit';
+
+export const srOnlyStyle = css`
+  .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;
+    user-select: none !important;
+  }
+`;

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { css } from 'lit';
+import { srOnlyStyle } from '../../../styles/sr-only';
 
 /**
  * Base tile styles
@@ -8,6 +9,9 @@ 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;
@@ -68,7 +72,7 @@ export const baseTileStyles = css`
     -webkit-box-orient: vertical;
   }
 
-  h1.truncated {
+  h4.truncated {
     display: -webkit-box;
     margin: 0px;
     line-height: 15px;
@@ -122,18 +126,4 @@ 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;
-  }
 `;