Improve Lighthouse crawlability score

src/page/image-button/image-button.html.ts

@@ -8,12 +8,16 @@ export const ImageButtonFactory =
     { shouldDownload = false }: { shouldDownload?: boolean } = {}
   ) =>
   (href?: url) =>
-    `<a ${href ? `href="${href}"` : ''}
+    `
-      class="image-button" tabindex="-1" rel="noopener" target="_blank" ${
+    <button class="image-button">
-        shouldDownload ? 'download' : ''
+     ${
-      }>
+       href
-      <button>
+         ? `<a href="${href}" tabindex="-1" rel="noopener" target="_blank" ${
+             shouldDownload ? 'download' : ''
+           }>`
+         : ''
+     }
         <div class="svg-container">${svg}</div>
         <p>${title}</p>
-      </button>
+        ${href ? '</a>' : ''}
-    </a>`;
+    </button>`;

src/page/image-button/image-button.scss

@@ -5,23 +5,19 @@
   padding: var(--small-margin) 8px;
   text-align: center;
 
-  > button {
+  .svg-container {
-    cursor: pointer;
+    position: relative;
+    margin: auto;
+    @include square(var(--icon-size));
 
-    > .svg-container {
+    > svg {
-      position: relative;
+      transition: stroke var(--transition-time), transform var(--transition-time);
-      margin: auto;
-      @include square(var(--icon-size));
-
-      > svg {
-        transition: stroke var(--transition-time), transform var(--transition-time);
-      }
-    }
-
-    > p {
-      font-size: 0.9rem;
-      font-style: italic;
-      text-align: center;
     }
   }
+
+  p {
+    font-size: 0.9rem;
+    font-style: italic;
+    text-align: center;
+  }
 }