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

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

@@ -5,7 +5,6 @@ import { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';
 import { reviewsIcon } from '../../assets/img/icons/reviews';
 import { uploadIcon } from '../../assets/img/icons/upload';
 import { viewsIcon } from '../../assets/img/icons/views';
-import { srOnlyStyle } from '../../styles/sr-only';
 
 import { formatCount } from '../../utils/format-count';
 
@@ -79,70 +78,78 @@ export class TileStats extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return [
-      srOnlyStyle,
-      css`
-        mediatype-icon {
-          --iconHeight: 25px;
-          --iconWidth: 25px;
-        }
-
-        ul {
-          all: unset; // unset all property values
-          list-style-type: none; // remove default list-style
-        }
-
-        li {
-          list-style-type: none; // remove default list-style
-        }
-
-        svg {
-          height: 13px;
-          width: 13px;
-          display: block;
-          margin: auto;
-          pointer-events: none;
-        }
-
-        /* Make the reviews icon slightly smaller/lower, for even visual weight */
-        .reviews svg {
-          height: 11px;
-          width: 11px;
-          margin-top: 2px;
-        }
-
-        .item-stats {
-          height: 30px;
-          padding-left: 5px;
-          padding-right: 5px;
-          font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
-          text-align: center;
-        }
-
-        #stats-row {
-          display: flex;
-          justify-content: space-between;
-          flex-wrap: wrap;
-          width: 100%;
-          padding-bottom: 5px;
-        }
-
-        .col {
-          min-width: 15px;
-          max-width: 25%;
-          height: 25px;
-        }
-
-        .status-text {
-          font-size: 14px;
-          height: 15px;
-          color: #2c2c2c;
-          line-height: 17px;
-          margin: auto;
-          display: block;
-          text-align: center;
-        }
-      `,
-    ];
+    return css`
+      mediatype-icon {
+        --iconHeight: 25px;
+        --iconWidth: 25px;
+      }
+
+      ul {
+        all: unset; // unset all property values
+        list-style-type: none; // remove default list-style
+      }
+
+      li {
+        list-style-type: none; // remove default list-style
+      }
+
+      svg {
+        height: 13px;
+        width: 13px;
+        display: block;
+        margin: auto;
+        pointer-events: none;
+      }
+
+      /* Make the reviews icon slightly smaller/lower, for even visual weight */
+      .reviews svg {
+        height: 11px;
+        width: 11px;
+        margin-top: 2px;
+      }
+
+      .item-stats {
+        height: 30px;
+        padding-left: 5px;
+        padding-right: 5px;
+        font-family: 'Helvetica Neue', ui-sans-serif, system-ui, sans-serif;
+        text-align: center;
+      }
+
+      #stats-row {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        width: 100%;
+        padding-bottom: 5px;
+      }
+
+      .sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        border: 0;
+      }
+
+      .col {
+        min-width: 15px;
+        max-width: 25%;
+        height: 25px;
+      }
+
+      .status-text {
+        font-size: 14px;
+        height: 15px;
+        color: #2c2c2c;
+        line-height: 17px;
+        margin: auto;
+        display: block;
+        text-align: center;
+      }
+    `;
   }
 }

package/src/tiles/tile-dispatcher.ts

