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

package/src/collection-facets/facets-template.ts

@@ -164,7 +164,6 @@ export class FacetsTemplate extends LitElement {
             const hideText = `Hide ${titleText}`;
             const unhideText = `Unhide ${titleText}`;
             const showHideText = facetHidden ? unhideText : hideText;
-            const ariaLabel = `${titleText}, ${bucket.count} results`;
             return html`
               <div class="facet-row">
                 <div class="facet-checkbox">
@@ -204,7 +203,6 @@ export class FacetsTemplate extends LitElement {
                   for=${showOnlyCheckboxId}
                   class="facet-info-display"
                   title=${onlyShowText}
-                  aria-label=${ariaLabel}
                 >
                   <div class="facet-title">${bucketTextDisplay}</div>
                   <div class="facet-count">

package/src/collection-facets/more-facets-content.ts

@@ -40,7 +40,6 @@ import {
   analyticsCategories,
 } from '../utils/analytics-events';
 import './toggle-switch';
-import { srOnlyStyle } from '../styles/sr-only';
 
 @customElement('more-facets-content')
 export class MoreFacetsContent extends LitElement {
@@ -457,73 +456,81 @@ export class MoreFacetsContent extends LitElement {
   static get styles(): CSSResultGroup {
     const modalSubmitButton = css`var(--primaryButtonBGColor, #194880)`;
 
-    return [
-      srOnlyStyle,
-      css`
-        @media (max-width: 560px) {
-          section#more-facets {
-            max-height: 450px;
-          }
-          .facets-content {
-            overflow-y: auto;
-            height: 300px;
-          }
-        }
+    return css`
+      @media (max-width: 560px) {
         section#more-facets {
-          overflow: auto;
-          padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */
+          max-height: 450px;
         }
-        .header-content .title {
-          display: block;
-          text-align: left;
-          font-size: 1.8rem;
-          padding: 0 10px;
-          font-weight: bold;
+        .facets-content {
+          overflow-y: auto;
+          height: 300px;
         }
+      }
+      section#more-facets {
+        overflow: auto;
+        padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */
+      }
+      .header-content .title {
+        display: block;
+        text-align: left;
+        font-size: 1.8rem;
+        padding: 0 10px;
+        font-weight: bold;
+      }
 
-        .sort-label {
-          margin-left: 20px;
-          font-size: 1.3rem;
-        }
+      .sort-label {
+        margin-left: 20px;
+        font-size: 1.3rem;
+      }
 
-        .sort-toggle {
-          font-weight: normal;
-        }
+      .sort-toggle {
+        font-weight: normal;
+      }
 
-        .facets-content {
-          font-size: 1.2rem;
-          max-height: 300px;
-          overflow: auto;
-          padding: 10px;
-        }
-        .facets-loader {
-          margin-bottom: 20px;
-          width: 70px;
-          display: block;
-          margin-left: auto;
-          margin-right: auto;
-        }
-        .btn {
-          border: none;
-          padding: 10px;
-          margin-bottom: 10px;
-          width: auto;
-          border-radius: 4px;
-          cursor: pointer;
-        }
-        .btn-cancel {
-          background-color: #2c2c2c;
-          color: white;
-        }
-        .btn-submit {
-          background-color: ${modalSubmitButton};
-          color: white;
-        }
-        .footer {
-          text-align: center;
-          margin-top: 10px;
-        }
-      `,
-    ];
+      .facets-content {
+        font-size: 1.2rem;
+        max-height: 300px;
+        overflow: auto;
+        padding: 10px;
+      }
+      .facets-loader {
+        margin-bottom: 20px;
+        width: 70px;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+      }
+      .btn {
+        border: none;
+        padding: 10px;
+        margin-bottom: 10px;
+        width: auto;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+      .btn-cancel {
+        background-color: #2c2c2c;
+        color: white;
+      }
+      .btn-submit {
+        background-color: ${modalSubmitButton};
+        color: white;
+      }
+      .footer {
+        text-align: center;
+        margin-top: 10px;
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+    `;
   }
 }

package/src/collection-facets/more-facets-pagination.ts

