WebAIM accessibility fixes

locale/en.js

@@ -1194,6 +1194,7 @@ export default {
   context_enable_option: 'Enable',
   add_comment: 'Add comment',
   delete_comment: 'Delete comment',
+  comment_text_label: 'Comment text',
   view_in_canvas: 'View in canvas',
   exit_canvas_view: 'Stop orbiting object',
   detach_block_option: 'Detach',

main/blocklyinit.js

@@ -753,16 +753,62 @@ export function initializeWorkspace() {
   }
   workspaceSearch.init();
   workspaceSearch.setSearchPlaceholder(translate('workspace_search_placeholder'));
+  // @blockly/plugin-workspace-search's createTextInput() only sets a
+  // placeholder, never an accessible name.
+  workspaceSearch.inputElement?.setAttribute('aria-label', translate('workspace_search_placeholder'));
   window.flockWorkspaceSearch = workspaceSearch;
 
+  // Comment textareas (block-comment bubbles and standalone workspace
+  // comments both render a <textarea class="blocklyCommentText">) only ever
+  // get a placeholder from Blockly core, never an accessible name, and are
+  // created on demand whenever a comment is opened/added.
+  const labelCommentTextarea = (el) => {
+    if (el.tagName === 'TEXTAREA' && el.classList.contains('blocklyCommentText')) {
+      el.setAttribute('aria-label', translate('comment_text_label'));
+    }
+  };
+  const refreshCommentTextareaLabels = () =>
+    workspace
+      .getInjectionDiv()
+      .querySelectorAll('textarea.blocklyCommentText')
+      .forEach(labelCommentTextarea);
+  refreshCommentTextareaLabels();
+  // Re-applies comment_text_label to textareas already mounted when the
+  // language changes; new ones are covered by the MutationObserver below.
+  window.flockRefreshCommentTextareaLabels = refreshCommentTextareaLabels;
+  new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (!(node instanceof Element)) continue;
+        labelCommentTextarea(node);
+        node.querySelectorAll?.('textarea.blocklyCommentText').forEach(labelCommentTextarea);
+      }
+    }
+  }).observe(workspace.getInjectionDiv(), { childList: true, subtree: true });
+
   // Shared label map populated by buildSearchIndex (overrideSearchPlugin), used by getBlockLabel
   workspace.flockBlockLabelMap ??= new Map();
 
