beads-ui 0.1.1 → 0.2.0

package/app/views/issue-dialog.js

@@ -0,0 +1,170 @@
+// Lightweight wrapper around the native <dialog> for issue details
+import { createIssueIdRenderer } from '../utils/issue-id-renderer.js';
+
+// Provides: open(id), close(), getMount()
+// Ensures accessibility, backdrop click to close, and Esc handling.
+
+/**
+ * @typedef {{ getState: () => { selected_id: string|null } }} Store
+ */
+
+/**
+ * Create and manage the Issue Details dialog.
+ * @param {HTMLElement} mount_element - Container to attach the <dialog> to (e.g., #detail-panel)
+ * @param {Store} store - Read-only access to app state
+ * @param {() => void} onClose - Called when dialog requests close (backdrop/esc/button)
+ * @returns {{ open: (id: string) => void, close: () => void, getMount: () => HTMLElement }}
+ */
+export function createIssueDialog(mount_element, store, onClose) {
+  /** @type {HTMLDialogElement} */
+  const dialog = /** @type {any} */ (document.createElement('dialog'));
+  dialog.id = 'issue-dialog';
+  dialog.setAttribute('role', 'dialog');
+  dialog.setAttribute('aria-modal', 'true');
+
+  // Shell: header (id + close) + body mount
+  dialog.innerHTML = `
+    <div class="issue-dialog__container" part="container">
+      <header class="issue-dialog__header">
+        <div class="issue-dialog__title">
+          <span class="mono" id="issue-dialog-title"></span>
+        </div>
+        <button type="button" class="issue-dialog__close" aria-label="Close">×</button>
+      </header>
+      <div class="issue-dialog__body" id="issue-dialog-body"></div>
+    </div>
+  `;
+
+  mount_element.appendChild(dialog);
+
+  /** @type {HTMLElement} */
+  const body_mount = /** @type {any} */ (
+    dialog.querySelector('#issue-dialog-body')
+  );
+  /** @type {HTMLElement} */
+  const title_el = /** @type {any} */ (
+    dialog.querySelector('#issue-dialog-title')
+  );
+  /** @type {HTMLButtonElement} */
+  const btn_close = /** @type {any} */ (
+    dialog.querySelector('.issue-dialog__close')
+  );
+
+  /**
+   * @param {string} id
+   */
+  function setTitle(id) {
+    // Use copyable ID renderer but keep visible text as raw id for tests/clarity
+    title_el.replaceChildren();
+    title_el.appendChild(createIssueIdRenderer(String(id || '')));
+  }
+
+  // Backdrop click: when clicking the dialog itself (outside container), close
+  dialog.addEventListener('mousedown', (ev) => {
+    if (ev.target === dialog) {
+      ev.preventDefault();
+      requestClose();
+    }
+  });
+  // Esc key produces a cancel event on <dialog>
+  dialog.addEventListener('cancel', (ev) => {
+    ev.preventDefault();
+    requestClose();
+  });
+  // Close button
+  btn_close.addEventListener('click', () => requestClose());
+
+  /** @type {HTMLElement | null} */
+  let last_focus = null;
+
+  function requestClose() {
+    try {
+      if (typeof dialog.close === 'function') {
+        dialog.close();
+      } else {
+        dialog.removeAttribute('open');
+      }
+    } catch {
+      dialog.removeAttribute('open');
+    }
+    try {
+      onClose();
+    } catch {
+      // ignore consumer errors
+    }
+    // Restore focus to the element that had focus before opening
+    restoreFocus();
+  }
+
+  /**
+   * @param {string} id
+   */
+  function open(id) {
+    // Capture currently focused element to restore after closing
+    try {
+      const ae = /** @type {any} */ (document.activeElement);
+      if (ae && ae instanceof HTMLElement) {
+        last_focus = ae;
+      } else {
+        last_focus = null;
+      }
+    } catch {
+      last_focus = null;
+    }
+    setTitle(id);
+    try {
+      if (
+        'showModal' in dialog &&
+        typeof (/** @type {any} */ (dialog).showModal) === 'function'
+      ) {
+        /** @type {any} */ (dialog).showModal();
+      } else {
+        dialog.setAttribute('open', '');
+      }
+      // Focus the dialog container for keyboard users
+      setTimeout(() => {
+        try {
+          btn_close.focus();
+        } catch {
+          // ignore
+        }
+      }, 0);
+    } catch {
+      // Fallback for environments without <dialog>
+      dialog.setAttribute('open', '');
+    }
+  }
+
+  function close() {
+    try {
+      if (typeof dialog.close === 'function') {
+        dialog.close();
+      } else {
+        dialog.removeAttribute('open');
+      }
+    } catch {
+      dialog.removeAttribute('open');
+    }
+    restoreFocus();
+  }
+
+  function restoreFocus() {
+    try {
+      if (last_focus && document.contains(last_focus)) {
+        last_focus.focus();
+      }
+    } catch {
+      // ignore focus errors
+    } finally {
+      last_focus = null;
+    }
+  }
+
+  return {
+    open,
+    close,
+    getMount() {
+      return body_mount;
+    }
+  };
+}