@@ -9,7 +9,6 @@ import {
 import { customElement, property, state } from 'lit/decorators.js';
 import arrowLeftIcon from '../assets/img/icons/arrow-left';
 import arrowRightIcon from '../assets/img/icons/arrow-right';
-import { srOnlyStyle } from '../styles/sr-only';
 
 @customElement('more-facets-pagination')
 export class MoreFacetsPagination extends LitElement {
@@ -241,53 +240,60 @@ export class MoreFacetsPagination extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return [
-      srOnlyStyle,
-      css`
-        .facets-pagination {
-          user-select: none;
-          margin-top: 10px;
-          background-color: #eee;
-          text-align: center;
-        }
-        .facets-pagination button {
-          border: none;
-          background: none;
-        }
-        .facets-pagination .arrow-icon {
-          width: 2.5rem;
-          vertical-align: middle;
-        }
-        .facets-pagination .arrow-icon svg {
-          height: 14px;
-          fill: #2c2c2c;
-        }
-        .facets-pagination button,
-        .facets-pagination i {
-          background: none;
-          border: 0;
-          cursor: pointer;
-          border-radius: 4px;
-          margin: 10px 5px;
-          padding: 5px;
-          font-size: 1.4rem;
-          color: inherit;
-          vertical-align: baseline;
-          display: inline-block;
-          min-width: 2.5rem;
-        }
-        .facets-pagination i {
-          cursor: auto;
-          display: inline;
-        }
-        .facets-pagination button.current {
-          background: #2c2c2c;
-          color: white;
-        }
-        .page-numbers {
-          display: inline-block;
-        }
-      `,
-    ];
+    return css`
+      .facets-pagination {
+        user-select: none;
+        margin-top: 10px;
+        background-color: #eee;
+        text-align: center;
+      }
+      .facets-pagination button {
+        border: none;
+        background: none;
+      }
+      .facets-pagination .arrow-icon {
+        width: 2.5rem;
+        vertical-align: middle;
+      }
+      .facets-pagination .arrow-icon svg {
+        height: 14px;
+        fill: #2c2c2c;
+      }
+      .facets-pagination button,
+      .facets-pagination i {
+        background: none;
+        border: 0;
+        cursor: pointer;
+        border-radius: 4px;
+        margin: 10px 5px;
+        padding: 5px;
+        font-size: 1.4rem;
+        color: inherit;
+        vertical-align: baseline;
+        display: inline-block;
+        min-width: 2.5rem;
+      }
+      .facets-pagination i {
+        cursor: auto;
+        display: inline;
+      }
+      .facets-pagination button.current {
+        background: #2c2c2c;
+        color: white;
+      }
+      .page-numbers {
+        display: inline-block;
+      }
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+    `;
   }
 }

package/src/collection-facets/toggle-switch.ts

@@ -1,6 +1,5 @@
 import { css, html, LitElement, CSSResultGroup } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { srOnlyStyle } from '../styles/sr-only';
 
 export type Side = 'left' | 'right';
 
@@ -118,57 +117,68 @@ export class ToggleSwitch extends LitElement {
     const knobTransitionDuration = css`var(--knobTransitionDuration, 0.25s)`;
     const knobTransitionFn = css`var(--knobTransitionFn, ease)`;
 
-    return [
-      srOnlyStyle,
-      css`
-        #container {
-          display: inline-flex;
-          align-items: center;
-          flex-wrap: nowrap;
-          font-size: ${labelFontSize};
-        }
-
-        #switch-button {
-          width: ${switchWidth};
-          height: ${switchHeight};
-          margin: 0 ${switchMarginRight} 0 ${switchMarginLeft};
-          padding: 0;
-          border: ${switchBorderWidth} solid ${switchBorderColor};
-          border-radius: ${switchHeight};
-          box-sizing: content-box;
-          background: ${switchBgColor};
-          appearance: none;
-          cursor: pointer;
-        }
-
-        #switch-button.left #knob {
-          transform: translateX(0);
-        }
-
-        #switch-button.right #knob {
-          transform: translateX(calc(${switchWidth} - ${switchHeight}));
-        }
-
-        #switch-button:focus-visible {
-          outline: 2px solid black;
-          outline-offset: 2px;
-        }
-
+    return css`
+      #container {
+        display: inline-flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        font-size: ${labelFontSize};
+      }
+
+      #switch-button {
+        width: ${switchWidth};
+        height: ${switchHeight};
+        margin: 0 ${switchMarginRight} 0 ${switchMarginLeft};
+        padding: 0;
+        border: ${switchBorderWidth} solid ${switchBorderColor};
+        border-radius: ${switchHeight};
+        box-sizing: content-box;
+        background: ${switchBgColor};
+        appearance: none;
+        cursor: pointer;
+      }
+
+      #switch-button.left #knob {
+        transform: translateX(0);
+      }
+
+      #switch-button.right #knob {
+        transform: translateX(calc(${switchWidth} - ${switchHeight}));
+      }
+
+      #switch-button:focus-visible {
+        outline: 2px solid black;
+        outline-offset: 2px;
+      }
+
+      #knob {
+        display: block;
+        width: ${switchHeight};
+        height: ${switchHeight};
+        border-radius: 50%;
+        background: ${knobColor};
+        transition: transform ${knobTransitionDuration} ${knobTransitionFn};
+      }
+
+      .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;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
         #knob {
