@kernhq/module-tracker 0.11.7 → 0.11.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kernhq/module-tracker",
-  "version": "0.11.7",
+  "version": "0.11.8",
   "description": "Kern tracker module: projects, work item types, custom fields, workflows, issues, KQL, cycles, views, reports, intake, time tracking (server + client skeleton)",
   "homepage": "https://github.com/KernAIO/module-tracker#readme",
   "license": "AGPL-3.0-only",

package/src/client/settings/CycleList.svelte

@@ -253,9 +253,13 @@ const statusLabel = (status: Cycle['status']) =>
         {/if}
 
         {#if confirmingId === cycle.id}
-          <li class="panel danger" role="alertdialog">
-            <span>{t('planning_remove_body', { name: cycle.name })}</span>
-            <div class="row">
+          <!-- The role sits on a child rather than on the `<li>`: a list item is non-interactive,
+               and Svelte refuses an interactive role on one. Every other confirmation in this
+               module already does it this way. -->
+          <li class="panel danger">
+            <div role="alertdialog" aria-label={t('planning_remove_body', { name: cycle.name })}>
+              <span>{t('planning_remove_body', { name: cycle.name })}</span>
+              <div class="row">
               <Button
                 size="sm"
                 variant="danger"
@@ -266,7 +270,8 @@ const statusLabel = (status: Cycle['status']) =>
               >
                 {t('common.delete')}
               </Button>
-              <Button size="sm" variant="ghost" onclick={() => (confirmingId = null)}>{t('common.cancel')}</Button>
+                <Button size="sm" variant="ghost" onclick={() => (confirmingId = null)}>{t('common.cancel')}</Button>
+              </div>
             </div>
           </li>
         {/if}

package/src/client/settings/PlanningList.svelte

@@ -129,12 +129,17 @@ const commitEdit = () => {
           {/if}
         </li>
         {#if confirmingId === item.id}
-          <li class="confirm" role="alertdialog">
-            <span>{t('planning_remove_body', { name: item.name })}</span>
-            <Button size="sm" variant="danger" onclick={() => { onremove(item.id); confirmingId = null }}>
-              {t('common.delete')}
-            </Button>
-            <Button size="sm" variant="ghost" onclick={() => (confirmingId = null)}>{t('common.cancel')}</Button>
+          <!-- The role sits on a child rather than on the `<li>`: a list item is non-interactive,
+               and Svelte refuses an interactive role on one. `.confirm` moves with it and now
+               declares its own `display: flex` — it had been borrowing the `<li>`'s. -->
+          <li>
+            <div class="confirm" role="alertdialog" aria-label={t('planning_remove_body', { name: item.name })}>
+              <span>{t('planning_remove_body', { name: item.name })}</span>
+              <Button size="sm" variant="danger" onclick={() => { onremove(item.id); confirmingId = null }}>
+                {t('common.delete')}
+              </Button>
+              <Button size="sm" variant="ghost" onclick={() => (confirmingId = null)}>{t('common.cancel')}</Button>
+            </div>
           </li>
         {/if}
       {:else}
@@ -226,6 +231,9 @@ li {
   color: var(--kern-ink-400);
 }
 .confirm {
+  display: flex;
+  align-items: center;
+  flex: 1;
   gap: 8px;
   font-size: 12.5px;
   color: var(--kern-danger);