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

package/source/class/qx/tool/config/Utils.js

@@ -191,7 +191,7 @@ qx.Class.define("qx.tool.config.Utils", {
 
         throw new qx.tool.utils.Utils.UserError(`Path to the qx library cannot be determined.`);
       };
-  
+
       this.__qxPathPromise = getQxPathImpl();
       return await this.__qxPathPromise;
     },
@@ -217,6 +217,15 @@ qx.Class.define("qx.tool.config.Utils", {
       return qx.tool.config.Utils.getLibraryVersion(qxpath);
     },
 
+    /**
+     * returns the compiler version.
+     * The version is written during compiler compile into the enviroment
+     * @return {String}
+     */
+     getCompilerVersion() {
+      return qx.core.Environment.get("qx.compiler.version");
+    },
+
     /**
      * Returns the qooxdoo version used in the application in the current or given
      * directory. Throws if no such version can be determined

package/source/class/qx/tool/utils/Json.js

@@ -59,7 +59,7 @@ qx.Class.define("qx.tool.utils.Json", {
     validate(json, schema, warnOnly=false) {
       let ajv = new Ajv({
         allErrors: true,
-        jsonPointers: true
+        strict: false
       });
       if (qx.lang.Type.isArray(schema)) {
         ajv.addSchema(schema);

package/source/class/qx/ui/container/SlideBar.js

@@ -272,6 +272,9 @@ qx.Class.define("qx.ui.container.SlideBar",
     // property apply
     _applyOrientation : function(value, old)
     {
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-orientation", value);
+      
       var oldLayouts = [this.getLayout(), this._getLayout()];
       var buttonForward = this.getChildControl("button-forward");
       var buttonBackward = this.getChildControl("button-backward");

package/source/class/qx/ui/core/scroll/NativeScrollBar.js

@@ -234,6 +234,9 @@ qx.Class.define("qx.ui.core.scroll.NativeScrollBar",
     // property apply
     _applyOrientation : function(value, old)
     {
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-orientation", value);
+      
       var isHorizontal = this.__isHorizontal = value === "horizontal";
 
       this.set({

package/source/class/qx/ui/core/scroll/ScrollBar.js

@@ -301,6 +301,9 @@ qx.Class.define("qx.ui.core.scroll.ScrollBar",
     // property apply
     _applyOrientation : function(value, old)
     {
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-orientation", value);
+
       // Dispose old layout
       var oldLayout = this._getLayout();
       if (oldLayout) {

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

@@ -55,6 +55,12 @@ qx.Class.define("qx.ui.form.AbstractSelectBox",
     this._setLayout(layout);
     layout.setAlignY("middle");
 
+    // ARIA attrs
+    const contentEl = this.getContentElement();
+    contentEl.setAttribute("role", "button");
+    contentEl.setAttribute("aria-haspopup", "listbox");
+    contentEl.setAttribute("aria-expanded", false);
+
     // Register listeners
     this.addListener("keypress", this._onKeyPress);
     this.addListener("blur", this._onBlur, this);
@@ -130,7 +136,7 @@ qx.Class.define("qx.ui.form.AbstractSelectBox",
 
       switch(id)
       {
-        case "list":
+        case "list": {
           control = new qx.ui.form.List().set({
             focusable: false,
             keepFocus: true,
@@ -140,12 +146,18 @@ qx.Class.define("qx.ui.form.AbstractSelectBox",
             selectionMode: "one",
             quickSelection: true
           });
+          const listId = "list-" + control.toHashCode();
+          const childrenContainerEl = control.getChildrenContainer().getContentElement();
+          childrenContainerEl.setAttribute("id", listId);
+          childrenContainerEl.setAttribute("role", "listbox");
+          this.getContentElement().setAttribute("aria-owns", listId);
 
+          control.addListener("addItem", this._onListAddItem, this);
           control.addListener("changeSelection", this._onListChangeSelection, this);
           control.addListener("pointerdown", this._onListPointerDown, this);
           control.getChildControl("pane").addListener("tap", this.close, this);
           break;
-
+        }
         case "popup":
           control = new qx.ui.popup.Popup(new qx.ui.layout.VBox());
           control.setAutoHide(false);
@@ -292,8 +304,8 @@ qx.Class.define("qx.ui.form.AbstractSelectBox",
         e.stopPropagation();
       }
 
-      // hide the list always on escape
-      else if (!listPopup.isHidden() && identifier == "Escape")
+      // hide the list always on escape and tab
+      else if (!listPopup.isHidden() && (identifier == "Escape" || identifier == "Tab"))
       {
         this.close();
         e.stop();
@@ -315,7 +327,23 @@ qx.Class.define("qx.ui.form.AbstractSelectBox",
     _onResize : function(e){
       this.getChildControl("popup").setMinWidth(e.getData().width);
     },
-
+     
+    /**
+     * Sets ARIA attributes on the item
+     *
+     * @param e {qx.event.type.Data} Data Event
+     */
+     _onListAddItem : function(e) {
+      const item = e.getData();
+      const contentEl = item.getContentElement();
+      contentEl.setAttribute("id", "list-item-" + item.toHashCode());
+      contentEl.setAttribute("role", "option");
+      const ariaSelected = contentEl.getAttribute("aria-selected");
+      // aria-selected may be already set from changeSelection listener
+      if (ariaSelected === null || ariaSelected === undefined) {
+        contentEl.setAttribute("aria-selected", false);
+      }
+    },
 
     /**
      * Syncs the own property from the list change
@@ -343,7 +371,11 @@ qx.Class.define("qx.ui.form.AbstractSelectBox",
      * @param e {qx.event.type.Data} Property change event
      */
     _onPopupChangeVisibility : function(e) {
-      e.getData() == "visible" ? this.addState("popupOpen") : this.removeState("popupOpen");
+      const visible = e.getData() == "visible";
+      visible ? this.addState("popupOpen") : this.removeState("popupOpen");
+
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-expanded", visible);
     }
   }
 });

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

