@qooxdoo/framework 7.0.0-beta.2 → 7.0.0-beta.3

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",
     }
   }
 });
+

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

@@ -24,27 +24,6 @@ qx.Class.define("qx.ui.toolbar.CheckBox",
 {
   extend : qx.ui.form.ToggleButton,
 
-
-
-
-  /*
-  *****************************************************************************
-     CONSTRUCTOR
-  *****************************************************************************
-  */
-
-  construct : function(label, icon)
-  {
-    this.base(arguments, label, icon);
-
-    // Toolbar buttons should not support the keyboard events
-    this.removeListener("keydown", this._onKeyDown);
-    this.removeListener("keyup", this._onKeyUp);
-  },
-
-
-
-
   /*
   *****************************************************************************
      PROPERTIES
@@ -64,12 +43,6 @@ qx.Class.define("qx.ui.toolbar.CheckBox",
       refine : true,
       init : "inherit"
     },
-
-    focusable :
-    {
-      refine : true,
-      init : false
-    }
   },
 
   members : {

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

@@ -29,7 +29,23 @@ qx.Class.define("qx.ui.toolbar.RadioButton",
   include : [qx.ui.form.MModelProperty],
   implement : [qx.ui.form.IModel, qx.ui.form.IRadioItem],
 
+  /*
+  *****************************************************************************
+     CONSTRUCTOR
+  *****************************************************************************
+  */
 
+  construct : function(label, icon)
+  {
+    this.base(arguments, label, icon);
+
+    // 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);
+    contentEl.removeAttribute("aria-pressed");
+  },
 
 
   /*
@@ -51,6 +67,11 @@ qx.Class.define("qx.ui.toolbar.RadioButton",
     {
       this.base(arguments, value, old);
 
+      // ARIA attrs
+      const contentEl = this.getContentElement();
+      contentEl.removeAttribute("aria-pressed");
+      contentEl.setAttribute("aria-checked", Boolean(value));
+
       if (value)
       {
         var grp = this.getGroup();

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

@@ -28,26 +28,6 @@ qx.Class.define("qx.ui.toolbar.SplitButton",
 {
   extend : qx.ui.form.SplitButton,
 
-
-
-  /*
-  *****************************************************************************
-     CONSTRUCTOR
-  *****************************************************************************
-  */
-
-  construct : function(label, icon, menu, command)
-  {
-    this.base(arguments, label, icon, menu, command);
-
-    // Toolbar buttons should not support the keyboard events
-    this.removeListener("keydown", this._onKeyDown);
-    this.removeListener("keyup", this._onKeyUp);
-  },
-
-
-
-
   /*
   *****************************************************************************
      PROPERTIES
@@ -62,14 +42,6 @@ qx.Class.define("qx.ui.toolbar.SplitButton",
       refine : true,
       init : "toolbar-splitbutton"
     },
-
-
-    // overridden
-    focusable :
-    {
-      refine : true,
-      init : false
-    }
   },
 
 

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

@@ -48,6 +48,9 @@ qx.Class.define("qx.ui.toolbar.ToolBar",
   {
     this.base(arguments);
 
+    // ARIA attrs
+    this.getContentElement().setAttribute("role", "toolbar");
+
     // add needed layout
     this._setLayout(new qx.ui.layout.HBox());
 

package/source/class/qxWeb.js

@@ -36,6 +36,8 @@
  * @ignore(q)
  *
  * @group (Core)
+ *
+ * @asset(qx/iconfont/MaterialIcons/*)
  */
 qx.Bootstrap.define("qxWeb", {
   extend : qx.type.BaseArray,

package/source/resource/qx/tool/cli/templates/loader/loader-node.tmpl.js

@@ -38,7 +38,9 @@
   } else {
     window.document = document = {
         readyState: "ready",
-        currentScript: {src: __filename},
+        currentScript: {
+          src: new (require('url').URL)('file:' + __filename).href
+        },
         createEvent: function() {
           return {
             initCustomEvent: function() {}