@internetarchive/collection-browser 3.0.2-alpha1 → 3.0.2

package/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>
     `;

package/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 () => {