@@ -75,6 +75,9 @@ qx.Class.define("qx.ui.form.Button",
       this.setCommand(command);
     }
 
+    // ARIA attrs
+    this.getContentElement().setAttribute("role", "button");
+
     // Add listeners
     this.addListener("pointerover", this._onPointerOver);
     this.addListener("pointerout", this._onPointerOut);

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

@@ -54,6 +54,12 @@ qx.Class.define("qx.ui.form.CheckBox",
     // Initialize the checkbox to a valid value (the default is null which
     // is invalid)
     this.setValue(false);
+
+    // ARIA attrs
+    const contentEl = this.getContentElement();
+    contentEl.setAttribute("role", "checkbox");
+    contentEl.removeAttribute("aria-pressed");
+    contentEl.setAttribute("aria-checked", false);
   },
 
 
@@ -107,6 +113,24 @@ qx.Class.define("qx.ui.form.CheckBox",
       "toolTipText",
       "value",
       "menu"
-    ]
+    ],
+    
+    // overridden
+    _applyValue : function(value, old) {
+      value ? this.addState("checked") : this.removeState("checked");
+
+      let ariaChecked = Boolean(value);
+      if (this.isTriState()) {
+        if (value === null) {
+          ariaChecked = "mixed";
+          this.addState("undetermined");
+        } else if (old === null) {
+          this.removeState("undetermined");
+        }
+      }
+
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-checked", ariaChecked);
+    },
   }
 });

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