@@ -123,7 +123,6 @@ export class TileDispatcher
     return html`
       <a
         href="${this.linkTileHref}"
-        aria-label=${this.model?.title ?? 'Untitled item'}
         title=${this.shouldPrepareHoverPane
           ? nothing // Don't show title tooltips when we have the tile info popups
           : ifDefined(this.model?.title)}

package/test/collection-facets.test.ts

@@ -119,16 +119,8 @@ describe('Collection Facets', () => {
     expect(facetGroups?.length).to.equal(1);
 
     const titleFacetGroup = facetGroups?.[0];
-    const facetGroupHeader = titleFacetGroup?.querySelector('h3');
-    // Every facet group header has an invisible " filters" suffix for screen-readers
-    expect(
-      facetGroupHeader?.querySelector('span.sr-only')?.textContent?.trim()
-    ).to.equal('filters');
-    // Ignoring the screen-reader suffix, we should be left with only the readable, capitalized title
-    expect(
-      facetGroupHeader?.textContent?.trim().replace(/\s*filters$/, '')
-    ).to.equal('Subject');
-
+    const facetGroupHeader = titleFacetGroup?.querySelector('h1');
+    expect(facetGroupHeader?.textContent?.trim()).to.equal('Subject');
     const titleFacetRow = titleFacetGroup
       ?.querySelector('facets-template')
       ?.shadowRoot?.querySelector('.facet-row');

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

@@ -14,34 +14,30 @@ describe('Alphabetical Filter Bar', () => {
     expect(letters?.length).to.equal(26);
   });
 
-  it('renders letters with items as buttons', async () => {
+  it('renders letters with items as links', async () => {
     const el = await fixture<AlphaBar>(html`<alpha-bar></alpha-bar>`);
 
     el.letterCounts = { U: 10, X: 10 };
     await el.updateComplete;
 
-    // Should have exactly two letter buttons
-    const letterButtons = el.shadowRoot?.querySelectorAll(
-      'li > button:not(:disabled)'
-    );
-    expect(letterButtons?.length).to.equal(2);
-    expect(letterButtons?.item(0).textContent?.trim()).to.equal('U');
-    expect(letterButtons?.item(1).textContent?.trim()).to.equal('X');
+    // Should have exactly two letter links
+    const letterLinks = el.shadowRoot?.querySelectorAll('li > a[href]');
+    expect(letterLinks?.length).to.equal(2);
+    expect(letterLinks?.item(0).textContent?.trim()).to.equal('U');
+    expect(letterLinks?.item(1).textContent?.trim()).to.equal('X');
   });
 
-  it('renders letters without items as disabled buttons', async () => {
+  it('renders letters without items as uninteractive text', async () => {
     const el = await fixture<AlphaBar>(html`<alpha-bar></alpha-bar>`);
 
     el.letterCounts = { U: 10, X: 10 };
     await el.updateComplete;
 
-    // All but the two letters above should be disabled
-    const letterButtons = el.shadowRoot?.querySelectorAll(
-      'li > button:disabled'
-    );
-    expect(letterButtons?.length).to.equal(24);
-    expect(letterButtons?.item(0).textContent?.trim()).to.equal('A');
-    expect(letterButtons?.item(23).textContent?.trim()).to.equal('Z');
+    // All but the two letters above should just be inert spans, not links
+    const letterNonLinks = el.shadowRoot?.querySelectorAll('li > span');
+    expect(letterNonLinks?.length).to.equal(24);
+    expect(letterNonLinks?.item(0).textContent?.trim()).to.equal('A');
+    expect(letterNonLinks?.item(23).textContent?.trim()).to.equal('Z');
   });
 
   it('renders the selected letter with the "selected" class', async () => {

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

@@ -456,7 +456,7 @@ describe('Sort/filter bar letter behavior', () => {
 
     const alphaBar = el.shadowRoot?.querySelector('alpha-bar');
     const letterLink = alphaBar?.shadowRoot?.querySelector(
-      'li > button:not(:disabled)'
+      'li > a[href]'
     ) as HTMLAnchorElement;
     expect(letterLink?.textContent?.trim()).to.equal('T');
 
@@ -477,7 +477,7 @@ describe('Sort/filter bar letter behavior', () => {
 
     const alphaBar = el.shadowRoot?.querySelector('alpha-bar');
     const letterLink = alphaBar?.shadowRoot?.querySelector(
-      'li > button:not(:disabled)'
+      'li > a[href]'
     ) as HTMLAnchorElement;
     expect(letterLink?.textContent?.trim()).to.equal('C');
 

package/dist/src/styles/sr-only.d.ts

@@ -1 +0,0 @@
-export declare const srOnlyStyle: import("lit").CSSResult;

package/dist/src/styles/sr-only.js

@@ -1,18 +0,0 @@
-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;
-  }
-`;
-//# sourceMappingURL=sr-only.js.map

package/dist/src/styles/sr-only.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sr-only.js","sourceRoot":"","sources":["../../../src/styles/sr-only.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;CAe7B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const srOnlyStyle = css`\n  .sr-only {\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    margin: -1px !important;\n    padding: 0 !important;\n    border: 0 !important;\n    overflow: hidden !important;\n    white-space: nowrap !important;\n    clip: rect(1px, 1px, 1px, 1px) !important;\n    -webkit-clip-path: inset(50%) !important;\n    clip-path: inset(50%) !important;\n    user-select: none !important;\n  }\n`;\n"]}

package/src/styles/sr-only.ts

@@ -1,18 +0,0 @@
-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;
-  }
-`;