package/app/views/issue-row.js

@@ -1,5 +1,5 @@
 import { html } from 'lit-html';
-import { issueDisplayId } from '../utils/issue-id.js';
+import { createIssueIdRenderer } from '../utils/issue-id-renderer.js';
 import { emojiForPriority } from '../utils/priority-badge.js';
 import { priority_levels } from '../utils/priority.js';
 import { statusLabel } from '../utils/status.js';
@@ -92,9 +92,9 @@ export function createIssueRowRenderer(options) {
       }
       @keydown=${
         /** @param {KeyboardEvent} e */ (e) => {
-          e.stopPropagation();
           if (e.key === 'Enter') {
             e.preventDefault();
+            e.stopPropagation();
             editing.add(k);
             request_render();
           }
@@ -143,14 +143,15 @@ export function createIssueRowRenderer(options) {
     const cur_prio = String(it.priority ?? 2);
     const is_selected = get_selected_id() === it.id;
     return html`<tr
+      role="row"
       class="${row_class} ${is_selected ? 'selected' : ''}"
       data-issue-id=${it.id}
       @click=${makeRowClick(it.id)}
     >
-      <td class="mono">${issueDisplayId(it.id)}</td>
-      <td>${createTypeBadge(it.issue_type)}</td>
-      <td>${editableText(it.id, 'title', it.title || '')}</td>
-      <td>
+      <td role="gridcell" class="mono">${createIssueIdRenderer(it.id)}</td>
+      <td role="gridcell">${createTypeBadge(it.issue_type)}</td>
+      <td role="gridcell">${editableText(it.id, 'title', it.title || '')}</td>
+      <td role="gridcell">
         <select
           class="badge-select badge--status is-${cur_status}"
           .value=${cur_status}
@@ -164,10 +165,10 @@ export function createIssueRowRenderer(options) {
           )}
         </select>
       </td>
-      <td>
+      <td role="gridcell">
         ${editableText(it.id, 'assignee', it.assignee || '', 'Unassigned')}
       </td>
-      <td>
+      <td role="gridcell">
         <select
           class="badge-select badge--priority ${'is-p' + cur_prio}"
           .value=${cur_prio}

package/app/views/list.js

@@ -1,6 +1,7 @@
 /* global NodeListOf */
 import { html, render } from 'lit-html';
 import { ISSUE_TYPES, typeLabel } from '../utils/issue-type.js';
+import { issueHashFor } from '../utils/issue-url.js';
 // issueDisplayId not used directly in this file; rendered in shared row
 import { statusLabel } from '../utils/status.js';
 import { createIssueRowRenderer } from './issue-row.js';
@@ -36,7 +37,9 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
   const row_renderer = createIssueRowRenderer({
     navigate: (id) => {
       const nav = navigate_fn || ((h) => (window.location.hash = h));
-      nav(`#/issue/${id}`);
+      /** @type {'issues'|'epics'|'board'} */
+      const view = store ? store.getState().view : 'issues';
+      nav(issueHashFor(view, id));
     },
     onUpdate: updateInline,
     requestRender: doRender,
@@ -164,7 +167,12 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
               <div class="muted" style="padding:10px 12px;">No issues</div>
             </div>`
           : html`<div class="issues-block">
-              <table class="table">
+              <table
+                class="table"
+                role="grid"
+                aria-rowcount=${String(filtered.length)}
+                aria-colcount="6"
+              >
                 <colgroup>
                   <col style="width: 100px" />
                   <col style="width: 120px" />
@@ -174,16 +182,16 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
                   <col style="width: 130px" />
                 </colgroup>
                 <thead>
-                  <tr>
-                    <th>ID</th>
-                    <th>Type</th>
-                    <th>Title</th>
-                    <th>Status</th>
-                    <th>Assignee</th>
-                    <th>Priority</th>
+                  <tr role="row">
+                    <th role="columnheader">ID</th>
+                    <th role="columnheader">Type</th>
+                    <th role="columnheader">Title</th>
+                    <th role="columnheader">Status</th>
+                    <th role="columnheader">Assignee</th>
+                    <th role="columnheader">Priority</th>
                   </tr>
                 </thead>
-                <tbody>
+                <tbody role="rowgroup">
                   ${filtered.map((it) => row_renderer(it))}
                 </tbody>
               </table>
@@ -251,6 +259,70 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
   // Keyboard navigation
   mount_element.tabIndex = 0;
   mount_element.addEventListener('keydown', (ev) => {
+    // Grid cell Up/Down navigation when focus is inside the table and not within
+    // an editable control (input/textarea/select). Preserves column position.
+    if (ev.key === 'ArrowDown' || ev.key === 'ArrowUp') {
+      /** @type {any} */
+      const tgt = /** @type {any} */ (ev.target);
+      /** @type {HTMLTableElement|null} */
+      const table =
+        tgt && typeof tgt.closest === 'function'
+          ? /** @type {any} */ (tgt.closest('#list-root table.table'))
+          : null;
+      if (table) {
+        // Do not intercept when inside native editable controls
+        const in_editable = Boolean(
+          tgt &&
+            typeof tgt.closest === 'function' &&
+            (tgt.closest('input') ||
+              tgt.closest('textarea') ||
+              tgt.closest('select'))
+        );
+        if (!in_editable) {
+          /** @type {HTMLTableCellElement|null} */
+          const cell =
+            tgt && typeof tgt.closest === 'function'
+              ? /** @type {any} */ (tgt.closest('td'))
+              : null;
+          if (cell && cell.parentElement) {
+            /** @type {HTMLTableRowElement} */
+            const row = /** @type {any} */ (cell.parentElement);
+            /** @type {HTMLTableSectionElement|null} */
+            const tbody = /** @type {any} */ (row.parentElement);
+            if (tbody && tbody.querySelectorAll) {
+              const rows = Array.from(tbody.querySelectorAll('tr'));
+              const row_idx = Math.max(0, rows.indexOf(row));
+              const col_idx = /** @type {any} */ (cell).cellIndex || 0;
+              const next_idx =
+                ev.key === 'ArrowDown'
+                  ? Math.min(row_idx + 1, rows.length - 1)
+                  : Math.max(row_idx - 1, 0);
+              const next_row = /** @type {HTMLTableRowElement} */ (
+                rows[next_idx]
+              );
+              /** @type {HTMLTableCellElement|null} */
+              const next_cell = /** @type {any} */ (
+                next_row && next_row.cells ? next_row.cells[col_idx] : null
+              );
+              if (next_cell) {
+                /** @type {HTMLElement|null} */
+                const focusable = /** @type {any} */ (
+                  next_cell.querySelector(
+                    'button:not([disabled]), [tabindex]:not([tabindex="-1"]), a[href], select:not([disabled]), input:not([disabled]):not([type="hidden"]), textarea:not([disabled])'
+                  )
+                );
+                if (focusable && typeof focusable.focus === 'function') {
+                  ev.preventDefault();
+                  focusable.focus();
+                  return;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
     /** @type {HTMLTableSectionElement|null} */
     const tbody = /** @type {any} */ (
       mount_element.querySelector('#list-root tbody')
@@ -299,7 +371,9 @@ export function createListView(mount_element, sendFn, navigate_fn, store) {
       const id = current ? current.getAttribute('data-issue-id') : '';
       if (id) {
         const nav = navigate_fn || ((h) => (window.location.hash = h));
-        nav(`#/issue/${id}`);
+        /** @type {'issues'|'epics'|'board'} */
+        const view = store ? store.getState().view : 'issues';
+        nav(issueHashFor(view, id));
       }
     }
   });