@internetarchive/collection-browser 0.4.19 → 1.0.0

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

@@ -164,6 +164,7 @@ 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">
@@ -203,6 +204,7 @@ 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,6 +40,7 @@ import {
   analyticsCategories,
 } from '../utils/analytics-events';
 import './toggle-switch';
+import { srOnlyStyle } from '../styles/sr-only';
 
 @customElement('more-facets-content')
 export class MoreFacetsContent extends LitElement {
@@ -456,81 +457,73 @@ export class MoreFacetsContent extends LitElement {
   static get styles(): CSSResultGroup {
     const modalSubmitButton = css`var(--primaryButtonBGColor, #194880)`;
 
-    return css`
-      @media (max-width: 560px) {
+    return [
+      srOnlyStyle,
+      css`
+        @media (max-width: 560px) {
+          section#more-facets {
+            max-height: 450px;
+          }
+          .facets-content {
+            overflow-y: auto;
+            height: 300px;
+          }
+        }
         section#more-facets {
-          max-height: 450px;
+          overflow: auto;
+          padding: 10px; /* leaves room for scroll bar to appear without overlaying on content */
         }
-        .facets-content {
-          overflow-y: auto;
-          height: 300px;
+        .header-content .title {
+          display: block;
+          text-align: left;
+          font-size: 1.8rem;
+          padding: 0 10px;
+          font-weight: bold;
         }
-      }
-      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-toggle {
-        font-weight: normal;
-      }
+        .sort-label {
+          margin-left: 20px;
+          font-size: 1.3rem;
+        }
 
-      .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;
-      }
+        .sort-toggle {
+          font-weight: normal;
+        }
 
-      .sr-only {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        border: 0;
-      }
-    `;
+        .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;
+        }
+      `,
+    ];
   }
 }

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

@@ -9,6 +9,7 @@ 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 {
@@ -240,60 +241,53 @@ export class MoreFacetsPagination extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    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;
-      }
-    `;
+    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;
+        }
+      `,
+    ];
   }
 }

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

@@ -1,5 +1,6 @@
 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';
 
@@ -117,68 +118,57 @@ export class ToggleSwitch extends LitElement {
     const knobTransitionDuration = css`var(--knobTransitionDuration, 0.25s)`;
     const knobTransitionFn = css`var(--knobTransitionFn, ease)`;
 
-    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) {
+    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;
+        }
+
         #knob {
-          transition-duration: 0.001s !important; /* Imperceptibly fast */
+          display: block;
+          width: ${switchHeight};
+          height: ${switchHeight};
+          border-radius: 50%;
+          background: ${knobColor};
+          transition: transform ${knobTransitionDuration} ${knobTransitionFn};
         }
-      }
-    `;
+
+        @media (prefers-reduced-motion: reduce) {
+          #knob {
+            transition-duration: 0.001s !important; /* Imperceptibly fast */
+          }
+        }
+      `,
+    ];
   }
 }

package/src/collection-facets.ts

@@ -50,6 +50,7 @@ import {
   analyticsActions,
   analyticsCategories,
 } from './utils/analytics-events';
+import { srOnlyStyle } from './styles/sr-only';
 
 @customElement('collection-facets')
 export class CollectionFacets extends LitElement {
@@ -115,15 +116,18 @@ 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`
-              <div class="facet-group">
-                <h1>Year Published</h1>
+              <section class="facet-group" aria-labelledby=${datePickerLabelId}>
+                <h3 id=${datePickerLabelId}>
+                  Year Published <span class="sr-only">range filter</span>
+                </h3>
                 ${this.histogramTemplate}
-              </div>
+              </section>
             `
           : nothing}
         ${this.mergedFacets.map(facetGroup =>
@@ -367,23 +371,27 @@ 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`
-      <div class="facet-group ${this.collapsableFacets ? 'mobile' : ''}">
+      <section
+        class="facet-group ${this.collapsableFacets ? 'mobile' : ''}"
+        aria-labelledby=${headerId}
+      >
         <div class="facet-group-header">
-          <h1
-            @click=${() => {
-              const newOpenFacets = { ...this.openFacets };
-              newOpenFacets[key] = !isOpen;
-              this.openFacets = newOpenFacets;
-            }}
-            @keyup=${() => {
-              const newOpenFacets = { ...this.openFacets };
-              newOpenFacets[key] = !isOpen;
-              this.openFacets = newOpenFacets;
-            }}
+          <h3
+            id=${headerId}
+            @click=${toggleCollapsed}
+            @keyup=${toggleCollapsed}
           >
             ${this.collapsableFacets ? collapser : nothing} ${facetGroup.title}
-          </h1>
+            <span class="sr-only">filters</span>
+          </h3>
         </div>
         <div class="facet-group-content ${isOpen ? 'open' : ''}">
           ${this.facetsLoading
@@ -393,7 +401,7 @@ export class CollectionFacets extends LitElement {
                 ${this.searchMoreFacetsLink(facetGroup)}
               `}
         </div>
-      </div>
+      </section>
     `;
   }
 
@@ -493,6 +501,9 @@ export class CollectionFacets extends LitElement {
     this.modalManager?.showModal({
       config,
       customModalContent,
+      userClosedModalCallback: () => {
+        this.modalManager?.classList.remove('more-search-facets');
+      },
     });
   }
 
@@ -519,87 +530,90 @@ export class CollectionFacets extends LitElement {
   }
 
   static get styles() {
-    return css`
-      #container.loading {
-        opacity: 0.5;
-      }
+    return [
+      srOnlyStyle,
+      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 h1 {
-        margin-bottom: 0.7rem;
-      }
+        .facet-group h3 {
+          margin-bottom: 0.7rem;
+        }
 
-      .facet-group.mobile h1 {
-        cursor: pointer;
-      }
+        .facet-group.mobile h3 {
+          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;
+        }
 
-      h1 {
-        font-size: 1.4rem;
-        font-weight: 200
-        padding-bottom: 3px;
-        margin: 0;
-      }
+        h3 {
+          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;
+        }
+      `,
+    ];
   }
 }