Improving accessability - added aria presentation role for layout tables (#10108)

Lonzak · niloc132 · zbynek · web-flow · commit a6a8496f127b · 2025-07-16T23:16:47.000+02:00
According to accessibility rules layout tables exist merely to position
content visually and should not be used in HTML5.
Screen readers may interpret them as data tables (i.e., announcing
column and row numbers) etc). To change that in GWT would be a bigger
task. So as a minor improvement those tables should be marked as layout
tables. This can be done by assigning the role="presentation" to ensure
it is not identified as a table to screen reader users.

---------

Co-authored-by: Colin Alworth &lt;colin@vertispan.com&gt;
Co-authored-by: Zbynek Konecny &lt;zbynek@geogebra.org&gt;
diff --git a/user/src/com/google/gwt/user/client/ui/CellPanel.java b/user/src/com/google/gwt/user/client/ui/CellPanel.java
@@ -15,6 +15,7 @@
  */
 package com.google.gwt.user.client.ui;
 
+import com.google.gwt.aria.client.Roles;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.ui.HasHorizontalAlignment.HorizontalAlignmentConstant;
@@ -72,6 +73,8 @@ public abstract class CellPanel extends ComplexPanel {
 
   public CellPanel() {
     table = DOM.createTable();
+    // aria role to indicate it is a plain layout table
+    Roles.getPresentationRole().set(table);
     body = DOM.createTBody();
     DOM.appendChild(table, body);
     setElement(table);
diff --git a/user/src/com/google/gwt/user/client/ui/DecoratedStackPanel.java b/user/src/com/google/gwt/user/client/ui/DecoratedStackPanel.java
@@ -15,6 +15,7 @@
  */
 package com.google.gwt.user.client.ui;
 
+import com.google.gwt.aria.client.Roles;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.user.client.DOM;
 
@@ -81,6 +82,8 @@ public DecoratedStackPanel() {
   Element createHeaderElem() {
     // Create the table
     Element table = DOM.createTable();
+    // aria role to indicate it is a plain layout table
+    Roles.getPresentationRole().set(table);
     Element tbody = DOM.createTBody();
     DOM.appendChild(table, tbody);
     table.getStyle().setProperty("width", "100%");
diff --git a/user/src/com/google/gwt/user/client/ui/DecoratorPanel.java b/user/src/com/google/gwt/user/client/ui/DecoratorPanel.java
@@ -15,6 +15,7 @@
  */
 package com.google.gwt.user.client.ui;
 
+import com.google.gwt.aria.client.Roles;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.i18n.client.LocaleInfo;
 import com.google.gwt.user.client.DOM;
@@ -164,6 +165,9 @@ public DecoratorPanel() {
 
     // Add a tbody
     Element table = getElement();
+    // aria role to indicate it is a plain layout table
+    Roles.getPresentationRole().set(table);
+    
     tbody = DOM.createTBody();
     DOM.appendChild(table, tbody);
     table.setPropertyInt("cellSpacing", 0);
diff --git a/user/src/com/google/gwt/user/client/ui/DisclosurePanel.java b/user/src/com/google/gwt/user/client/ui/DisclosurePanel.java
@@ -16,6 +16,7 @@
 package com.google.gwt.user.client.ui;
 
 import com.google.gwt.animation.client.Animation;
+import com.google.gwt.aria.client.Roles;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.event.logical.shared.CloseEvent;
@@ -230,6 +231,9 @@ private DefaultHeader(Imager imager, String text) {
 
       // I do not need any Widgets here, just a DOM structure.
       Element root = DOM.createTable();
+      // aria role to indicate it is a plain layout table
+      Roles.getPresentationRole().set(root);
+      
       Element tbody = DOM.createTBody();
       Element tr = DOM.createTR();
       final Element imageTD = DOM.createTD();
diff --git a/user/src/com/google/gwt/user/client/ui/MenuBar.java b/user/src/com/google/gwt/user/client/ui/MenuBar.java
@@ -1180,6 +1180,9 @@ private void init(boolean vertical, AbstractImagePrototype subMenuIcon) {
     this.subMenuIcon = subMenuIcon;
 
     Element table = DOM.createTable();
+    // aria role to indicate it is a plain layout table
+    Roles.getPresentationRole().set(table);
+    
     body = DOM.createTBody();
     DOM.appendChild(table, body);
 
diff --git a/user/src/com/google/gwt/user/client/ui/StackPanel.java b/user/src/com/google/gwt/user/client/ui/StackPanel.java
@@ -15,6 +15,7 @@
  */
 package com.google.gwt.user.client.ui;
 
+import com.google.gwt.aria.client.Roles;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.safehtml.shared.SafeHtml;
 import com.google.gwt.safehtml.shared.annotations.IsSafeHtml;
@@ -63,6 +64,8 @@ public class StackPanel extends ComplexPanel implements InsertPanel.ForIsWidget
    */
   public StackPanel() {
     Element table = DOM.createTable();
+    // aria role to indicate it is a plain layout table
+    Roles.getPresentationRole().set(table);
     setElement(table);
 
     body = DOM.createTBody();
diff --git a/user/src/com/google/gwt/user/client/ui/TreeItem.java b/user/src/com/google/gwt/user/client/ui/TreeItem.java
@@ -88,6 +88,8 @@ void initializeClonableElements() {
       if (GWT.isClient()) {
         // Create the base table element that will be cloned.
         BASE_INTERNAL_ELEM = DOM.createTable();
+        // aria role to indicate it is a plain layout table
+        Roles.getPresentationRole().set(BASE_INTERNAL_ELEM);
         Element contentElem = DOM.createDiv();
         Element tbody = DOM.createTBody(), tr = DOM.createTR();
         Element tdImg = DOM.createTD(), tdContent = DOM.createTD();
diff --git a/user/test/com/google/gwt/user/client/ui/DecoratorPanelTest.java b/user/test/com/google/gwt/user/client/ui/DecoratorPanelTest.java
@@ -91,6 +91,12 @@ public void testDefaultStyles() {
     // Check the container element
     assertTrue(panel.getCellElement(1, 1) == panel.getContainerElement());
   }
+  
+  public void testPresentationRole() {
+    DecoratorPanel panel = createPanel();
+    assertNotNull(panel.getElement());
+    assertEquals("presentation", panel.getElement().getAttribute("role"));
+  }
 
   @Override
   protected DecoratorPanel createPanel() {
diff --git a/user/test/com/google/gwt/user/client/ui/DisclosurePanelTest.java b/user/test/com/google/gwt/user/client/ui/DisclosurePanelTest.java
@@ -232,6 +232,12 @@ public void testRemoveNullAsIsWidget() {
     panel.remove(widget);
     // ta da...
   }
+  
+  public void testPresentationRole() {
+    DisclosurePanel panel = createEmptyDisclourePanel();
+    assertNotNull(panel.getElement());
+    assertEquals("presentation", panel.getElement().getAttribute("role"));
+  }
 
   private DisclosurePanel createEmptyDisclourePanel() {
     return new DisclosurePanel();
diff --git a/user/test/com/google/gwt/user/client/ui/DockPanelTest.java b/user/test/com/google/gwt/user/client/ui/DockPanelTest.java
@@ -22,7 +22,6 @@
 /**
  * Tests the DockPanel widget.
  */
-@SuppressWarnings("deprecation")
 public class DockPanelTest extends GWTTestCase {
 
   static class Adder implements HasWidgetsTester.WidgetAdder {
@@ -125,6 +124,12 @@ public void testAddAsIsWidget() {
     assertPhysicalPaternity(panel,widget);
   }
   
+  public void testPresentationRole() {
+    DockPanel panel = createDockPanel();
+    assertNotNull(panel.getElement());
+    assertEquals("presentation", panel.getElement().getAttribute("role"));
+  }
+  
   public void testAttachDetachOrder() {
     HasWidgetsTester.testAll(new DockPanel(), new Adder(), true);
   }
diff --git a/user/test/com/google/gwt/user/client/ui/HorizontalPanelTest.java b/user/test/com/google/gwt/user/client/ui/HorizontalPanelTest.java
@@ -78,6 +78,12 @@ public void testInsertMultipleTimes() {
     assertEquals(0, p.getWidgetIndex(tb));
     assertEquals(1, p.getWidgetIndex(l));
   }
+  
+  public void testPresentationRole() {
+    CellPanel panel = createCellPanel();
+    assertNotNull(panel.getElement());
+    assertEquals("presentation", panel.getElement().getAttribute("role"));
+  }
 
   @Override
   protected CellPanel createCellPanel() {
diff --git a/user/test/com/google/gwt/user/client/ui/MenuBarTest.java b/user/test/com/google/gwt/user/client/ui/MenuBarTest.java
@@ -550,7 +550,6 @@ public void testClearSelectionAfterCommand() {
     MenuItem item1 = bar.addItem("item1", BLANK_COMMAND);
     RootPanel.get().add(bar);
 
-
     bar.itemOver(item1, true);
     assertNotNull(bar.getSelectedItem());
 
@@ -605,4 +604,11 @@ public void testTabKey() {
     assertNull(l0.getSelectedItem());
     assertNull(l1.getPopup());
   }
+  
+  public void testPresentationRole() {
+    MenuBar menu = new MenuBar();
+    assertNotNull(menu.getElement());
+    assertEquals("presentation",
+        Element.as(menu.getElement().getChild(1)).getAttribute("role"));
+  }
 }
diff --git a/user/test/com/google/gwt/user/client/ui/StackPanelTest.java b/user/test/com/google/gwt/user/client/ui/StackPanelTest.java
@@ -208,6 +208,12 @@ private static void assertDoesNotContainStyleName(Element element, String styleN
     assertFalse("Style name '" + styleName + "' was found in '" + element.getClassName() + "'",
         element.hasClassName(styleName));
   }
+  
+  public void testPresentationRole() {
+    StackPanel stackpanel = createStackPanel();
+    assertNotNull(stackpanel.getElement());
+    assertEquals("presentation", stackpanel.getElement().getAttribute("role"));
+  }
 
   /**
    * Create a new stack panel.
diff --git a/user/test/com/google/gwt/user/client/ui/TreeItemTest.java b/user/test/com/google/gwt/user/client/ui/TreeItemTest.java
@@ -261,4 +261,12 @@ public void testSetWidgetNullWithError() {
     // Detach the panel.
     RootPanel.get().remove(tree);
   }
+  
+  public void testPresentationRole() {
+    TreeItem item = new TreeItem();
+    item.addItem(new TreeItem());
+    assertNotNull(item.getElement());
+    assertEquals("presentation",
+        item.getElement().getFirstChildElement().getAttribute("role"));
+  }
 }
diff --git a/user/test/com/google/gwt/user/client/ui/VerticalPanelTest.java b/user/test/com/google/gwt/user/client/ui/VerticalPanelTest.java
@@ -78,6 +78,12 @@ public void testInsertMultipleTimes() {
     assertEquals(0, p.getWidgetIndex(tb));
     assertEquals(1, p.getWidgetIndex(l));
   }
+  
+  public void testPresentationRole() {
+    CellPanel panel = createCellPanel();
+    assertNotNull(panel.getElement());
+    assertEquals("presentation", panel.getElement().getAttribute("role"));
+  }
 
   @Override
   protected CellPanel createCellPanel() {
