From 1f6359a2aef0a55398adf950d453cf107a728f86 Mon Sep 17 00:00:00 2001 From: Matt Hillsdon Date: Fri, 26 Jun 2026 16:35:34 +0100 Subject: [PATCH] Restore hover tooltips on image grid dropdown items PR #11373 removed `button.title` from FieldImageDropdown and FieldImages to fix screen reader output, but that also dropped the native hover tooltip that the tutorial relies on to name each icon. The screen reader fix was actually the `aria-hidden` on the (base64-src) image plus visually-hidden name text; the title only ever held the human-readable alt. Put the title back on the button so the tooltip covers the whole cell (no padding dead-zone), keeping aria-hidden so the base64 src is still never announced. OK in VoiceOver and NVDA, worst risk is duplicate output. Fixes https://github.com/microsoft/pxt-microbit/issues/6964 --- pxtblocks/fields/field_imagedropdown.ts | 1 + pxtblocks/fields/field_images.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/pxtblocks/fields/field_imagedropdown.ts b/pxtblocks/fields/field_imagedropdown.ts index 3aa293a0ca64..1ddf1be2ae5a 100644 --- a/pxtblocks/fields/field_imagedropdown.ts +++ b/pxtblocks/fields/field_imagedropdown.ts @@ -193,6 +193,7 @@ export class FieldImageDropdown extends FieldDropdownGrid implements FieldCustom button.setAttribute('data-value', value); buttonImg.setAttribute('data-value', value); buttonImg.setAttribute('aria-hidden', 'true'); + button.title = content.alt; button.appendChild(buttonImg); this.gridItems.push(button); buttonContainer.appendChild(button); diff --git a/pxtblocks/fields/field_images.ts b/pxtblocks/fields/field_images.ts index 3d515f61cd80..fe0da97da636 100644 --- a/pxtblocks/fields/field_images.ts +++ b/pxtblocks/fields/field_images.ts @@ -110,6 +110,7 @@ export class FieldImages extends FieldImageDropdown implements FieldCustom { button.setAttribute('data-value', value); buttonImg.setAttribute('data-value', value); buttonImg.setAttribute('aria-hidden', 'true'); + button.title = content.alt; button.appendChild(buttonImg); if (this.addLabel_) { const buttonText = this.createTextNode_(content.alt);