chore: use none ARIA role consistently instead of presentation (#10067)

dejoski · mikeharv · web-flow · commit 07c83d3beb85 · 2026-06-25T10:06:47.000-04:00
* fix: use none ARIA role consistently

Signed-off-by: Dejan Stajic &lt;8886210+dejoski@users.noreply.github.com&gt;

* chore: Reorder role definitions in aria.ts

---------

Signed-off-by: Dejan Stajic &lt;8886210+dejoski@users.noreply.github.com&gt;
Co-authored-by: Dejan Stajic &lt;8886210+dejoski@users.noreply.github.com&gt;
Co-authored-by: Michael Harvey &lt;43474485+mikeharv@users.noreply.github.com&gt;
diff --git a/packages/blockly/core/block_aria_composer.ts b/packages/blockly/core/block_aria_composer.ts
@@ -87,7 +87,7 @@ export function computeAriaLabel(
  * @param block The block to set ARIA role and roledescription attributes on.
  */
 export function configureAriaRole(block: BlockSvg) {
-  setRole(block.getSvgRoot(), Role.PRESENTATION);
+  setRole(block.getSvgRoot(), Role.NONE);
   const focusableElement = block.getFocusableElement();
   if (!block.isInFlyout) {
     // blocks in the flyout have their role set by the Flyout's block inflater
diff --git a/packages/blockly/core/block_flyout_inflater.ts b/packages/blockly/core/block_flyout_inflater.ts
@@ -74,7 +74,7 @@ export class BlockFlyoutInflater implements IFlyoutInflater {
       // blocks can't be focused if they're in a flyout and not top-level
       // nonfocusable blocks should be hidden from the aria tree
       aria.setState(focusableElement, aria.State.HIDDEN, true);
-      aria.setRole(focusableElement, aria.Role.PRESENTATION);
+      aria.setRole(focusableElement, aria.Role.NONE);
     });
     // Since getDescencdants includes the root block, we need
     // to correct the role and hidden state for it.
diff --git a/packages/blockly/core/field_image.ts b/packages/blockly/core/field_image.ts
@@ -364,11 +364,11 @@ export class FieldImage extends Field<string> {
     const focusableElement = this.getFocusableElement();
 
     // The button role is intended to indicate to users that the field has an
-    // editing mode that can be activated. The presentation role is used to
+    // editing mode that can be activated. The none role is used to
     // prevent screen readers from  reading the content or its descendants.
     // Only clickable image fields are navigable.
     if (!this.isClickable()) {
-      aria.setRole(focusableElement, aria.Role.PRESENTATION);
+      aria.setRole(focusableElement, aria.Role.NONE);
       aria.clearState(focusableElement, aria.State.LABEL);
       return false;
     }
diff --git a/packages/blockly/core/flyout_base.ts b/packages/blockly/core/flyout_base.ts
@@ -683,7 +683,7 @@ export abstract class Flyout
     if (!this.targetWorkspace.isMutator && !this.autoClose) {
       aria.setRole(this.getWorkspace().svgGroup_, aria.Role.REGION);
     } else {
-      aria.setRole(this.getWorkspace().svgGroup_, aria.Role.PRESENTATION);
+      aria.setRole(this.getWorkspace().svgGroup_, aria.Role.NONE);
     }
 
     // the label for a flyout includes the category name if it's available
diff --git a/packages/blockly/core/flyout_button.ts b/packages/blockly/core/flyout_button.ts
@@ -136,7 +136,7 @@ export class FlyoutButton
         },
         this.svgGroup!,
       );
-      aria.setRole(shadow, aria.Role.PRESENTATION);
+      aria.setRole(shadow, aria.Role.NONE);
     }
     // Background rectangle.
     const rect = dom.createSvgElement(
@@ -150,7 +150,7 @@ export class FlyoutButton
       },
       this.svgGroup!,
     );
-    aria.setRole(rect, aria.Role.PRESENTATION);
+    aria.setRole(rect, aria.Role.NONE);
 
     const svgText = dom.createSvgElement(
       Svg.TEXT,
@@ -174,7 +174,7 @@ export class FlyoutButton
         .getThemeManager()
         .subscribe(this.svgText, 'flyoutForegroundColour', 'fill');
     }
-    aria.setRole(svgText, aria.Role.PRESENTATION);
+    aria.setRole(svgText, aria.Role.NONE);
 
     // We add the word "heading" or "button" to the label so that they give appropriate hints
     // we can't use the corresponding roles because that overwrites the context of it being an option.
diff --git a/packages/blockly/core/menuitem.ts b/packages/blockly/core/menuitem.ts
@@ -77,9 +77,9 @@ export class MenuItem {
 
     const content = document.createElement('div');
     aria.setState(element, aria.State.LABEL, this.getAriaLabel());
-    // The presentation role is used to prevent screen readers from also reading the
+    // The none role is used to prevent screen readers from also reading the
     // content or its descendants.
-    aria.setRole(content, aria.Role.PRESENTATION);
+    aria.setRole(content, aria.Role.NONE);
     content.className = 'blocklyMenuItemContent';
 
     let contentDom: Node = this.content as HTMLElement;
diff --git a/packages/blockly/core/renderers/zelos/path_object.ts b/packages/blockly/core/renderers/zelos/path_object.ts
@@ -98,7 +98,7 @@ export class PathObject extends BasePathObject {
             'fill': this.svgPath.getAttribute('fill') || '',
             'd': this.svgPath.getAttribute('d') || '',
             'transform': this.svgPath.getAttribute('transform') || '',
-            'role': Role.PRESENTATION,
+            'role': Role.NONE,
           },
           this.svgRoot,
         );
