@internetarchive/collection-browser 0.4.19 → 0.4.20

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

@@ -5,6 +5,7 @@ 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';
 
@@ -78,78 +79,70 @@ export class TileStats extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    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;
-      }
-    `;
+    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;
+        }
+      `,
+    ];
   }
 }

package/src/tiles/tile-dispatcher.ts

@@ -123,6 +123,7 @@ 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,8 +119,16 @@ describe('Collection Facets', () => {
     expect(facetGroups?.length).to.equal(1);
 
     const titleFacetGroup = facetGroups?.[0];
-    const facetGroupHeader = titleFacetGroup?.querySelector('h1');
-    expect(facetGroupHeader?.textContent?.trim()).to.equal('Subject');
+    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 titleFacetRow = titleFacetGroup
       ?.querySelector('facets-template')
       ?.shadowRoot?.querySelector('.facet-row');

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

@@ -14,30 +14,34 @@ describe('Alphabetical Filter Bar', () => {
     expect(letters?.length).to.equal(26);
   });
 
-  it('renders letters with items as links', async () => {
+  it('renders letters with items as buttons', 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 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');
+    // 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');
   });
 
-  it('renders letters without items as uninteractive text', async () => {
+  it('renders letters without items as disabled buttons', 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 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');
+    // 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');
   });
 
   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 > a[href]'
+      'li > button:not(:disabled)'
     ) 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 > a[href]'
+      'li > button:not(:disabled)'
     ) as HTMLAnchorElement;
     expect(letterLink?.textContent?.trim()).to.equal('C');