-          display: block;
-          width: ${switchHeight};
-          height: ${switchHeight};
-          border-radius: 50%;
-          background: ${knobColor};
-          transition: transform ${knobTransitionDuration} ${knobTransitionFn};
+          transition-duration: 0.001s !important; /* Imperceptibly fast */
         }
-
-        @media (prefers-reduced-motion: reduce) {
-          #knob {
-            transition-duration: 0.001s !important; /* Imperceptibly fast */
-          }
-        }
-      `,
-    ];
+      }
+    `;
   }
 }

package/src/collection-facets.ts

@@ -50,7 +50,6 @@ import {
   analyticsActions,
   analyticsCategories,
 } from './utils/analytics-events';
-import { srOnlyStyle } from './styles/sr-only';
 
 @customElement('collection-facets')
 export class CollectionFacets extends LitElement {
@@ -116,18 +115,15 @@ export class CollectionFacets extends LitElement {
   private allowedFacetCount = 6;
 
   render() {
-    const datePickerLabelId = 'date-picker-label';
     return html`
       <div id="container" class="${this.facetsLoading ? 'loading' : ''}">
         ${this.showHistogramDatePicker &&
         (this.fullYearsHistogramAggregation || this.fullYearAggregationLoading)
           ? html`
-              <section class="facet-group" aria-labelledby=${datePickerLabelId}>
-                <h3 id=${datePickerLabelId}>
-                  Year Published <span class="sr-only">range filter</span>
-                </h3>
+              <div class="facet-group">
+                <h1>Year Published</h1>
                 ${this.histogramTemplate}
-              </section>
+              </div>
             `
           : nothing}
         ${this.mergedFacets.map(facetGroup =>
@@ -371,27 +367,23 @@ export class CollectionFacets extends LitElement {
       <span class="collapser ${isOpen ? 'open' : ''}"> ${chevronIcon} </span>
     `;
 
-    const toggleCollapsed = () => {
-      const newOpenFacets = { ...this.openFacets };
-      newOpenFacets[key] = !isOpen;
-      this.openFacets = newOpenFacets;
-    };
-
-    const headerId = `facet-group-header-label-${facetGroup.key}`;
     return html`
-      <section
-        class="facet-group ${this.collapsableFacets ? 'mobile' : ''}"
-        aria-labelledby=${headerId}
-      >
+      <div class="facet-group ${this.collapsableFacets ? 'mobile' : ''}">
         <div class="facet-group-header">
-          <h3
-            id=${headerId}
-            @click=${toggleCollapsed}
-            @keyup=${toggleCollapsed}
+          <h1
+            @click=${() => {
+              const newOpenFacets = { ...this.openFacets };
+              newOpenFacets[key] = !isOpen;
+              this.openFacets = newOpenFacets;
+            }}
+            @keyup=${() => {
+              const newOpenFacets = { ...this.openFacets };
+              newOpenFacets[key] = !isOpen;
+              this.openFacets = newOpenFacets;
+            }}
           >
             ${this.collapsableFacets ? collapser : nothing} ${facetGroup.title}
-            <span class="sr-only">filters</span>
-          </h3>
+          </h1>
         </div>
         <div class="facet-group-content ${isOpen ? 'open' : ''}">
           ${this.facetsLoading
@@ -401,7 +393,7 @@ export class CollectionFacets extends LitElement {
                 ${this.searchMoreFacetsLink(facetGroup)}
               `}
         </div>
-      </section>
+      </div>
     `;
   }
 
@@ -527,90 +519,87 @@ export class CollectionFacets extends LitElement {
   }
 
   static get styles() {
-    return [
-      srOnlyStyle,
-      css`
-        #container.loading {
-          opacity: 0.5;
-        }
+    return css`
+      #container.loading {
+        opacity: 0.5;
+      }
 
-        .histogram-loading-indicator {
-          width: 100%;
-          height: 2.25rem;
-          margin-top: 1.75rem;
-          font-size: 1.4rem;
-          text-align: center;
-        }
+      .histogram-loading-indicator {
+        width: 100%;
+        height: 2.25rem;
+        margin-top: 1.75rem;
+        font-size: 1.4rem;
+        text-align: center;
+      }
 
-        .collapser {
-          display: inline-block;
-          cursor: pointer;
-          width: 10px;
-          height: 10px;
-        }
+      .collapser {
+        display: inline-block;
+        cursor: pointer;
+        width: 10px;
+        height: 10px;
+      }
 
-        .collapser svg {
-          transition: transform 0.2s ease-in-out;
-        }
+      .collapser svg {
+        transition: transform 0.2s ease-in-out;
+      }
 
-        .collapser.open svg {
-          transform: rotate(90deg);
-        }
+      .collapser.open svg {
+        transform: rotate(90deg);
+      }
 
-        .facet-group:not(:last-child) {
-          margin-bottom: 2rem;
-        }
+      .facet-group:not(:last-child) {
+        margin-bottom: 2rem;
+      }
 
-        .facet-group h3 {
-          margin-bottom: 0.7rem;
-        }
+      .facet-group h1 {
+        margin-bottom: 0.7rem;
+      }
 
-        .facet-group.mobile h3 {
-          cursor: pointer;
-        }
+      .facet-group.mobile h1 {
+        cursor: pointer;
+      }
 
-        .facet-group-header {
-          display: flex;
-          margin-bottom: 0.7rem;
-          justify-content: space-between;
-          border-bottom: 1px solid rgb(232, 232, 232);
-        }
+      .facet-group-header {
+        display: flex;
+        margin-bottom: 0.7rem;
+        justify-content: space-between;
+        border-bottom: 1px solid rgb(232, 232, 232);
+      }
 
-        .facet-group-content {
-          transition: max-height 0.2s ease-in-out;
-        }
+      .facet-group-content {
+        transition: max-height 0.2s ease-in-out;
+      }
 
-        .facet-group.mobile .facet-group-content {
-          max-height: 0;
-          overflow: hidden;
-        }
+      .facet-group.mobile .facet-group-content {
+        max-height: 0;
+        overflow: hidden;
+      }
 
-        .facet-group.mobile .facet-group-content.open {
-          max-height: 2000px;
-        }
+      .facet-group.mobile .facet-group-content.open {
+        max-height: 2000px;
+      }
 
-        h3 {
-          font-size: 1.4rem;
-          font-weight: 200
-          padding-bottom: 3px;
-          margin: 0;
-        }
+      h1 {
+        font-size: 1.4rem;
+        font-weight: 200
+        padding-bottom: 3px;
+        margin: 0;
+      }
 
-        .more-link {
-          font-size: 1.2rem;
-          text-decoration: none;
-          padding: 0;
-          background: inherit;
-          border: 0;
-          color: var(--ia-theme-link-color, #4b64ff);
-          cursor: pointer;
-        }
+      .more-link {
+        font-size: 1.2rem;
+        text-decoration: none;
+        padding: 0;
+        background: inherit;
+        border: 0;
+        color: var(--ia-theme-link-color, #4b64ff);
+        cursor: pointer;
+      }
 
-        .sorting-icon {
-          height: 15px;
-          cursor: pointer;
-        }
-      `,
-    ];
+      .sorting-icon {
+        height: 15px;
+        cursor: pointer;
+      }
+    `;
   }
 }