@@ -50,6 +50,9 @@ qx.Class.define("qx.ui.form.ComboBox",
     var textField = this._createChildControl("textfield");
     this._createChildControl("button");
 
+    // ARIA attrs
+    this.getContentElement().setAttribute("role", "combobox");
+
     this.addListener("tap", this._onTap);
 
     // forward the focusin and focusout events to the textfield. The textfield
@@ -242,26 +245,25 @@ qx.Class.define("qx.ui.form.ComboBox",
       var popup = this.getChildControl("popup");
       var iden = e.getKeyIdentifier();
 
-      if (iden == "Down" && e.isAltPressed())
-      {
-        this.getChildControl("button").addState("selected");
-        this.toggle();
-        e.stopPropagation();
-      }
-      else if (iden == "Enter")
-      {
-        if (popup.isVisible())
-        {
+      if (popup.isVisible()) {
+        const listIdentifier = ["Up", "Down", "PageUp", "PageDown", "Escape", "Tab"];
+        if (iden == "Enter") {
           this._setPreselectedItem();
           this.resetAllTextSelection();
           this.close();
           e.stop();
+        } else if (listIdentifier.includes(iden)) {
+          this.base(arguments, e);
+        } else {
+          this.close();
+        }
+      } else {
+        if (iden == "Down") {
+          this.getChildControl("button").addState("selected");
+          this.open();
+          e.stop();
         }
       }
-      else if (popup.isVisible())
-      {
-        this.base(arguments, e);
-      }
     },
 
 
@@ -333,6 +335,13 @@ qx.Class.define("qx.ui.form.ComboBox",
           this.__preSelectedItem = null;
         }
       }
+
+      // Set aria-activedescendant
+      if (current && current[0]) {
+        this.getChildControl("textfield").getContentElement().setAttribute("aria-activedescendant", current[0].getContentElement().getAttribute("id"));
+      } else {
+        this.getChildControl("textfield").getContentElement().removeAttribute("aria-activedescendant");
+      }
     },
 
 
@@ -363,16 +372,6 @@ qx.Class.define("qx.ui.form.ComboBox",
           list.resetSelection();
         }
       }
-      else
-      {
-        // When closing the popup text should selected and field should
-        // have the focus. Identical to when reaching the field using the TAB key.
-        //
-        // Only focus if popup was visible before. Fixes [BUG #4453].
-        if (e.getOldData() == "visible") {
-          this.tabFocus();
-        }
-      }
 
       // In all cases: Remove focused state from button
       this.getChildControl("button").removeState("selected");
