Revert CB a11y reversion (but preserve ellipses fix) (#517)

This reverts commit 3375101.

Author: rebecca-shoptaw

package.json

@@ -28,7 +28,7 @@
     "@internetarchive/field-parsers": "^1.0.0",
     "@internetarchive/histogram-date-range": "^1.4.0",
     "@internetarchive/ia-activity-indicator": "^0.0.6",
-    "@internetarchive/ia-dropdown": "^1.4.0",
+    "@internetarchive/ia-dropdown": "^1.4.1",
     "@internetarchive/iaux-item-metadata": "^1.0.5",
     "@internetarchive/infinite-scroller": "^1.0.1",
     "@internetarchive/modal-manager": "^2.0.1",

src/collection-browser.ts

@@ -2687,6 +2687,7 @@ export class CollectionBrowser
 
         #tile-blur-check {
           margin: 0 5px 0 0;
+          width: 15px;
         }
 
         circular-activity-indicator {

src/collection-facets.ts

@@ -397,6 +397,7 @@ export class CollectionFacets extends LitElement {
       ? html`<button
           class="expand-date-picker-btn"
           aria-hidden="true"
+          tabindex="-1"
           @click=${this.showDatePickerModal}
         >
           ${expandIcon}
@@ -425,7 +426,7 @@ export class CollectionFacets extends LitElement {
 
     return html`
       <histogram-date-range
-        class=${this.isTvSearch ? 'wide-inputs' : nothing}
+        class=${this.isTvSearch ? 'wide-inputs' : ''}
         .minDate=${minDate}
         .maxDate=${maxDate}
         .minSelectedDate=${this.minSelectedDate ?? minDate}
@@ -951,6 +952,7 @@ export class CollectionFacets extends LitElement {
           font-size: 1.2rem;
           text-decoration: none;
           padding: 0;
+          margin-top: 0.25rem;
           background: inherit;
           border: 0;
           color: var(--ia-theme-link-color, #4b64ff);

src/collection-facets/facet-row.ts

@@ -213,7 +213,8 @@ export class FacetRow extends LitElement {
         display: flex;
         font-weight: 500;
         font-size: 1.2rem;
-        margin: 2.5px auto;
+        margin: 0 auto;
+        padding: 0.25rem 0;
         height: auto;
         border-top: ${facetRowBorderTop};
         border-bottom: ${facetRowBorderBottom};

src/tiles/grid/collection-tile.ts

@@ -55,7 +55,7 @@ export class CollectionTile extends BaseTileComponent {
 
   private get getTitleTemplate() {
     return html`<div id="title">
-      <h4 class="truncated">${this.model?.title}</h4>
+      <h3 class="truncated">${this.model?.title}</h3>
     </div>`;
   }
 
@@ -123,7 +123,8 @@ export class CollectionTile extends BaseTileComponent {
           flex-grow: initial;
         }
 
-        h4.truncated {
+        h4.truncated,
+        h3.truncated {
           color: ${whiteColor};
         }
 

src/tiles/grid/item-tile.ts

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

src/tiles/grid/search-tile.ts

@@ -49,7 +49,7 @@ export class SearchTile extends BaseTileComponent {
 
   private get getTitleTemplate() {
     return html`<div id="title">
-      <h4 class="truncated">${this.model?.title}</h4>
+      <h3 class="truncated">${this.model?.title}</h3>
     </div>`;
   }
 
@@ -70,7 +70,8 @@ export class SearchTile extends BaseTileComponent {
           flex-grow: initial;
         }
 
-        h4.truncated {
+        h4.truncated,
+        h3.truncated {
           color: ${whiteColor};
           -webkit-line-clamp: 4;
         }

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

@@ -72,7 +72,8 @@ export const baseTileStyles = css`
     -webkit-box-orient: vertical;
   }
 
-  h4.truncated {
+  h4.truncated,
+  h3.truncated {
     display: -webkit-box;
     margin: 0px;
     line-height: 15px;
@@ -114,7 +115,7 @@ export const baseTileStyles = css`
     align-items: center;
     background: rgba(220, 220, 220, 0.5);
     color: white;
-    font-size: 2rem;
+    font-size: 2.4rem;
     font-weight: bold;
     line-height: 1;
     text-shadow: black 1px 1px 3px;

src/tiles/list/tile-list.ts

@@ -4,7 +4,7 @@ import { join } from 'lit/directives/join.js';
 import { map } from 'lit/directives/map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { customElement, property, state } from 'lit/decorators.js';
-import { msg } from '@lit/localize';
+import { msg, str } from '@lit/localize';
 import DOMPurify from 'dompurify';
 
 import type { SortParam } from '@internetarchive/search-service';
@@ -94,7 +94,11 @@ export class TileList extends BaseTileComponent {
       isCollection,
     );
 
-    return html`<a href=${href}>
+    return html`<a
+      id="image-link"
+      title=${msg(str`View ${this.model?.title}`)}
+      href=${href}
+    >
       <image-block
         .model=${this.model}
         .baseImageUrl=${this.baseImageUrl}
@@ -127,7 +131,11 @@ export class TileList extends BaseTileComponent {
   // Data templates
   private get iconRightTemplate() {
     return html`
-      <a id="icon-right" href=${this.mediatypeURL}>
+      <a
+        id="icon-right"
+        href=${this.mediatypeURL}
+        title=${msg(str`See more: ${this.model?.mediatype}`)}
+      >
         <tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>
       </a>
     `;

test/tiles/list/tile-list.test.ts

@@ -49,6 +49,20 @@ describe('List Tile', () => {
     expect(title?.getAttribute('href')).to.equal('/foo/bar');
   });
 
+  it('should add title to image link if provided', async () => {
+    const el = await fixture<TileList>(html`
+      <tile-list
+        .baseNavigationUrl=${''}
+        .model=${{ title: 'foo', href: '/foo/bar' }}
+      ></tile-list>
+    `);
+
+    const imageLink = el.shadowRoot?.querySelector('#image-link');
+
+    expect(imageLink).to.exist;
+    expect(imageLink?.getAttribute('title')).to.equal('View foo');
+  });
+
   it('should render with creator element but not dates', async () => {
     const el = await fixture<TileList>(html`
       <tile-list .model=${{ creators: ['someone'] }}></tile-list>
@@ -324,6 +338,7 @@ describe('List Tile', () => {
     expect(mediatypeLink?.getAttribute('href')).to.equal(
       `https://archive.org/details/texts`,
     );
+    expect(mediatypeLink?.getAttribute('title')).to.equal('See more: texts');
   });
 
   it('should render mediatype icon as link even with empty baseNavigationUrl', async () => {