Alternative text for images (#1537)

* Add aria-hidden to heartbeat svg on WorkflowStatus

* Translate alt for user profile img

* Add aria-labelledby to loading img

* Remove link and alt from logo

* Add title to icon and keyboard shortcut svgs

* Update snapshots

* Use  for holocene links

* CR feedback

src/lib/components/event/event-details-row.svelte

@@ -16,7 +16,7 @@
 
   import CodeBlock from '$lib/holocene/code-block.svelte';
   import Link from '$lib/holocene/link.svelte';
-  import Copyable from '../../holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable.svelte';
   import type { CombinedAttributes } from '$lib/utilities/format-event-attributes';
   import { translate } from '$lib/i18n/translate';
 

src/lib/components/event/event-shortcut-keys.svelte

@@ -28,25 +28,34 @@
     <div class="cell">
       {translate('next-page')}
       <div class="shortcut">
-        <Shortcut arrow="right" />|<Shortcut>L</Shortcut>
+        <Shortcut
+          arrow="right"
+          title={translate('arrow-key-right')}
+        />|<Shortcut title="">L</Shortcut>
       </div>
     </div>
     <div class="cell">
       {translate('previous-page')}
       <div class="shortcut">
-        <Shortcut arrow="left" />|<Shortcut>H</Shortcut>
+        <Shortcut arrow="left" title={translate('arrow-key-left')} />|<Shortcut
+          title="">H</Shortcut
+        >
       </div>
     </div>
     <div class="cell">
       {translate('next-row')}
       <div class="shortcut">
-        <Shortcut arrow="down" />|<Shortcut>J</Shortcut>
+        <Shortcut arrow="down" title={translate('arrow-key-down')} />|<Shortcut
+          title="">J</Shortcut
+        >
       </div>
     </div>
     <div class="cell">
       {translate('previous-row')}
       <div class="shortcut">
-        <Shortcut arrow="up" />|<Shortcut>K</Shortcut>
+        <Shortcut arrow="up" title={translate('arrow-key-up')} />|<Shortcut
+          title="">K</Shortcut
+        >
       </div>
     </div>
   </div>

src/lib/components/heart-beat-indicator.svelte

@@ -21,6 +21,8 @@
       viewBox="0 0 150 73"
       enable-background="new 0 0 150 73"
       xml:space="preserve"
+      aria-hidden="true"
+      focusable="false"
     >
       <polyline
         fill="none"
@@ -64,41 +66,36 @@
     animation: heartRateOut 2s linear infinite;
     animation-delay: var(--animation-delay, 0);
     background: rgb(219 234 254);
-    background:
-      linear-gradient(
-        to left,
-        rgb(219 234 254) 0%,
-        rgb(219 234 254) 50%,
-        rgb(255 255 255 / 0%) 100%
-      );
-    background:
-      linear-gradient(
-        to left,
-        rgb(219 234 254) 0%,
-        rgb(219 234 254) 50%,
-        rgb(255 255 255 / 0%) 100%
-      );
-    background:
-      linear-gradient(
-        to left,
-        rgb(219 234 254) 0%,
-        rgb(219 234 254) 50%,
-        rgb(255 255 255 / 0%) 100%
-      );
-    background:
-      linear-gradient(
-        to left,
-        rgb(219 234 254) 0%,
-        rgb(219 234 254) 50%,
-        rgb(255 255 255 / 0%) 100%
-      );
-    background:
-      linear-gradient(
-        to right,
-        rgb(219 234 254) 0%,
-        rgb(219 234 254) 80%,
-        rgb(255 255 255 / 0%) 100%
-      );
+    background: linear-gradient(
+      to left,
+      rgb(219 234 254) 0%,
+      rgb(219 234 254) 50%,
+      rgb(255 255 255 / 0%) 100%
+    );
+    background: linear-gradient(
+      to left,
+      rgb(219 234 254) 0%,
+      rgb(219 234 254) 50%,
+      rgb(255 255 255 / 0%) 100%
+    );
+    background: linear-gradient(
+      to left,
+      rgb(219 234 254) 0%,
+      rgb(219 234 254) 50%,
+      rgb(255 255 255 / 0%) 100%
+    );
+    background: linear-gradient(
+      to left,
+      rgb(219 234 254) 0%,
+      rgb(219 234 254) 50%,
+      rgb(255 255 255 / 0%) 100%
+    );
+    background: linear-gradient(
+      to right,
+      rgb(219 234 254) 0%,
+      rgb(219 234 254) 80%,
+      rgb(255 255 255 / 0%) 100%
+    );
   }
 
   @keyframes heartRateIn {

src/lib/components/top-nav.svelte

@@ -70,13 +70,13 @@
         <div slot="trigger" class="flex items-center gap-1">
           <img
             src={$authUser?.picture}
-            alt={$authUser?.profile ?? 'user profile'}
+            alt={$authUser?.profile ?? translate('user-profile')}
             class="h-[24px] w-[24px] cursor-pointer rounded-md"
             on:error={fixImage}
             class:hidden={!showProfilePic}
           />
           <div
-            class="aspect-square h-[24px] h-full w-[24px] rounded-md bg-blue-200 p-0.5"
+            class="aspect-square h-full w-[24px] rounded-md bg-blue-200 p-0.5"
             class:hidden={showProfilePic}
           >
             {#if $authUser?.name}

src/lib/components/workflow/first-previous-next-workflow-table.svelte

@@ -5,7 +5,7 @@
   import TableRow from '$lib/holocene/table/table-row.svelte';
   import Table from '$lib/holocene/table/table.svelte';
 
-  import Copyable from '../../holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
 

src/lib/components/workflow/parent-workflow-table.svelte

@@ -6,7 +6,7 @@
   import Table from '$lib/holocene/table/table.svelte';
 
   import type { WorkflowIdentifier } from '$lib/types/workflows';
-  import Copyable from '../../holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
 

src/lib/components/workflow/scheduler-table.svelte

@@ -5,7 +5,7 @@
   import TableRow from '$lib/holocene/table/table-row.svelte';
   import Table from '$lib/holocene/table/table.svelte';
 
-  import Copyable from '../../holocene/copyable.svelte';
+  import Copyable from '$lib/holocene/copyable.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { translate } from '$lib/i18n/translate';
 

src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-body-cell.test.ts.snap

@@ -20,7 +20,7 @@ exports[`Table_body_cell$ > Start renders 1`] = `"<td class=\\"workflows-summary
 
 exports[`Table_body_cell$ > State Transitions renders 1`] = `"<td class=\\"workflows-summary-table-body-cell svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\">12</td>"`;
 
-exports[`Table_body_cell$ > Status renders 1`] = `"<td class=\\"workflows-summary-table-body-cell svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><span class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"blue flex items-center rounded-sm px-1 py-0.5 font-secondary svelte-b7co3f\\"><span class=\\"whitespace-nowrap\\">Running</span> <div class=\\"heart-beat svelte-8dynez\\" style=\\"--animation-delay:0ms;\\"><div class=\\"heart-rate svelte-8dynez\\"><svg version=\\"1.0\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" x=\\"0px\\" y=\\"0px\\" width=\\"30px\\" height=\\"18px\\" viewBox=\\"0 0 150 73\\" enable-background=\\"new 0 0 150 73\\" xml:space=\\"preserve\\"><polyline fill=\\"none\\" stroke=\\"#1D4ED8\\" stroke-width=\\"3\\" stroke-miterlimit=\\"10\\" points=\\"0,45.486 18.514,45.486 24.595,33.324 32.676,45.486 37.771,45.486 42.838,55.622 51.959,18 56.067,45 60.067,60.729 63.122,45.486 77.297,45.486 83.379,41.419 90.473,45.486 100,45.486\\"></polyline></svg> <div class=\\"fade-in svelte-8dynez\\"></div> <div class=\\"fade-out svelte-8dynez\\"></div></div> </div></span></span></td>"`;
+exports[`Table_body_cell$ > Status renders 1`] = `"<td class=\\"workflows-summary-table-body-cell svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\"><span class=\\"flex text-center text-sm font-medium leading-4\\"><span class=\\"blue flex items-center rounded-sm px-1 py-0.5 font-secondary svelte-b7co3f\\"><span class=\\"whitespace-nowrap\\">Running</span> <div class=\\"heart-beat svelte-8dynez\\" style=\\"--animation-delay:0ms;\\"><div class=\\"heart-rate svelte-8dynez\\"><svg version=\\"1.0\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" x=\\"0px\\" y=\\"0px\\" width=\\"30px\\" height=\\"18px\\" viewBox=\\"0 0 150 73\\" enable-background=\\"new 0 0 150 73\\" xml:space=\\"preserve\\" aria-hidden=\\"true\\" focusable=\\"false\\"><polyline fill=\\"none\\" stroke=\\"#1D4ED8\\" stroke-width=\\"3\\" stroke-miterlimit=\\"10\\" points=\\"0,45.486 18.514,45.486 24.595,33.324 32.676,45.486 37.771,45.486 42.838,55.622 51.959,18 56.067,45 60.067,60.729 63.122,45.486 77.297,45.486 83.379,41.419 90.473,45.486 100,45.486\\"></polyline></svg> <div class=\\"fade-in svelte-8dynez\\"></div> <div class=\\"fade-out svelte-8dynez\\"></div></div> </div></span></span></td>"`;
 
 exports[`Table_body_cell$ > Task Queue renders 1`] = `"<td class=\\"workflows-summary-table-body-cell svelte-qupenl\\" data-testid=\\"workflows-summary-table-body-cell\\">task-queue</td>"`;
 

src/lib/components/workflow/workflows-summary-configurable-table/tests/__snapshots__/table-header-cell.test.ts.snap

@@ -14,16 +14,16 @@ exports[`Table_header_cell$ > Parent Namespace renders 1`] = `"<th class=\\"work
 
 exports[`Table_header_cell$ > Parent Workflow ID renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Parent Workflow ID\\">Parent Workflow ID</th>"`;
 
-exports[`Table_header_cell$ > Run ID renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Run ID\\"><div><div class=\\"relative inline\\" data-testid=\\"run-id-filter-button\\"><button type=\\"button\\" class=\\"icon-button svelte-1vs3on1\\" data-testid=\\"run-id-filter-button-button\\" aria-label=\\"Open Run ID filter menu\\"><div class=\\"flex items-center gap-1 truncate svelte-1o0pqx5\\">Run ID <svg width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"pointer-events-none\\"><title></title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg></div></button> </div> </div></th>"`;
+exports[`Table_header_cell$ > Run ID renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Run ID\\"><div><div class=\\"relative inline\\" data-testid=\\"run-id-filter-button\\"><button type=\\"button\\" class=\\"icon-button svelte-1vs3on1\\" data-testid=\\"run-id-filter-button-button\\" aria-label=\\"Open Run ID filter menu\\"><div class=\\"flex items-center gap-1 truncate svelte-1o0pqx5\\">Run ID <svg width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"pointer-events-none\\" role=\\"img\\"><title></title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg></div></button> </div> </div></th>"`;
 
 exports[`Table_header_cell$ > Start renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Start\\">Start</th>"`;
 
 exports[`Table_header_cell$ > State Transitions renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-State Transitions\\">State Transitions</th>"`;
 
-exports[`Table_header_cell$ > Status renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Status\\"><div><div class=\\"relative inline\\" data-testid=\\"execution-status-filter\\"><button type=\\"button\\" class=\\"icon-button svelte-1vs3on1\\" data-testid=\\"execution-status-filter-button\\" aria-label=\\"Open execution status filter menu\\"><div class=\\"flex items-center gap-1 truncate svelte-1o0pqx5\\">Status <svg width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"pointer-events-none\\"><title></title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg></div></button> </div> </div></th>"`;
+exports[`Table_header_cell$ > Status renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Status\\"><div><div class=\\"relative inline\\" data-testid=\\"execution-status-filter\\"><button type=\\"button\\" class=\\"icon-button svelte-1vs3on1\\" data-testid=\\"execution-status-filter-button\\" aria-label=\\"Open execution status filter menu\\"><div class=\\"flex items-center gap-1 truncate svelte-1o0pqx5\\">Status <svg width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"pointer-events-none\\" role=\\"img\\"><title></title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg></div></button> </div> </div></th>"`;
 
 exports[`Table_header_cell$ > Task Queue renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Task Queue\\">Task Queue</th>"`;
 
-exports[`Table_header_cell$ > Type renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Type\\"><div><div class=\\"relative inline\\" data-testid=\\"workflow-type-filter-button\\"><button type=\\"button\\" class=\\"icon-button svelte-1vs3on1\\" data-testid=\\"workflow-type-filter-button-button\\" aria-label=\\"Open Type filter menu\\"><div class=\\"flex items-center gap-1 truncate svelte-1o0pqx5\\">Type <svg width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"pointer-events-none\\"><title></title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg></div></button> </div> </div></th>"`;
+exports[`Table_header_cell$ > Type renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Type\\"><div><div class=\\"relative inline\\" data-testid=\\"workflow-type-filter-button\\"><button type=\\"button\\" class=\\"icon-button svelte-1vs3on1\\" data-testid=\\"workflow-type-filter-button-button\\" aria-label=\\"Open Type filter menu\\"><div class=\\"flex items-center gap-1 truncate svelte-1o0pqx5\\">Type <svg width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"pointer-events-none\\" role=\\"img\\"><title></title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg></div></button> </div> </div></th>"`;
 
-exports[`Table_header_cell$ > Workflow ID renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Workflow ID\\"><div><div class=\\"relative inline\\" data-testid=\\"workflow-id-filter-button\\"><button type=\\"button\\" class=\\"icon-button svelte-1vs3on1\\" data-testid=\\"workflow-id-filter-button-button\\" aria-label=\\"Open Workflow ID filter menu\\"><div class=\\"flex items-center gap-1 truncate svelte-1o0pqx5\\">Workflow ID <svg width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"pointer-events-none\\"><title></title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg></div></button> </div> </div></th>"`;
+exports[`Table_header_cell$ > Workflow ID renders 1`] = `"<th class=\\"workflows-summary-table-header-cell svelte-1q2ffog\\" data-testid=\\"workflows-summary-table-header-cell-Workflow ID\\"><div><div class=\\"relative inline\\" data-testid=\\"workflow-id-filter-button\\"><button type=\\"button\\" class=\\"icon-button svelte-1vs3on1\\" data-testid=\\"workflow-id-filter-button-button\\" aria-label=\\"Open Workflow ID filter menu\\"><div class=\\"flex items-center gap-1 truncate svelte-1o0pqx5\\">Workflow ID <svg width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"pointer-events-none\\" role=\\"img\\"><title></title><path d=\\"M5.5 7.5H18.5C18.75 7.5 19 7.28125 19 7.03125C19 6.78125 18.75 6.5 18.5 6.5H5.5C5.21875 6.5 5 6.75 5 7C5 7.25 5.21875 7.5 5.5 7.5ZM16.5 11.5H7.5C7.21875 11.5 7 11.75 7 12C7 12.2812 7.21875 12.5 7.5 12.5H16.5C16.75 12.5 17 12.2812 17 12.0312C17 11.75 16.75 11.5 16.5 11.5ZM13.5 16.5H10.5C10.2188 16.5 10 16.75 10 17C10 17.25 10.2188 17.5 10.5 17.5H13.5C13.75 17.5 14 17.2812 14 17.0312C14 16.7812 13.75 16.5 13.5 16.5Z\\" fill=\\"currentcolor\\"></path></svg></div></button> </div> </div></th>"`;