@@ -390,11 +389,12 @@ qx.Class.define("qx.ui.form.ComboBox",
       var value = e.getData();
 
       var list = this.getChildControl("list");
+      let current = null;
       if (value != null) {
         // Select item when possible
-        var item = list.findItem(value, false);
-        if (item) {
-          list.setSelection([item]);
+        current = list.findItem(value, false);
+        if (current) {
+          list.setSelection([current]);
         } else {
           list.resetSelection();
         }
@@ -402,6 +402,15 @@ qx.Class.define("qx.ui.form.ComboBox",
         list.resetSelection();
       }
 
+      // ARIA attrs
+      const old = e.getOldData() ? list.findItem(e.getOldData(), false) : null;
+      if (old && old !== current) {
+        old.getContentElement().setAttribute("aria-selected", false);
+      }
+      if (current) {
+        current.getContentElement().setAttribute("aria-selected", true);
+      }
+
       // Fire event
       this.fireDataEvent("changeValue", value, e.getOldData());
     },

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

@@ -277,6 +277,9 @@ qx.Class.define("qx.ui.form.List",
     // property apply
     _applyOrientation : function(value, old)
     {
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-orientation", value);
+
       var content = this.__content;
 
       // save old layout for disposal

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

@@ -45,6 +45,9 @@ qx.Class.define("qx.ui.form.MenuButton",
     if (menu != null) {
       this.setMenu(menu);
     }
+
+    // ARIA attrs
+    this.getContentElement().setAttribute("role", "button");
   },
 
 
@@ -112,6 +115,7 @@ qx.Class.define("qx.ui.form.MenuButton",
         old.resetOpener();
       }
 
+      const contentEl = this.getContentElement();
       if (value)
       {
         value.addListener("changeVisibility", this._onMenuChange, this);
@@ -119,6 +123,16 @@ qx.Class.define("qx.ui.form.MenuButton",
 
         value.removeState("submenu");
         value.removeState("contextmenu");
+
+        // ARIA attrs
+        contentEl.setAttribute("aria-haspopup", "menu");
+        contentEl.setAttribute("aria-expanded", value.isVisible());
+        contentEl.setAttribute("aria-controls", value.getContentElement().getAttribute("id"));
+      } else {
+         // ARIA attrs
+        contentEl.removeAttribute("aria-haspopup");
+        contentEl.removeAttribute("aria-expanded");
+        contentEl.removeAttribute("aria-controls");
       }
     },
 
@@ -142,6 +156,10 @@ qx.Class.define("qx.ui.form.MenuButton",
 
       if (menu)
       {
+        // Focus this button when the menu opens
+        if (this.isFocusable() && !qx.ui.core.FocusHandler.getInstance().isFocused(this)) {
+          this.focus();
+        }
         // Hide all menus first
         qx.ui.menu.Manager.getInstance().hideAll();
 
@@ -177,12 +195,15 @@ qx.Class.define("qx.ui.form.MenuButton",
     _onMenuChange : function(e)
     {
       var menu = this.getMenu();
-
-      if (menu.isVisible()) {
+      const menuVisible = menu.isVisible()
+      if (menuVisible) {
         this.addState("pressed");
       } else {
         this.removeState("pressed");
       }
+
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-expanded", menuVisible);
     },
 
 
@@ -241,6 +262,7 @@ qx.Class.define("qx.ui.form.MenuButton",
     {
       switch(e.getKeyIdentifier())
       {
+        case "Space":
         case "Enter":
           this.removeState("abandoned");
           this.addState("pressed");

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

@@ -68,6 +68,12 @@ qx.Class.define("qx.ui.form.RadioButton",
 
     this.base(arguments, label);
 
+    // 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);
+
     // Add listeners
     this.addListener("execute", this._onExecute);
     this.addListener("keypress", this._onKeyPress);
@@ -164,6 +170,7 @@ qx.Class.define("qx.ui.form.RadioButton",
       value ?
         this.addState("checked") :
         this.removeState("checked");
+      this.getContentElement().setAttribute("aria-checked", Boolean(value));
     },
 
 

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

@@ -55,6 +55,9 @@ qx.Class.define("qx.ui.form.RadioButtonGroup",
       this.setLayout(layout);
     }
 
+    // ARIA attrs
+    this.getContentElement().setAttribute("role", "radiogroup");
+
     // create the radio group
     this.__radioGroup = new qx.ui.form.RadioGroup();
 

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

@@ -522,7 +522,26 @@ qx.Class.define("qx.ui.form.RadioGroup",
 
       if (value) {
         value.set(groupedProperty, true);
+
+        // If Group is focused, the selection was changed by keyboard. Switch focus to new value
+        if (this.__isGroupFocused() && value.isFocusable()) {
+          value.focus();
+        }
+      }
+    },
+
+    /**
+     * Checks if this group is focused by checking focused state of each item
+     * @returns {Boolean} result
+     */
+    __isGroupFocused: function () {
+      const focusHandler = qx.ui.core.FocusHandler.getInstance();
+      for (const item of this._getItems()) {
+        if (focusHandler.isFocused(item)) {
+          return true;
+        }
       }
+      return false;
     }
   },
 

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

@@ -221,6 +221,16 @@ qx.Class.define("qx.ui.form.SelectBox",
 
       this.__updateIcon();
       this.__updateLabel();
+
+      // ARIA attrs
+      const old = e.getOldData() ? e.getOldData()[0] : null;
+      const current = this.getSelection()[0];
+      if (old && old !== current) {
+        old.getContentElement().setAttribute("aria-selected", false);
+      }
+      if (current) {
+        current.getContentElement().setAttribute("aria-selected", true);
+      }
     },
 
 
@@ -327,7 +337,11 @@ qx.Class.define("qx.ui.form.SelectBox",
     _onKeyPress : function(e)
     {
       var iden = e.getKeyIdentifier();
-      if(iden == "Enter" || iden == "Space")
+      if ((iden == "Down" || iden == "Up") && e.isAltPressed()) {
+        this.toggle();
+        e.stop();
+      }
+      else if (iden == "Enter" || iden == "Space")
       {
         // Apply pre-selected item (translate quick selection to real selection)
         if (this.__preSelectedItem)
@@ -337,6 +351,7 @@ qx.Class.define("qx.ui.form.SelectBox",
         }
 
         this.toggle();
+        e.stop();
       }
       else
       {
@@ -413,6 +428,13 @@ qx.Class.define("qx.ui.form.SelectBox",
       {
         this.resetSelection();
       }
+
+      // Set aria-activedescendant
+      if (current && current[0]) {
+        this.getContentElement().setAttribute("aria-activedescendant", current[0].getContentElement().getAttribute("id"));
+      } else {
+        this.getContentElement().removeAttribute("aria-activedescendant");
+      }
     },
 
     // overridden

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);