collabmd 0.1.48 → 0.1.49

package/src/client/presentation/agent-connection-controller.js

@@ -0,0 +1,255 @@
+import { escapeHtml } from '../domain/vault-utils.js';
+
+function createAgentSetup({ authRequired, endpoint }) {
+  return [
+    `MCP endpoint: ${endpoint}`,
+    'Transport: Streamable HTTP',
+    `Authorization: ${authRequired ? 'Bearer $COLLABMD_ACCESS_TOKEN' : 'None'}`,
+  ].join('\n');
+}
+
+function createAgentTokenExport(token) {
+  return `export COLLABMD_ACCESS_TOKEN='${String(token).replaceAll("'", "'\\''")}'`;
+}
+
+function formatDate(value) {
+  return value ? new Date(value).toLocaleString() : 'Never';
+}
+
+export class AgentConnectionController {
+  constructor({ apiClient, closeToolbarMenu, content, dialog, runtimeConfig, toastController, trigger }) {
+    this.apiClient = apiClient;
+    this.closeToolbarMenu = closeToolbarMenu;
+    this.content = content;
+    this.dialog = dialog;
+    this.runtimeConfig = runtimeConfig;
+    this.toastController = toastController;
+    this.trigger = trigger;
+    this.secretToken = '';
+    this.config = {
+      authRequired: runtimeConfig.auth?.strategy !== 'none',
+      endpoint: runtimeConfig.agentAccess?.endpoint || '',
+      managed: Boolean(runtimeConfig.agentAccess?.managed),
+    };
+    this.endpoint = new URL(this.config.endpoint, window.location.origin).toString();
+
+    this.trigger?.classList.toggle('hidden', !runtimeConfig.agentAccess?.enabled);
+    this.trigger?.addEventListener('click', () => void this.open());
+    this.dialog?.addEventListener('close', () => {
+      this.secretToken = '';
+      this.content?.replaceChildren();
+      this.trigger?.focus?.();
+    });
+    this.dialog?.addEventListener('click', (event) => void this.handleClick(event));
+    this.dialog?.addEventListener('submit', (event) => void this.handleSubmit(event));
+  }
+
+  async open() {
+    this.closeToolbarMenu?.();
+    this.dialog?.showModal?.();
+    this.renderStatus('Loading Agent Access…');
+    try {
+      const connections = this.config.managed
+        ? (await this.apiClient.listConnections()).connections
+        : [];
+      this.renderOverview(connections);
+    } catch (error) {
+      this.renderStatus(error.message || 'Failed to load Agent Access', { error: true });
+    }
+  }
+
+  renderStatus(message, { error = false } = {}) {
+    if (!this.content) return;
+    this.content.innerHTML = `<p class="agent-connection-status${error ? ' is-error' : ''}" role="status">${escapeHtml(message)}</p>`;
+  }
+
+  renderOverview(connections = []) {
+    const connectionMarkup = connections.length > 0
+      ? connections.map((connection) => `
+        <article class="agent-connection-card">
+          <div>
+            <strong>${escapeHtml(connection.label)}</strong>
+            <span>${escapeHtml(connection.scopes.join(', '))}</span>
+            <small>Expires ${escapeHtml(formatDate(connection.expiresAt))}</small>
+          </div>
+          <button class="ui-button ui-button--secondary ui-button--compact" type="button" data-agent-revoke="${escapeHtml(connection.id)}">Revoke</button>
+        </article>
+      `).join('')
+      : `
+        <div class="agent-connection-empty">
+          <strong>Connect your first agent</strong>
+          <p>Choose its access, create a secure token, then copy the setup into your agent.</p>
+        </div>
+      `;
+    const management = this.config.managed
+      ? `<button class="ui-button ui-button--primary" type="button" data-agent-create>${connections.length > 0 ? 'New connection' : 'Start setup'}</button>`
+      : `
+        <section class="agent-connection-empty">
+          <strong>No authentication required</strong>
+          <ol class="agent-connection-steps">
+            <li>Copy the connection details below into your agent.</li>
+            <li>Add this CollabMD MCP endpoint and restart the agent.</li>
+            <li>Anyone who can reach this no-auth workspace can use its read and edit tools.</li>
+          </ol>
+        </section>
+      `;
+    const connectionsSection = this.config.managed
+      ? `
+        <section class="agent-connection-section">
+          <h3>Connections</h3>
+          <div class="agent-connection-list">${connectionMarkup}</div>
+        </section>
+      `
+      : '';
+    this.content.innerHTML = `
+      ${connectionsSection}
+      ${this.config.managed ? '' : management}
+      <details class="agent-connection-details">
+        <summary>Connection details</summary>
+        <code>${escapeHtml(this.endpoint)}</code>
+        <p>Streamable HTTP · ${this.config.authRequired ? 'Bearer token' : 'No authentication'} · Read and edit tools</p>
+      </details>
+      <div class="agent-connection-actions">
+        ${this.config.managed ? management : '<button class="ui-button ui-button--primary" type="button" data-agent-copy-setup>Copy connection details</button>'}
+        <button class="ui-button ui-button--ghost" type="button" data-agent-close>Close</button>
+      </div>
+      <p class="agent-connection-live" role="status" aria-live="polite"></p>
+    `;
+  }
+
+  renderCreate() {
+    this.content.innerHTML = `
+      <form class="agent-connection-form" data-agent-create-form>
+        <header class="agent-connection-step-header">
+          <span>Step 1 of 2</span>
+          <h3>Choose access</h3>
+          <p>You can revoke this connection at any time.</p>
+        </header>
+        <label class="app-dialog-field">
+          <span class="app-dialog-label">Connection name</span>
+          <input class="ui-input" name="label" maxlength="80" value="My Agent" required>
+        </label>
+        <fieldset class="agent-connection-scopes">
+          <legend>Access</legend>
+          <label><input type="checkbox" checked disabled> Read Vault Content</label>
+          <label><input type="checkbox" name="edit" checked> Edit and create supported text files</label>
+        </fieldset>
+        <p class="agent-connection-note">Token expires after 30 days and can be revoked here. Delete, rename, Git, and publish are not exposed.</p>
+        <div class="agent-connection-actions">
+          <button class="ui-button ui-button--secondary" type="button" data-agent-back>Back</button>
+          <button class="ui-button ui-button--primary" type="submit">Create secure token</button>
+        </div>
+        <p class="agent-connection-live" role="status" aria-live="polite"></p>
+      </form>
+    `;
+  }
+
+  renderToken({ token }) {
+    this.secretToken = token;
+    const setup = createAgentSetup({
+      authRequired: this.config.authRequired,
+      endpoint: this.endpoint,
+    });
+    this.content.innerHTML = `
+      <header class="agent-connection-step-header">
+        <span>Step 2 of 2</span>
+        <h3>Finish setup in your MCP client</h3>
+        <p class="agent-connection-warning">The token is shown once. Finish these steps before closing.</p>
+      </header>
+      <ol class="agent-connection-steps agent-connection-steps--setup">
+        <li>
+          <div><strong>Save the access token</strong><span>Run the copied command in the terminal that starts your MCP client.</span></div>
+          <button class="ui-button ui-button--primary" type="button" data-agent-copy-token>Copy token command</button>
+        </li>
+        <li>
+          <div><strong>Add this workspace</strong><span>Paste the setup into your MCP client.</span></div>
+          <button class="ui-button ui-button--secondary" type="button" data-agent-copy-setup>Copy MCP setup</button>
+        </li>
+      </ol>
+      <details class="agent-connection-details">
+        <summary>View manual setup</summary>
+        <input class="ui-input agent-connection-token" value="${escapeHtml(token)}" readonly aria-label="Agent Connection token">
+        <pre><code>${escapeHtml(setup)}</code></pre>
+      </details>
+      <div class="agent-connection-actions">
+        <button class="ui-button ui-button--primary" type="button" data-agent-close>Done</button>
+      </div>
+      <p class="agent-connection-live" role="status" aria-live="polite"></p>
+    `;
+  }
+
+  async refresh() {
+    const connections = this.config.managed
+      ? (await this.apiClient.listConnections()).connections
+      : [];
+    this.renderOverview(connections);
+  }
+
+  setLiveMessage(message) {
+    const live = this.content?.querySelector('.agent-connection-live');
+    if (live) live.textContent = message;
+  }
+
+  async copy(text, message) {
+    await navigator.clipboard.writeText(text);
+    this.setLiveMessage(message);
+  }
+
+  async handleClick(event) {
+    const target = event.target.closest('button');
+    if (!target) return;
+    if (target.dataset.agentClose != null) {
+      this.dialog.close();
+      return;
+    }
+    if (target.dataset.agentCreate != null) {
+      this.renderCreate();
+      return;
+    }
+    if (target.dataset.agentBack != null) {
+      await this.refresh();
+      return;
+    }
+    if (target.dataset.agentCopyToken != null) {
+      await this.copy(createAgentTokenExport(this.secretToken), 'Token command copied — run it in the agent terminal.');
+      return;
+    }
+    if (target.dataset.agentCopySetup != null) {
+      await this.copy(createAgentSetup({
+        authRequired: this.config.authRequired,
+        endpoint: this.endpoint,
+      }), 'Setup copied — add it to your MCP client.');
+      return;
+    }
+    if (target.dataset.agentRevoke) {
+      if (!window.confirm('Revoke this Agent Connection?')) return;
+      try {
+        await this.apiClient.revokeConnection(target.dataset.agentRevoke);
+        await this.refresh();
+        this.setLiveMessage('Agent Connection revoked');
+      } catch (error) {
+        this.toastController?.show(error.message || 'Failed to revoke Agent Connection');
+      }
+    }
+  }
+
+  async handleSubmit(event) {
+    const form = event.target.closest('[data-agent-create-form]');
+    if (!form) return;
+    event.preventDefault();
+    const data = new FormData(form);
+    const submit = form.querySelector('[type="submit"]');
+    submit.disabled = true;
+    try {
+      const result = await this.apiClient.createConnection({
+        clientKind: 'generic',
+        label: data.get('label'),
+        scopes: data.get('edit') === 'on' ? ['vault:read', 'vault:edit'] : ['vault:read'],
+      });
+      this.renderToken(result);
+    } catch (error) {
+      this.setLiveMessage(error.message || 'Failed to create Agent Connection');
+      submit.disabled = false;
+    }
+  }
+}