+  // @blockly/toolbox-search's createDom_() wipes the category row's label
+  // span via replaceChildren(), leaving the treeitem's aria-labelledby
+  // pointing at an id that no longer exists, and never gives the <input>
+  // itself an accessible name (placeholder alone doesn't count).
+  const fixSearchCategoryAria = (input) => {
+    const label = translate('toolbox_search_placeholder');
+    const treeItem = input.closest('[role="treeitem"]');
+    if (treeItem?.getAttribute('aria-labelledby') === 'toolbox-search-input.label') {
+      treeItem.removeAttribute('aria-labelledby');
+      treeItem.setAttribute('aria-label', label);
+    }
+    input.setAttribute('aria-label', label);
+  };
+
   // Mobile: custom HTML search results panel (bypasses the SVG flyout entirely)
   requestAnimationFrame(() => {
     let searchInput = document.querySelector(".blocklyToolbox input[type='search']");
     if (!searchInput) return;
     searchInput.placeholder = translate('toolbox_search_placeholder');
+    fixSearchCategoryAria(searchInput);
 
     let originalParent = searchInput.parentElement;
     const isMobile = isMobileSearchLayout;
@@ -1102,6 +1148,7 @@ export function initializeWorkspace() {
         const newInput = document.querySelector(".blocklyToolbox input[type='search']");
         if (!newInput) return;
         newInput.placeholder = translate('toolbox_search_placeholder');
+        fixSearchCategoryAria(newInput);
         searchInput = newInput;
         originalParent = newInput.parentElement;
         searchCategory = workspace
@@ -1127,7 +1174,6 @@ export function initializeWorkspace() {
   const wsMobileInput = document.createElement('input');
   wsMobileInput.type = 'text';
   wsMobileInput.className = 'ws-search-mobile-input';
-  wsMobileInput.placeholder = translate('workspace_search_placeholder');
   wsMobileInput.setAttribute('autocomplete', 'one-time-code');
 
   const wsMobileCount = document.createElement('span');
@@ -1137,23 +1183,31 @@ export function initializeWorkspace() {
   const wsMobilePrev = document.createElement('button');
   wsMobilePrev.type = 'button';
   wsMobilePrev.className = 'ws-search-mobile-btn';
-  wsMobilePrev.setAttribute('aria-label', translate('shortcut_select_previous_result'));
   wsMobilePrev.textContent = '▲';
 
   const wsMobileNext = document.createElement('button');
   wsMobileNext.type = 'button';
   wsMobileNext.className = 'ws-search-mobile-btn';
-  wsMobileNext.setAttribute('aria-label', translate('shortcut_select_next_result'));
   wsMobileNext.textContent = '▼';
 
   const wsMobileClose = document.createElement('button');
   wsMobileClose.type = 'button';
   wsMobileClose.className = 'ws-search-mobile-btn ws-search-mobile-close';
-  wsMobileClose.setAttribute('aria-label', translate('close'));
   wsMobileClose.textContent = '×';
 
   wsMobileBar.append(wsMobileInput, wsMobileCount, wsMobilePrev, wsMobileNext, wsMobileClose);
 
+  const refreshWsMobileSearchLabels = () => {
+    const searchLabel = translate('workspace_search_placeholder');
+    wsMobileInput.placeholder = searchLabel;
+    wsMobileInput.setAttribute('aria-label', searchLabel);
+    wsMobilePrev.setAttribute('aria-label', translate('shortcut_select_previous_result'));
+    wsMobileNext.setAttribute('aria-label', translate('shortcut_select_next_result'));
+    wsMobileClose.setAttribute('aria-label', translate('close'));
+  };
+  refreshWsMobileSearchLabels();
+  window.flockRefreshMobileWorkspaceSearchLabels = refreshWsMobileSearchLabels;
+
   const updateWsMobileCount = () => {
     const total = workspaceSearch.blocks?.length ?? 0;
     const idx = workspaceSearch.currentBlockIndex ?? -1;

main/translation.js

@@ -121,6 +121,9 @@ export async function setLanguage(language) {
 
   // Update workspace search placeholder and toolbar button
   window.flockWorkspaceSearch?.setSearchPlaceholder?.(translate('workspace_search_placeholder'));
+  window.flockWorkspaceSearch?.inputElement?.setAttribute('aria-label', translate('workspace_search_placeholder'));
+  window.flockRefreshMobileWorkspaceSearchLabels?.();
+  window.flockRefreshCommentTextareaLabels?.();
   const wsSearchBtn = document.getElementById('workspaceSearchBtn');
   if (wsSearchBtn) {
     const label = translate('workspace_search_placeholder');

ui/contextmenu.js

@@ -661,6 +661,8 @@ export function initContextMenus(workspace) {
     const blockToolbar = document.createElement('div');
     blockToolbar.className = 'fc-block-toolbar';
     blockToolbar.setAttribute('role', 'toolbar');
+    blockToolbar.setAttribute('aria-hidden', 'true');
+    blockToolbar.inert = true;
     document.body.appendChild(blockToolbar);
 
     // Keyboard-only overlay of shortcut-letter badges, one per visible button.
@@ -1108,6 +1110,8 @@ export function initContextMenus(workspace) {
           : getToolbarLabel('view_in_canvas', 'View in canvas')
       );
       blockToolbar.classList.add('visible');
+      blockToolbar.removeAttribute('aria-hidden');
+      blockToolbar.inert = false;
       // Clear any stale badges from a previous keyboard selection; in keyboard
       // mode positionBlockToolbar() draws fresh ones (it also re-runs on block
       // move / viewport change to keep them aligned with the buttons).
@@ -1124,6 +1128,8 @@ export function initContextMenus(workspace) {
       toolbarBlock = null;
       toolbarKeyboardMode = false;
       blockToolbar.classList.remove('visible');
+      blockToolbar.setAttribute('aria-hidden', 'true');
+      blockToolbar.inert = true;
       clearBadges();
     }