feat: Make Flyout an ARIA list (experimental)

core/block_svg.ts

@@ -239,10 +239,16 @@ export class BlockSvg
     aria.setState(
       this.getFocusableElement(),
       aria.State.LABEL,
-      this.computeAriaLabel(),
+      !this.isInFlyout
+        ? this.computeAriaLabel()
+        : this.computeAriaLabelForFlyoutBlock(),
     );
   }
 
+  private computeAriaLabelForFlyoutBlock(): string {
+    return `${this.computeAriaLabel(true)}, block`;
+  }
+
   computeAriaLabel(
     verbose: boolean = false,
     minimal: boolean = false,
@@ -305,7 +311,7 @@ export class BlockSvg
 
   private computeAriaRole() {
     if (this.workspace.isFlyout) {
-      aria.setRole(this.pathObject.svgPath, aria.Role.TREEITEM);
+      aria.setRole(this.pathObject.svgPath, aria.Role.LISTITEM);
     } else {
       const roleDescription = this.getAriaRoleDescription();
       aria.setState(

core/field_checkbox.ts

@@ -122,13 +122,18 @@ export class FieldCheckbox extends Field<CheckboxBool> {
 
   private recomputeAria() {
     const element = this.getFocusableElement();
-    aria.setRole(element, aria.Role.CHECKBOX);
-    aria.setState(
-      element,
-      aria.State.LABEL,
-      this.getAriaTypeName() ?? 'Checkbox',
-    );
-    aria.setState(element, aria.State.CHECKED, !!this.value_);
+    const isInFlyout = this.getSourceBlock()?.workspace?.isFlyout || false;
+    if (!isInFlyout) {
+      aria.setRole(element, aria.Role.CHECKBOX);
+      aria.setState(
+        element,
+        aria.State.LABEL,
+        this.getAriaTypeName() ?? 'Checkbox',
+      );
+      aria.setState(element, aria.State.CHECKED, !!this.value_);
+    } else {
+      aria.setState(element, aria.State.HIDDEN, true);
+    }
   }
 
   override render_() {

core/field_dropdown.ts

@@ -208,17 +208,21 @@ export class FieldDropdown extends Field<string> {
 
   protected recomputeAria() {
     if (!this.fieldGroup_) return; // There's no element to set currently.
+    const isInFlyout = this.getSourceBlock()?.workspace?.isFlyout || false;
     const element = this.getFocusableElement();
-    aria.setRole(element, aria.Role.COMBOBOX);
-    aria.setState(element, aria.State.HASPOPUP, aria.Role.LISTBOX);
-    aria.setState(element, aria.State.EXPANDED, !!this.menu_);
-    if (this.menu_) {
-      aria.setState(element, aria.State.CONTROLS, this.menu_.id);
+    if (!isInFlyout) {
+      aria.setRole(element, aria.Role.COMBOBOX);
+      aria.setState(element, aria.State.HASPOPUP, aria.Role.LISTBOX);
+      aria.setState(element, aria.State.EXPANDED, !!this.menu_);
+      if (this.menu_) {
+        aria.setState(element, aria.State.CONTROLS, this.menu_.id);
+      } else {
+        aria.clearState(element, aria.State.CONTROLS);
+      }
+      aria.setState(element, aria.State.LABEL, super.computeAriaLabel(true));
     } else {
-      aria.clearState(element, aria.State.CONTROLS);
+      aria.setState(element, aria.State.HIDDEN, true);
     }
-
-    aria.setState(element, aria.State.LABEL, super.computeAriaLabel(true));
   }
 
   /**

core/field_image.ts

@@ -159,13 +159,14 @@ export class FieldImage extends Field<string> {
       dom.addClass(this.fieldGroup_, 'blocklyImageField');
     }
 
+    const isInFlyout = this.getSourceBlock()?.workspace?.isFlyout || false;
     const element = this.getFocusableElement();
-    if (this.isClickable()) {
+    if (!isInFlyout && this.isClickable()) {
       this.imageElement.style.cursor = 'pointer';
       aria.setRole(element, aria.Role.BUTTON);
       aria.setState(element, aria.State.LABEL, super.computeAriaLabel(true));
     } else {
-      // The field isn't navigable unless it's clickable.
+      // The field isn't navigable unless it's clickable and outside the flyout.
       aria.setRole(element, aria.Role.PRESENTATION);
     }
   }

core/field_input.ts

@@ -178,8 +178,6 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
       dom.addClass(this.fieldGroup_, 'blocklyInputField');
     }
 
-    const element = this.getFocusableElement();
-    aria.setRole(element, aria.Role.BUTTON);
     this.recomputeAriaLabel();
   }
 
@@ -189,7 +187,13 @@ export abstract class FieldInput<T extends InputTypes> extends Field<
   protected recomputeAriaLabel() {
     if (!this.fieldGroup_) return;
     const element = this.getFocusableElement();
-    aria.setState(element, aria.State.LABEL, super.computeAriaLabel());
+    const isInFlyout = this.getSourceBlock()?.workspace?.isFlyout || false;
+    if (!isInFlyout) {
+      aria.setRole(element, aria.Role.BUTTON);
+      aria.setState(element, aria.State.LABEL, super.computeAriaLabel());
+    } else {
+      aria.setState(element, aria.State.HIDDEN, true);
+    }
   }
 
   override isFullBlockField(): boolean {

core/flyout_button.ts

@@ -132,12 +132,13 @@ export class FlyoutButton
       this.svgContainerGroup,
     );
 
-    aria.setRole(this.svgContainerGroup, aria.Role.TREEITEM);
     if (this.isFlyoutLabel) {
+      aria.setRole(this.svgContainerGroup, aria.Role.LISTITEM);
       aria.setRole(this.svgContentGroup, aria.Role.PRESENTATION);
       this.svgFocusableGroup = this.svgContainerGroup;
     } else {
-      aria.setRole(this.svgContentGroup, aria.Role.BUTTON);
+      aria.setRole(this.svgContainerGroup, aria.Role.PRESENTATION);
+      aria.setRole(this.svgContentGroup, aria.Role.LISTITEM);
       this.svgFocusableGroup = this.svgContentGroup;
     }
     this.svgFocusableGroup.id = this.id;
@@ -183,9 +184,7 @@ export class FlyoutButton
       },
       this.svgContentGroup,
     );
-    if (!this.isFlyoutLabel) {
-      aria.setRole(svgText, aria.Role.PRESENTATION);
-    }
+    aria.setRole(svgText, aria.Role.PRESENTATION);
     let text = parsing.replaceMessageReferences(this.text);
     if (this.workspace.RTL) {
       // Force text to be RTL by adding an RLM.
@@ -198,7 +197,15 @@ export class FlyoutButton
         .getThemeManager()
         .subscribe(this.svgText, 'flyoutForegroundColour', 'fill');
     }
-    aria.setState(this.svgFocusableGroup, aria.State.LABEL, text);
+    if (this.isFlyoutLabel) {
+      aria.setState(this.svgFocusableGroup, aria.State.LABEL, text);
+    } else {
+      aria.setState(
+        this.svgFocusableGroup,
+        aria.State.LABEL,
+        `${text}, button`,
+      );
+    }
 
     const fontSize = style.getComputedStyle(svgText, 'fontSize');
     const fontWeight = style.getComputedStyle(svgText, 'fontWeight');

core/flyout_item.ts

@@ -8,6 +8,11 @@ export class FlyoutItem {
   /**
    * Creates a new FlyoutItem.
    *
+   * Note that it's the responsibility of implementations to ensure that element
+   * is given the ARIA role LISTITEM and respects its expected constraints
+   * (which includes ensuring that no interactive elements are children of the
+   * item element--interactive elements themselves should be the LISTITEM).
+   *
    * @param element The element that will be displayed in the flyout.
    * @param type The type of element. Should correspond to the type of the
    *     flyout inflater that created this object.

core/utils/aria.ts

@@ -28,6 +28,7 @@ export enum Role {
 
   // ARIA role for menu item elements.
   MENUITEM = 'menuitem',
+
   // ARIA role for option items that are  children of combobox, listbox, menu,
   // radiogroup, or tree elements.
   OPTION = 'option',
@@ -55,6 +56,8 @@ export enum Role {
   SPINBUTTON = 'spinbutton',
   REGION = 'region',
   GENERIC = 'generic',
+  LIST = 'list',
+  LISTITEM = 'listitem',
 }
 
 /**

core/workspace_svg.ts

@@ -804,8 +804,8 @@ export class WorkspaceSvg
     this.svgBubbleCanvas_ = this.layerManager.getBubbleLayer();
 
     if (this.isFlyout) {
-      // Use the block canvas as the primary tree parent for flyout blocks.
-      aria.setRole(this.svgBlockCanvas_, aria.Role.TREE);
+      // Use the block canvas as the primary list for nesting.
+      aria.setRole(this.svgBlockCanvas_, aria.Role.LIST);
       aria.setState(this.svgBlockCanvas_, aria.State.LABEL, ariaLabel);
     } else {
       browserEvents.conditionalBind(