package/src/client/presentation/backlinks-panel.js

@@ -13,6 +13,7 @@ export class BacklinksPanel {
     headerPanelElement = null,
     inlinePanelElement = null,
     loadBacklinks = null,
+    onBeforeToggle = null,
     onFileSelect,
     panelElement,
   }) {
@@ -21,6 +22,7 @@ export class BacklinksPanel {
     this.panelRoot = panelElement;
     this.inlinePanel = inlinePanelElement;
     this.loadBacklinks = loadBacklinks;
+    this.onBeforeToggle = onBeforeToggle;
     this.onFileSelect = onFileSelect;
 
     this._expanded = false;
@@ -102,6 +104,7 @@ export class BacklinksPanel {
     this.panels.forEach((refs) => {
       refs.header?.addEventListener('click', () => {
         if (this._backlinks.length === 0) return;
+        this.onBeforeToggle?.();
         this._expanded = !this._expanded;
         this._pendingOutsidePointer = null;
         this._applyExpandState();

package/src/client/presentation/bases-preview-controller.js

@@ -346,10 +346,10 @@ function renderSortPanel(result) {
       <div class="bases-panel-section">
         <div class="bases-panel-title">Group by</div>
         <div class="bases-sort-row">
-          <select class="${escapeHtml(inputClassNames({ extra: 'bases-select bases-sort-property' }))}" data-base-group-by-property>
+          <select class="${escapeHtml(inputClassNames({ extra: 'bases-select bases-sort-property' }))}" data-base-group-by-property aria-label="Group by property">
             ${createSelectOptions(result, { allowBlank: true, selected: viewConfig.groupBy?.property ?? '' })}
           </select>
-          <select class="${escapeHtml(inputClassNames({ extra: 'bases-select bases-sort-direction' }))}" data-base-group-by-direction${viewConfig.groupBy?.property ? '' : ' disabled'}>
+          <select class="${escapeHtml(inputClassNames({ extra: 'bases-select bases-sort-direction' }))}" data-base-group-by-direction aria-label="Group direction"${viewConfig.groupBy?.property ? '' : ' disabled'}>
             ${groupDirections.map((direction) => `<option value="${escapeHtml(direction.id)}"${direction.id === (viewConfig.groupBy?.direction ?? 'asc') ? ' selected' : ''}>${escapeHtml(direction.label)}</option>`).join('')}
           </select>
           <button type="button" class="${escapeHtml(buttonClassNames({ variant: 'secondary', size: 'compact' }))}" data-base-clear-group-by${viewConfig.groupBy?.property ? '' : ' disabled'}>Clear</button>
@@ -366,15 +366,15 @@ function renderSortPanel(result) {
     ];
     return `
               <div class="bases-sort-row">
-                <select class="${escapeHtml(inputClassNames({ extra: 'bases-select bases-sort-property' }))}" data-base-sort-property="${index}">
+                <select class="${escapeHtml(inputClassNames({ extra: 'bases-select bases-sort-property' }))}" data-base-sort-property="${index}" aria-label="Sort rule ${index + 1} property">
                   ${createSelectOptions(result, { selected: sortConfig.property })}
                 </select>
-                <select class="${escapeHtml(inputClassNames({ extra: 'bases-select bases-sort-direction' }))}" data-base-sort-direction="${index}">
+                <select class="${escapeHtml(inputClassNames({ extra: 'bases-select bases-sort-direction' }))}" data-base-sort-direction="${index}" aria-label="Sort rule ${index + 1} direction">
                   ${directions.map((direction) => `<option value="${escapeHtml(direction.id)}"${direction.id === sortConfig.direction ? ' selected' : ''}>${escapeHtml(direction.label)}</option>`).join('')}
                 </select>
-                <button type="button" class="${escapeHtml(buttonClassNames({ variant: 'secondary', size: 'compact' }))}" data-base-sort-move="${index}:up"${index === 0 ? ' disabled' : ''}>↑</button>
-                <button type="button" class="${escapeHtml(buttonClassNames({ variant: 'secondary', size: 'compact' }))}" data-base-sort-move="${index}:down"${index === sorts.length - 1 ? ' disabled' : ''}>↓</button>
-                <button type="button" class="${escapeHtml(buttonClassNames({ variant: 'secondary', size: 'compact' }))}" data-base-sort-delete="${index}">Delete</button>
+                <button type="button" class="${escapeHtml(buttonClassNames({ variant: 'secondary', size: 'compact' }))}" data-base-sort-move="${index}:up" aria-label="Move sort rule ${index + 1} up"${index === 0 ? ' disabled' : ''}>↑</button>
+                <button type="button" class="${escapeHtml(buttonClassNames({ variant: 'secondary', size: 'compact' }))}" data-base-sort-move="${index}:down" aria-label="Move sort rule ${index + 1} down"${index === sorts.length - 1 ? ' disabled' : ''}>↓</button>
+                <button type="button" class="${escapeHtml(buttonClassNames({ variant: 'secondary', size: 'compact' }))}" data-base-sort-delete="${index}" aria-label="Delete sort rule ${index + 1}">Delete</button>
               </div>
             `;
   }).join('')}
@@ -389,6 +389,10 @@ function encodePath(path = []) {
   return path.join('.');
 }
 
+function formatFilterPath(path = []) {
+  return path.map((index) => index + 1).join('.');
+}
+
 function decodePath(value = '') {
   return String(value ?? '')
     .split('.')
@@ -773,9 +777,10 @@ function renderFilterSuggestionList(presentation, currentValue = '') {
 
 function renderFilterValueCombobox(result, rule, path, entry) {
   const presentation = buildFilterValuePresentation(result, rule, path, entry);
+  const filterLabel = `Filter ${formatFilterPath(path)}`;
   return `
     <div class="bases-filter-value-combobox${presentation.suggestionsEnabled ? ' has-suggestions' : ''}">
-      <input class="${escapeHtml(presentation.valueInputClasses)}" type="text" value="${escapeHtml(rule.value ?? '')}" data-base-filter-value="${escapeHtml(presentation.encodedPath)}"${presentation.suggestionsEnabled ? ` aria-controls="${presentation.suggestionListId}" aria-haspopup="listbox" aria-autocomplete="list" autocomplete="off"` : ''}${presentation.valueDisabled ? ' disabled' : ''}>
+      <input class="${escapeHtml(presentation.valueInputClasses)}" type="text" value="${escapeHtml(rule.value ?? '')}" data-base-filter-value="${escapeHtml(presentation.encodedPath)}" aria-label="${filterLabel} value"${presentation.suggestionsEnabled ? ` aria-controls="${presentation.suggestionListId}" aria-haspopup="listbox" aria-autocomplete="list" autocomplete="off"` : ''}${presentation.valueDisabled ? ' disabled' : ''}>
       ${renderFilterSuggestionList(presentation, rule.value ?? '')}
     </div>
   `;
@@ -783,17 +788,18 @@ function renderFilterValueCombobox(result, rule, path, entry) {
 
 function renderFilterRule(result, rule, path, entry) {
   const presentation = buildFilterValuePresentation(result, rule, path, entry);
+  const filterLabel = `Filter ${formatFilterPath(path)}`;
 
   return `
     <div class="bases-filter-row">
-      <select class="${escapeHtml(inputClassNames({ extra: 'bases-select bases-filter-property' }))}" data-base-filter-property="${escapeHtml(presentation.encodedPath)}">
+      <select class="${escapeHtml(inputClassNames({ extra: 'bases-select bases-filter-property' }))}" data-base-filter-property="${escapeHtml(presentation.encodedPath)}" aria-label="${filterLabel} property">
         ${getPropertyOptionsMarkup(result, rule.propertyId)}
       </select>
-      <select class="${escapeHtml(inputClassNames({ extra: 'bases-select bases-filter-operator' }))}" data-base-filter-operator="${escapeHtml(presentation.encodedPath)}">
+      <select class="${escapeHtml(inputClassNames({ extra: 'bases-select bases-filter-operator' }))}" data-base-filter-operator="${escapeHtml(presentation.encodedPath)}" aria-label="${filterLabel} operator">
         ${presentation.operators.map((operator) => `<option value="${escapeHtml(operator)}"${operator === rule.operator ? ' selected' : ''}>${escapeHtml(operator)}</option>`).join('')}
       </select>
       ${renderFilterValueCombobox(result, rule, path, entry)}
-      <button type="button" class="${escapeHtml(buttonClassNames({ variant: 'secondary', size: 'compact' }))}" data-base-filter-remove="${escapeHtml(presentation.encodedPath)}">Delete</button>
+      <button type="button" class="${escapeHtml(buttonClassNames({ variant: 'secondary', size: 'compact' }))}" data-base-filter-remove="${escapeHtml(presentation.encodedPath)}" aria-label="Delete ${filterLabel.toLowerCase()}">Delete</button>
     </div>
   `;
 }
@@ -819,6 +825,7 @@ function syncFilterValueCombobox(entry, result, path, { fallbackToFullRender = t
   combobox.classList.toggle('has-suggestions', presentation.suggestionsEnabled);
   input.className = presentation.valueInputClasses;
   input.disabled = presentation.valueDisabled;
+  input.setAttribute('aria-label', `Filter ${formatFilterPath(path)} value`);
   if (input.value !== String(rule.value ?? '')) {
     input.value = String(rule.value ?? '');
   }
@@ -861,17 +868,18 @@ function forEachFilterRule(node, callback, path = []) {
 
 function renderFilterGroup(result, group, path, entry, { isRoot = false } = {}) {
   const encodedPath = encodePath(path);
+  const groupLabel = isRoot ? 'Root filter group' : `Filter group ${formatFilterPath(path)}`;
   return `
     <div class="bases-filter-group"${isRoot ? ' data-base-filter-root' : ''}>
       <div class="bases-filter-group-header">
-        <select class="${escapeHtml(inputClassNames({ extra: 'bases-select bases-filter-conjunction' }))}" data-base-filter-conjunction="${escapeHtml(encodedPath)}">
+        <select class="${escapeHtml(inputClassNames({ extra: 'bases-select bases-filter-conjunction' }))}" data-base-filter-conjunction="${escapeHtml(encodedPath)}" aria-label="${groupLabel} condition">
           ${['and', 'or', 'not'].map((conjunction) => `<option value="${conjunction}"${group.conjunction === conjunction ? ' selected' : ''}>${escapeHtml({
     and: 'All the following are true',
     not: 'None of the following are true',
     or: 'Any of the following are true',
   }[conjunction])}</option>`).join('')}
         </select>
-        ${isRoot ? '' : `<button type="button" class="${escapeHtml(buttonClassNames({ variant: 'secondary', size: 'compact' }))}" data-base-filter-remove="${escapeHtml(encodedPath)}">Delete group</button>`}
+        ${isRoot ? '' : `<button type="button" class="${escapeHtml(buttonClassNames({ variant: 'secondary', size: 'compact' }))}" data-base-filter-remove="${escapeHtml(encodedPath)}" aria-label="Delete ${groupLabel.toLowerCase()}">Delete group</button>`}
       </div>
       <div class="bases-filter-children">
         ${(group.children ?? []).map((child, index) => (
@@ -881,8 +889,8 @@ function renderFilterGroup(result, group, path, entry, { isRoot = false } = {})
   )).join('')}
       </div>
       <div class="bases-filter-actions-row">
-        <button type="button" class="${escapeHtml(buttonClassNames({ variant: 'secondary', size: 'compact' }))}" data-base-filter-add-rule="${escapeHtml(encodedPath)}">Add filter</button>
-        <button type="button" class="${escapeHtml(buttonClassNames({ variant: 'secondary', size: 'compact' }))}" data-base-filter-add-group="${escapeHtml(encodedPath)}">Add filter group</button>
+        <button type="button" class="${escapeHtml(buttonClassNames({ variant: 'secondary', size: 'compact' }))}" data-base-filter-add-rule="${escapeHtml(encodedPath)}" aria-label="Add filter to ${groupLabel.toLowerCase()}">Add filter</button>
+        <button type="button" class="${escapeHtml(buttonClassNames({ variant: 'secondary', size: 'compact' }))}" data-base-filter-add-group="${escapeHtml(encodedPath)}" aria-label="Add filter group to ${groupLabel.toLowerCase()}">Add filter group</button>
       </div>
     </div>
   `;
@@ -911,6 +919,7 @@ function renderFilterPanel(result, entry) {
       ${mode === 'advanced'
       ? `
         <label class="bases-filter-advanced-label">
+          <span class="bases-panel-title">Filter expression</span>
           <textarea class="${escapeHtml(inputClassNames({ extra: 'bases-filter-advanced' }))}" data-base-filter-advanced>${escapeHtml(rawText)}</textarea>
         </label>
         <div class="bases-filter-actions-row">
@@ -1687,7 +1696,7 @@ export class BasesPreviewController {
     entry.requestVersion = requestVersion;
     const hasShell = Boolean(findShellElement(entry));
     if (!hasShell) {
-      replaceChildrenFromHtml(entry.placeholder, '<div class="preview-shell">Loading base…</div>');
+      replaceChildrenFromHtml(entry.placeholder, '<div class="preview-shell" role="status" aria-live="polite">Loading base…</div>');
     }
     try {
       const response = await this.vaultApiClient.queryBase({
@@ -1711,11 +1720,11 @@ export class BasesPreviewController {
         const shell = findShellElement(entry);
         const content = shell?.querySelector?.('[data-base-content]') ?? null;
         if (content) {
-          replaceChildrenFromHtml(content, `<div class="preview-shell">Failed to load base: ${escapeHtml(error.message || 'Unknown error')}</div>`);
+          replaceChildrenFromHtml(content, `<div class="preview-shell" role="alert">Failed to load base: ${escapeHtml(error.message || 'Unknown error')}</div>`);
           return;
         }
       }
-      replaceChildrenFromHtml(entry.placeholder, `<div class="preview-shell">Failed to load base: ${escapeHtml(error.message || 'Unknown error')}</div>`);
+      replaceChildrenFromHtml(entry.placeholder, `<div class="preview-shell" role="alert">Failed to load base: ${escapeHtml(error.message || 'Unknown error')}</div>`);
     }
   }
 

package/src/client/presentation/comment-ui/comment-ui-card.js

@@ -314,7 +314,8 @@ function createComposer() {
   textarea.className = inputClassNames({ extra: 'comment-card-input' });
   textarea.rows = 4;
   textarea.maxLength = COMMENT_BODY_MAX_LENGTH;
-  textarea.placeholder = 'Add context, feedback, or a question...';
+  textarea.setAttribute('aria-label', 'Add comment');
+  textarea.placeholder = 'Add context, feedback, or a question…';
   textarea.value = this.activeCard?.composerDraft?.value ?? '';
 
   const actions = document.createElement('div');
@@ -575,7 +576,8 @@ function createReplyComposer(thread) {
   textarea.className = inputClassNames({ extra: 'comment-card-input' });
   textarea.rows = 3;
   textarea.maxLength = COMMENT_BODY_MAX_LENGTH;
-  textarea.placeholder = 'Reply to thread...';
+  textarea.setAttribute('aria-label', 'Reply to thread');
+  textarea.placeholder = 'Reply to thread…';
   textarea.value = draft?.value ?? '';
 
   const actions = document.createElement('div');

package/src/client/presentation/create-menu-presenter.js

@@ -13,7 +13,7 @@ function getFocusableItems(container) {
     return [];
   }
 
-  return Array.from(container.querySelectorAll('.create-menu-item'));
+  return Array.from(container.querySelectorAll('.create-menu-item, .file-action-sheet-item:not(:disabled)'));
 }
 
 export class CreateMenuPresenter {
@@ -23,10 +23,10 @@ export class CreateMenuPresenter {
     this.mobileBreakpointQuery = mobileBreakpointQuery;
     this.activeAnchor = null;
     this.desktopMenu = null;
-    this.mobileBackdrop = null;
     this.mobileSheet = null;
     this.documentPointerDownHandler = null;
     this.windowResizeHandler = null;
+    this.blockingModalHandler = () => this.close();
     this.boundClose = () => this.close();
   }
 
@@ -71,15 +71,12 @@ export class CreateMenuPresenter {
       this.desktopMenu = null;
     }
 
-    if (this.mobileBackdrop) {
-      this.mobileBackdrop.remove();
-      this.mobileBackdrop = null;
-    }
-
     if (this.mobileSheet) {
+      if (this.mobileSheet.open) this.mobileSheet.close();
       this.mobileSheet.remove();
       this.mobileSheet = null;
     }
+    document.removeEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
 
     if (this.documentPointerDownHandler) {
       document.removeEventListener('pointerdown', this.documentPointerDownHandler);
@@ -136,13 +133,9 @@ export class CreateMenuPresenter {
   }
 
   openMobileSheet({ items, title }) {
-    const backdrop = document.createElement('button');
-    backdrop.type = 'button';
-    backdrop.className = 'file-action-sheet-backdrop';
-    backdrop.setAttribute('aria-label', `Close ${title.toLowerCase()} menu`);
-
-    const sheet = document.createElement('div');
+    const sheet = document.createElement('dialog');
     sheet.className = 'file-action-sheet create-action-sheet';
+    sheet.setAttribute('aria-label', title);
 
     const header = document.createElement('div');
     header.className = 'create-action-sheet-header';
@@ -163,13 +156,21 @@ export class CreateMenuPresenter {
     });
     sheet.appendChild(cancelButton);
 
-    backdrop.addEventListener('click', () => {
+    sheet.addEventListener('cancel', (event) => {
+      event.preventDefault();
       this.close();
     });
+    sheet.addEventListener('click', (event) => {
+      const bounds = sheet.getBoundingClientRect();
+      if (event.clientX < bounds.left || event.clientX > bounds.right
+        || event.clientY < bounds.top || event.clientY > bounds.bottom) this.close();
+    });
 
-    document.body.append(backdrop, sheet);
-    this.mobileBackdrop = backdrop;
+    document.body.append(sheet);
+    document.addEventListener('collabmd:close-custom-modals', this.blockingModalHandler);
     this.mobileSheet = sheet;
+    sheet.showModal();
+    getFocusableItems(sheet)[0]?.focus();
   }
 
   renderMenuItems(container, items, { mobile = false } = {}) {
@@ -198,6 +199,8 @@ export class CreateMenuPresenter {
       const icon = document.createElement('span');
       icon.className = 'create-menu-item-icon';
       icon.setAttribute('aria-hidden', 'true');
+      // Menu icons are fixed application-owned markup.
+      // pi-lens-ignore: no-inner-html-js
       icon.innerHTML = item.icon || '';
       button.appendChild(icon);