@qooxdoo/framework 7.0.0-beta.1 → 7.0.0-beta.5

package/source/class/qx/ui/form/Slider.js

@@ -82,6 +82,9 @@ qx.Class.define("qx.ui.form.Slider",
     // Force canvas layout
     this._setLayout(new qx.ui.layout.Canvas());
 
+    // ARIA attrs
+    this.getContentElement().setAttribute("role", "slider");
+
     // Add listeners
     this.addListener("keypress", this._onKeyPress);
     this.addListener("roll", this._onRoll);
@@ -1024,6 +1027,9 @@ qx.Class.define("qx.ui.form.Slider",
     // property apply
     _applyOrientation : function(value, old)
     {
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-orientation", value);
+      
       var knob = this.getChildControl("knob");
 
       // Update private flag for faster access
@@ -1077,6 +1083,9 @@ qx.Class.define("qx.ui.form.Slider",
     // property apply
     _applyValue : function(value, old) {
       if (value != null) {
+        // ARIA attrs
+        this.getContentElement().setAttribute("aria-valuenow", value);
+
         this._updateKnobPosition();
         if (this.__dragMode) {
           this.__dragValue = [value,old];
@@ -1105,6 +1114,9 @@ qx.Class.define("qx.ui.form.Slider",
     // property apply
     _applyMinimum : function(value, old)
     {
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-valuemin", value);
+
       if (this.getValue() < value) {
         this.setValue(value);
       }
@@ -1116,6 +1128,9 @@ qx.Class.define("qx.ui.form.Slider",
     // property apply
     _applyMaximum : function(value, old)
     {
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-valuemax", value);
+
       if (this.getValue() > value) {
         this.setValue(value);
       }

package/source/class/qx/ui/form/SplitButton.js

@@ -48,6 +48,9 @@ qx.Class.define("qx.ui.form.SplitButton",
   {
     this.base(arguments);
 
+    // ARIA attrs
+    this.getContentElement().setAttribute("role", "button");
+
     this._setLayout(new qx.ui.layout.HBox);
 
     // Force arrow creation

package/source/class/qx/ui/form/ToggleButton.js

@@ -65,6 +65,10 @@ qx.Class.define("qx.ui.form.ToggleButton",
     // register execute event
     this.addListener("execute", this._onExecute, this);
 
+    // ARIA attrs
+    const contentEl = this.getContentElement();
+    contentEl.setAttribute("role", "button");
+    contentEl.setAttribute("aria-pressed", false);
   },
 
 
@@ -159,13 +163,17 @@ qx.Class.define("qx.ui.form.ToggleButton",
     _applyValue : function(value, old) {
       value ? this.addState("checked") : this.removeState("checked");
 
+      let ariaPressed = Boolean(value);
       if (this.isTriState()) {
         if (value === null) {
+          ariaPressed = "mixed";
           this.addState("undetermined");
         } else if (old === null) {
           this.removeState("undetermined");
         }
       }
+
+      this.getContentElement().setAttribute("aria-pressed", ariaPressed);
     },
 
     /**

package/source/class/qx/ui/menu/AbstractButton.js

@@ -335,23 +335,47 @@ qx.Class.define("qx.ui.menu.AbstractButton",
     {
       if (old)
       {
+        old.removeListener("changeVisibility", this._onMenuChange, this);
         old.resetOpener();
         old.removeState("submenu");
       }
 
+      const contentEl = this.getContentElement();
       if (value)
       {
         this._showChildControl("arrow");
 
+        value.addListener("changeVisibility", this._onMenuChange, this);
         value.setOpener(this);
         value.addState("submenu");
+
+        // ARIA attrs
+        contentEl.setAttribute("aria-haspopup", "menu");
+        contentEl.setAttribute("aria-expanded", value.isVisible());
+        contentEl.setAttribute("aria-controls", value.getContentElement().getAttribute("id"));
       }
       else
       {
         this._excludeChildControl("arrow");
+        
+         // ARIA attrs
+        contentEl.removeAttribute("aria-haspopup");
+        contentEl.removeAttribute("aria-expanded");
+        contentEl.removeAttribute("aria-controls");
       }
     },
 
+    /**
+     * Listener for visibility property changes of the attached menu
+     *
+     * @param e {qx.event.type.Data} Property change event
+     */
+    _onMenuChange : function(e)
+    {
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-expanded", this.getMenu().isVisible());
+    },
+
     // property apply
     _applyShowCommandLabel : function(value, old)
     {

package/source/class/qx/ui/menu/Button.js

@@ -43,6 +43,9 @@ qx.Class.define("qx.ui.menu.Button",
   {
     this.base(arguments);
 
+    // ARIA attrs
+    this.getContentElement().setAttribute("role", "button");
+
     // Initialize with incoming arguments
     if (label != null) {
       this.setLabel(label);

package/source/class/qx/ui/menu/CheckBox.js

@@ -44,6 +44,11 @@ qx.Class.define("qx.ui.menu.CheckBox",
   {
     this.base(arguments);
 
+    // ARIA attrs
+    const contenEl = this.getContentElement();
+    contenEl.setAttribute("role", "checkbox");
+    contenEl.setAttribute("aria-checked", false);
+
     // Initialize with incoming arguments
     if (label != null) {
       // try to translate every time you create a checkbox [BUG #2699]
@@ -120,6 +125,9 @@ qx.Class.define("qx.ui.menu.CheckBox",
       value ?
         this.addState("checked") :
         this.removeState("checked");
+      
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-checked", Boolean(value));
     },
 
 

package/source/class/qx/ui/menu/Manager.js

@@ -528,6 +528,7 @@ qx.Class.define("qx.ui.menu.Manager",
      */
     __navigationKeys :
     {
+      "Tab" : 1,
       "Escape" : 1,
       "Up" : 1,
       "Down" : 1,
@@ -597,6 +598,7 @@ qx.Class.define("qx.ui.menu.Manager",
             this._onKeyPressRight(menu);
             break;
 
+          case "Tab":
           case "Escape":
             this.hideAll();
             break;

package/source/class/qx/ui/menu/Menu.js

@@ -48,6 +48,11 @@ qx.Class.define("qx.ui.menu.Menu",
     var root = this.getApplicationRoot();
     root.add(this);
 
+    // ARIA attrs
+    const contentEl = this.getContentElement();
+    contentEl.setAttribute("role", "menu");
+    contentEl.setAttribute("id", "menu-" + this.toHashCode());
+
     // Register pointer listeners
     this.addListener("pointerover", this._onPointerOver);
     this.addListener("pointerout", this._onPointerOut);
@@ -212,7 +217,8 @@ qx.Class.define("qx.ui.menu.Menu",
     opener :
     {
       check : "qx.ui.core.Widget",
-      nullable : true
+      nullable: true,
+      apply : "_applyOpener"
     },
 
 
@@ -488,8 +494,15 @@ qx.Class.define("qx.ui.menu.Menu",
         old.removeState("selected");
       }
 
+      const opener = this.__getRootOpener();
+      const contentEl = opener ? opener.getContentElement() : this.getContentElement();
       if (value) {
         value.addState("selected");
+
+        // ARIA attrs
+        contentEl.setAttribute("aria-activedescendant", value.getContentElement().getAttribute("id"));
+      } else {
+        contentEl.removeAttribute("aria-activedescendant");
       }
     },
 
@@ -506,6 +519,17 @@ qx.Class.define("qx.ui.menu.Menu",
       }
     },
 
+    // property apply
+    _applyOpener : function(value, old)
+    {
+      // ARIA attrs
+      if (value) {
+        this.getContentElement().setAttribute("aria-labelledby", value);
+      } else {
+        this.getContentElement().removeAttribute("aria-labelledby");
+      }
+    },
+
 
     // property apply
     _applyBlockerColor : function(value, old) {
@@ -681,6 +705,19 @@ qx.Class.define("qx.ui.menu.Menu",
       EVENT HANDLING
     ---------------------------------------------------------------------------
     */
+    
+    /**
+     * Gets called when a child is added. Sets ARIA attrs
+     * @param {*} child 
+     */
+    _afterAddChild: function (child) {
+      // Some childs, e.g. Seperators, are no meaningful menu items
+      if (child instanceof qx.ui.menu.AbstractButton) {
+        const contentEl = child.getContentElement();
+        contentEl.setAttribute("id", "menu-item-" + child.toHashCode());
+        contentEl.setAttribute("role", "menuitem");
+      }
+    },
 
     /**
      * Update position if the menu or the root is resized
@@ -790,6 +827,31 @@ qx.Class.define("qx.ui.menu.Menu",
           mgr.cancelOpen(this.__scheduledOpen);
         }
       }
+    },
+
+    /*
+    ---------------------------------------------------------------------------
+      HELPER FUNCTIONS
+    ---------------------------------------------------------------------------
+    */
+    
+    /**
+     * Get the opener of the root/the first parent menu.
+     * parent menu.
+     *
+     * @return {qx.ui.core.Widget|null} The opener.
+     */
+    __getRootOpener: function () {
+      let parentMenu = this.getParentMenu();
+      if (!parentMenu) {
+        return this.getOpener();
+      }
+      let opener;
+      while (parentMenu) {
+        opener = parentMenu.getOpener();
+        parentMenu = parentMenu.getParentMenu();
+      }
+      return opener;
     }
   },
 

package/source/class/qx/ui/menu/RadioButton.js

@@ -44,6 +44,12 @@ qx.Class.define("qx.ui.menu.RadioButton",
   {
     this.base(arguments);
 
+    // ARIA attrs
+    // Important: (Grouped) radio btns should be children of a div with role 'radiogroup'
+    const contentEl = this.getContentElement();
+    contentEl.setAttribute("role", "radio");
+    contentEl.setAttribute("aria-checked", false);
+
     // Initialize with incoming arguments
     if (label != null) {
       this.setLabel(label);
@@ -120,8 +126,11 @@ qx.Class.define("qx.ui.menu.RadioButton",
 
 
     // property apply
-    _applyValue : function(value, old) {
+    _applyValue: function (value, old) {
       value ? this.addState("checked") : this.removeState("checked");
+
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-checked", Boolean(value));
     },
 
 

package/source/class/qx/ui/menubar/Button.js

@@ -24,25 +24,6 @@ qx.Class.define("qx.ui.menubar.Button",
 {
   extend : qx.ui.form.MenuButton,
 
-
-
-  /*
-  *****************************************************************************
-     CONSTRUCTOR
-  *****************************************************************************
-  */
-
-  construct : function(label, icon, menu)
-  {
-    this.base(arguments, label, icon, menu);
-
-    this.removeListener("keydown", this._onKeyDown);
-    this.removeListener("keyup", this._onKeyUp);
-  },
-
-
-
-
   /*
   *****************************************************************************
      PROPERTIES
@@ -62,17 +43,9 @@ qx.Class.define("qx.ui.menubar.Button",
       refine : true,
       init : "inherit"
     },
-
-    focusable :
-    {
-      refine : true,
-      init : false
-    }
   },
 
 
-
-
   /*
   *****************************************************************************
      MEMBERS

package/source/class/qx/ui/menubar/MenuBar.js

@@ -22,8 +22,20 @@
 qx.Class.define("qx.ui.menubar.MenuBar",
 {
   extend : qx.ui.toolbar.ToolBar,
+  
+  /*
+  *****************************************************************************
+     CONSTRUCTOR
+  *****************************************************************************
+  */
 
+  construct : function()
+  {
+    this.base(arguments);
 
+    // ARIA attrs
+    this.getContentElement().setAttribute("role", "menubar");
+  },
 
   /*
   *****************************************************************************

package/source/class/qx/ui/splitpane/Blocker.js

@@ -78,6 +78,9 @@ qx.Class.define("qx.ui.splitpane.Blocker",
 
     // property apply
     _applyOrientation : function(value, old) {
+      // ARIA attrs
+      this.setAttribute("aria-orientation", value);
+
       if (value == "horizontal") {
         this.setStyle("height", "100%");
         this.setStyle("cursor", "col-resize");

package/source/class/qx/ui/splitpane/Pane.js

@@ -226,6 +226,9 @@ qx.Class.define("qx.ui.splitpane.Pane",
      */
     _applyOrientation : function(value, old)
     {
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-orientation", value);
+
       var slider = this.getChildControl("slider");
       var splitter = this.getChildControl("splitter");
 

package/source/class/qx/ui/table/Table.js

@@ -218,6 +218,9 @@ qx.Class.define("qx.ui.table.Table",
       // properties.
       tableModel.init(this);
     }
+
+    // ARIA attrs
+    this.getContentElement().setAttribute("role", "grid");
   },
 
 
@@ -753,6 +756,7 @@ qx.Class.define("qx.ui.table.Table",
 
     __additionalStatusBarText : null,
     __lastRowCount : null,
+    __lastColCount : null,
     __internalChange : null,
 
     __columnMenuButtons : null,
@@ -1399,6 +1403,19 @@ qx.Class.define("qx.ui.table.Table",
 
         this._updateScrollBarVisibility();
         this._updateStatusBar();
+        
+        // ARIA attrs
+        this.getContentElement().setAttribute("aria-rowcount", rowCount);
+      }
+
+      const colCount = this.getTableModel().getColumnCount();
+
+      if (colCount != this.__lastColCount)
+      {
+        this.__lastColCount = colCount;
+
+        // ARIA attrs
+        this.getContentElement().setAttribute("aria-colcount", colCount);
       }
     },
 
@@ -1703,6 +1720,10 @@ qx.Class.define("qx.ui.table.Table",
         if (col != null && scrollVisible) {
           this.scrollCellVisible(col, row);
         }
+
+        // ARIA attrs
+        const cellId = "qooxdoo-table-cell-" + this.toHashCode() + "-" + row + "-" + col;
+        this.getContentElement().setAttribute("aria-activedescendant",  cellId);
       }
     },
 
@@ -1805,8 +1826,9 @@ qx.Class.define("qx.ui.table.Table",
       var col = this.__focusedCol;
       var row = this.__focusedRow;
 
-      // could also be undefined [BUG #4676]
-      if (col == null || row == null) {
+      // could also be undefined [BUG #4676]. In that case default to first cell focus
+      if (col === null || col === undefined || row === null || row === undefined) {
+        this.setFocusedCell(0, 0, true);
         return;
       }
 

package/source/class/qx/ui/table/cellrenderer/Abstract.js

@@ -168,7 +168,9 @@ qx.Class.define("qx.ui.table.cellrenderer.Abstract",
      */
     _getCellAttributes : function(cellInfo)
     {
-      return "";
+      const cellId = "qooxdoo-table-cell-" + cellInfo.table.toHashCode() + "-" + cellInfo.row + "-" + cellInfo.col;
+      const readOnly = cellInfo.editable !== null && cellInfo.editable !== undefined ? !cellInfo.editable : true;
+      return "id=" + cellId + " role=gridcell aria-readonly=" + readOnly;
     },
 
 

package/source/class/qx/ui/table/cellrenderer/AbstractImage.js

@@ -255,12 +255,16 @@ qx.Class.define("qx.ui.table.cellrenderer.AbstractImage",
     // overridden
     _getCellAttributes : function(cellInfo)
     {
-      var tooltip = this.__imageData.tooltip;
+      let baseAttrs = this.base(arguments, cellInfo);
+      if (!baseAttrs) {
+        baseAttrs = "";
+      }
 
+      var tooltip = this.__imageData.tooltip;
       if (tooltip) {
-        return "title='" + tooltip + "'";
+        return baseAttrs + " title='" + tooltip + "'";
       } else {
-        return "";
+        return baseAttrs;
       }
     }
   },

package/source/class/qx/ui/table/headerrenderer/HeaderCell.js

@@ -36,6 +36,9 @@ qx.Class.define("qx.ui.table.headerrenderer.HeaderCell",
     layout.setColumnFlex(1, 1);
     layout.setColumnFlex(2, 1);
     this.setLayout(layout);
+
+    // ARIA attrs
+    this.getContentElement().setAttribute("role", "columnheader");
   },
 
   properties :

package/source/class/qx/ui/table/pane/Header.js

@@ -44,6 +44,9 @@ qx.Class.define("qx.ui.table.pane.Header",
     this.__blocker = new qx.ui.core.Blocker(this);
 
     this.__paneScroller = paneScroller;
+
+    // ARIA attrs
+    this.getContentElement().setAttribute("role", "row");
   },
 
 

package/source/class/qx/ui/table/pane/Scroller.js

@@ -697,17 +697,13 @@ qx.Class.define("qx.ui.table.pane.Scroller",
     {
       this.__tablePane.onTableModelDataChanged(firstRow, lastRow, firstColumn, lastColumn);
       var rowCount = this.getTable().getTableModel().getRowCount();
-      var colCount = this.__table.getTableColumnModel().getOverallColumnCount();
 
       if (rowCount != this.__lastRowCount)
       {
         this.updateVerScrollBarMaximum();
-
-        if (this.getFocusedRow() === null && rowCount > 0 && colCount > 0)
-        {
-          this.setFocusedCell(this.getFocusedColumn()||0, 0);
-        }
-        else if (this.getFocusedRow() >= rowCount)
+        
+        const focusedRow = this.getFocusedRow();
+        if (focusedRow !== null && focusedRow >= rowCount)
         {
           if (rowCount == 0) {
             this.setFocusedCell(null, null);

package/source/class/qx/ui/table/rowrenderer/Default.js

@@ -250,7 +250,7 @@ qx.Class.define("qx.ui.table.rowrenderer.Default",
      */
     getRowAttributes : function(rowInfo)
     {
-      return "";
+      return "role=row "; // Space important!
     }
   },
 

package/source/class/qx/ui/tabview/Page.js

@@ -54,6 +54,22 @@ qx.Class.define("qx.ui.tabview.Page",
       this.setIcon(icon);
     }
 
+    // ARIA attrs
+    const btn = this.getButton();
+    const pageId = "page-" + this.toHashCode();
+    const btnId = "btn-" + pageId + btn.toHashCode();
+    const contentEl = this.getContentElement();
+    contentEl.setAttribute("id", pageId); 
+    contentEl.setAttribute("role", "tabpanel");
+    contentEl.setAttribute("aria-labelledBy", btnId);
+    contentEl.setAttribute("aria-expanded", false);
+    
+    const btnContentEl = btn.getContentElement();
+    btnContentEl.setAttribute("id", btnId); 
+    btnContentEl.setAttribute("role", "tab");
+    btnContentEl.setAttribute("aria-selected", false);
+    btnContentEl.setAttribute("aria-controls", pageId);
+    btn.addListener("changeValue", this._onBtnChangeValue, this);
   },
 
 
@@ -224,6 +240,16 @@ qx.Class.define("qx.ui.tabview.Page",
       return control || this.base(arguments, id);
     },
 
+    /**
+     * Tab Change Listener
+     * @param {*} e 
+     */
+     _onBtnChangeValue: function (e) {
+      const val = e.getData();
+      this.getContentElement().setAttribute("aria-expanded", val, true); // Set third argument to true -> direct Update
+      this.getButton().getContentElement().setAttribute("aria-selected", val);
+    },
+
     /*
     ---------------------------------------------------------------------------
       PROPERTY APPLY

package/source/class/qx/ui/tabview/TabView.js

@@ -75,6 +75,9 @@ qx.Class.define("qx.ui.tabview.TabView",
     } else {
       this.initBarPosition();
     }
+    
+    // ARIA attrs
+    this.getContentElement().setAttribute("role", "tablist");
   },
 
 

package/source/class/qx/ui/toolbar/Button.js

@@ -19,32 +19,12 @@
 
 /**
  * The normal toolbar button. Like a normal {@link qx.ui.form.Button}
- * but with a style matching the toolbar and without keyboard support.
+ * but with a style matching the toolbar.
  */
 qx.Class.define("qx.ui.toolbar.Button",
 {
   extend : qx.ui.form.Button,
 
-
-
-  /*
-  *****************************************************************************
-     CONSTRUCTOR
-  *****************************************************************************
-  */
-
-  construct : function(label, icon, command)
-  {
-    this.base(arguments, label, icon, command);
-
-    // Toolbar buttons should not support the keyboard events
-    this.removeListener("keydown", this._onKeyDown);
-    this.removeListener("keyup", this._onKeyUp);
-  },
-
-
-
-
   /*
   *****************************************************************************
      PROPERTIES
@@ -64,12 +44,6 @@ qx.Class.define("qx.ui.toolbar.Button",
       refine : true,
       init : "inherit"
     },
-
-    focusable :
-    {
-      refine : true,
-      init : false
-    }
   },
 
   members : {
@@ -84,3 +58,4 @@ qx.Class.define("qx.ui.toolbar.Button",
     }
   }
 });
+