diff --git a/packages/blockly/core/toolbox/category.ts b/packages/blockly/core/toolbox/category.ts
@@ -202,7 +202,7 @@ export class ToolboxCategory
     this.rowDiv_.appendChild(this.rowContents_);
 
     this.iconDom_ = this.createIconDom_();
-    aria.setRole(this.iconDom_, aria.Role.PRESENTATION);
+    aria.setRole(this.iconDom_, aria.Role.NONE);
     this.rowContents_.appendChild(this.iconDom_);
 
     this.labelDom_ = this.createLabelDom_(this.name_);
diff --git a/packages/blockly/core/utils/aria.ts b/packages/blockly/core/utils/aria.ts
@@ -87,10 +87,10 @@ export enum Role {
   MENU = 'menu',
   /** See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/menuitem_role. */
   MENUITEM = 'menuitem',
+  /** See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/none_role. */
+  NONE = 'none',
   /** See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/option_role. */
   OPTION = 'option',
-  /** See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/presentation_role. */
-  PRESENTATION = 'presentation',
   /** See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/region_role. */
   REGION = 'region',
   /** See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/row_role. */
diff --git a/packages/blockly/core/utils/dom.ts b/packages/blockly/core/utils/dom.ts
@@ -58,15 +58,15 @@ export function createSvgElement<T extends SVGElement>(
 ): T {
   const e = document.createElementNS(SVG_NS, `${name}`) as T;
   /**
-   * For svg and group (g) elements, we set the role to presentation so that they are ignored by assistive technologies.
+   * For svg and group (g) elements, we set the role to none so that they are ignored by assistive technologies.
    */
   if (
     name === Svg.SVG.toString() ||
     name === Svg.G.toString() ||
     e.tagName === Svg.SVG.toString() ||
     e.tagName === Svg.G.toString()
   ) {
-    aria.setRole(e, aria.Role.PRESENTATION);
+    aria.setRole(e, aria.Role.NONE);
   }
   for (const key in attrs) {
     e.setAttribute(key, `${attrs[key]}`);
diff --git a/packages/blockly/tests/mocha/field_image_test.js b/packages/blockly/tests/mocha/field_image_test.js
@@ -374,9 +374,9 @@ suite('Image Fields', function () {
         const blockLabel = this.block.getAriaLabel();
         assert.include(blockLabel, this.field.altText);
       });
-      test('Focusable element has role of presentation', function () {
+      test('Focusable element has role of none', function () {
         const role = this.focusableElement.getAttribute('role');
-        assert.equal(role, 'presentation');
+        assert.equal(role, 'none');
       });
       test('Hidden when in a flyout', function () {
         this.block.isInFlyout = true;
diff --git a/packages/blockly/tests/mocha/utils_test.js b/packages/blockly/tests/mocha/utils_test.js
@@ -435,23 +435,23 @@ suite('Utils', function () {
     });
 
     suite('createSvgElement', function () {
-      test('svg elements of type g have the presentation role by default', function () {
+      test('svg elements of type g have the none role by default', function () {
         const svgG = Blockly.utils.dom.createSvgElement(
           Blockly.utils.Svg.G,
           {},
         );
         const g = Blockly.utils.dom.createSvgElement('g', {});
-        assert.equal(svgG.getAttribute('role'), 'presentation');
-        assert.equal(g.getAttribute('role'), 'presentation');
+        assert.equal(svgG.getAttribute('role'), 'none');
+        assert.equal(g.getAttribute('role'), 'none');
       });
-      test('svg elements of type svg have the presentation role by default', function () {
+      test('svg elements of type svg have the none role by default', function () {
         const svgSvg = Blockly.utils.dom.createSvgElement(
           Blockly.utils.Svg.SVG,
           {},
         );
         const svg = Blockly.utils.dom.createSvgElement('svg', {});
-        assert.equal(svgSvg.getAttribute('role'), 'presentation');
-        assert.equal(svg.getAttribute('role'), 'presentation');
+        assert.equal(svgSvg.getAttribute('role'), 'none');
+        assert.equal(svg.getAttribute('role'), 'none');
       });
       test('svg elements of type g reflect the role passed in when created', function () {
         const svgG = Blockly.utils.dom.createSvgElement(Blockly.utils.Svg.G, {

Original file line number	Diff line number	Diff line change
`@@ -683,7 +683,7 @@ export abstract class Flyout`
`683`	`683`	`if (!this.targetWorkspace.isMutator && !this.autoClose) {`
`684`	`684`	`aria.setRole(this.getWorkspace().svgGroup_, aria.Role.REGION);`
`685`	`685`	`} else {`
`686`		`- aria.setRole(this.getWorkspace().svgGroup_, aria.Role.PRESENTATION);`
	`686`	`+ aria.setRole(this.getWorkspace().svgGroup_, aria.Role.NONE);`
`687`	`687`	`}`
`688`	`688`
`689`	`689`	`// the label for a flyout includes the category name if it's available`