@qooxdoo/framework 7.0.0-beta → 7.0.0-beta.4

package/source/class/qx/tool/utils/files/FindFiles.js

@@ -3,7 +3,7 @@
  *    qooxdoo-compiler - node.js based replacement for the Qooxdoo python
  *    toolchain
  *
- *    https://github.com/qooxdoo/qooxdoo-compiler
+ *    https://github.com/qooxdoo/qooxdoo
  *
  *    Copyright:
  *      2011-2017 Zenesis Limited, http://www.zenesis.com

package/source/class/qx/tool/utils/files/Utils.js

@@ -3,7 +3,7 @@
  *    qooxdoo-compiler - node.js based replacement for the Qooxdoo python
  *    toolchain
  *
- *    https://github.com/qooxdoo/qooxdoo-compiler
+ *    https://github.com/qooxdoo/qooxdoo
  *
  *    Copyright:
  *      2011-2017 Zenesis Limited, http://www.zenesis.com

package/source/class/qx/tool/utils/json/Parser.js

@@ -3,7 +3,7 @@
  *    qooxdoo-compiler - node.js based replacement for the Qooxdoo python
  *    toolchain
  *
- *    https://github.com/qooxdoo/qooxdoo-compiler
+ *    https://github.com/qooxdoo/qooxdoo
  *
  *    Copyright:
  *      2011-2019 Zenesis Limited, http://www.zenesis.com

package/source/class/qx/tool/utils/json/Stringify.js

@@ -3,7 +3,7 @@
  *    qooxdoo-compiler - node.js based replacement for the Qooxdoo python
  *    toolchain
  *
- *    https://github.com/qooxdoo/qooxdoo-compiler
+ *    https://github.com/qooxdoo/qooxdoo
  *
  *    Copyright:
  *      2011-2019 Zenesis Limited, http://www.zenesis.com

package/source/class/qx/tool/utils/json/Tokenizer.js

@@ -3,7 +3,7 @@
  *    qooxdoo-compiler - node.js based replacement for the Qooxdoo python
  *    toolchain
  *
- *    https://github.com/qooxdoo/qooxdoo-compiler
+ *    https://github.com/qooxdoo/qooxdoo
  *
  *    Copyright:
  *      2011-2019 Zenesis Limited, http://www.zenesis.com

package/source/class/qx/tool/utils/json/Writer.js

@@ -3,7 +3,7 @@
  *    qooxdoo-compiler - node.js based replacement for the Qooxdoo python
  *    toolchain
  *
- *    https://github.com/qooxdoo/qooxdoo-compiler
+ *    https://github.com/qooxdoo/qooxdoo
  *
  *    Copyright:
  *      2011-2019 Zenesis Limited, http://www.zenesis.com

package/source/class/qx/type/BaseString.js

@@ -387,7 +387,8 @@ qx.Class.define("qx.type.BaseString",
        'toUpperCase',
        'toLocaleLowerCase',
        'toLocaleUpperCase',
-       'trim'
+       'trim',
+       'codePointAt'
      ];
 
      // feature/bug detection:

package/source/class/qx/ui/basic/Image.js

@@ -796,10 +796,7 @@ qx.Class.define("qx.ui.basic.Image",
           height = this.getHeight() || hint.height;
         }
         else {
-          var font = qx.theme.manager.Font.getInstance().resolve(source.match(/@([^/]+)/)[1]);
-          if (qx.core.Environment.get("qx.debug")) {
-            this.assertObject(font, "Virtual image source contains unkown font descriptor");
-          }
+          var font = this.__getFont(source);
           var size = parseInt(source.split("/")[2] || font.getSize(), 10);
           width = ResourceManager.getImageWidth(source) || size;
           height = ResourceManager.getImageHeight(source) || size;
@@ -830,7 +827,8 @@ qx.Class.define("qx.ui.basic.Image",
       } else {
         var source = this.getSource();
         var sparts = source.split("/");
-        var size = parseInt(sparts[2] || qx.theme.manager.Font.getInstance().resolve(source.match(/@([^/]+)/)[1]).getSize());
+        var font = this.__getFont(source);
+        var size = parseInt(sparts[2] || font.getSize());
         el.setStyle("fontSize", size + "px");
       }
     },
@@ -930,6 +928,14 @@ qx.Class.define("qx.ui.basic.Image",
       }
     },
 
+    __getFont(source) {
+      var font = qx.theme.manager.Font.getInstance().resolve(source.match(/@([^/]+)/)[1]);
+      if (typeof font == "string") {
+        throw new Error(`Cannot find font in virtual image source: '${source}'`);
+      }
+      return font;
+    },
+
     /**
      * Combines the decorator's image styles with our own image to make sure
      * gradient and backgroundImage decorators work on Images.
@@ -942,7 +948,7 @@ qx.Class.define("qx.ui.basic.Image",
 
       if (isFont) {
         var ResourceManager = qx.util.ResourceManager.getInstance();
-        var font = qx.theme.manager.Font.getInstance().resolve(source.match(/@([^/]+)/)[1]);
+        var font = this.__getFont(source);
         var fontStyles = qx.lang.Object.clone(font.getStyles());
         delete fontStyles.color;
         el.setStyles(fontStyles);
@@ -977,7 +983,8 @@ qx.Class.define("qx.ui.basic.Image",
             var combinedStyles = {
               "backgroundImage": attr.style.backgroundImage,
               "backgroundPosition": (attr.style.backgroundPosition || "0 0"),
-              "backgroundRepeat": (attr.style.backgroundRepeat || "no-repeat")
+              "backgroundRepeat": (attr.style.backgroundRepeat || "no-repeat"),
+              "position": "absolute"
             };
 
             if (hasBackground) {
@@ -1006,6 +1013,7 @@ qx.Class.define("qx.ui.basic.Image",
       }
       if (el.setSource){
         el.setSource(source);
+        el.setStyle("position", "absolute");
       }
     },
 

package/source/class/qx/ui/basic/Label.js

@@ -363,7 +363,9 @@ qx.Class.define("qx.ui.basic.Label",
       {
         this.__font = qx.theme.manager.Font.getInstance().resolve(value);
         if (this.__font instanceof qx.bom.webfonts.WebFont) {
-          this.__webfontListenerId = this.__font.addListener("changeStatus", this._onWebFontStatusChange, this);
+          if (!this.__font.isValid()) {
+            this.__webfontListenerId = this.__font.addListener("changeStatus", this._onWebFontStatusChange, this);
+          }
         }
         styles = this.__font.getStyles();
       }

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/control/DateChooser.js

@@ -190,7 +190,26 @@ qx.Class.define("qx.ui.control.DateChooser",
       event : "changeShownYear"
     },
 
-    /** The date value of the widget. */
+    /**
+     * The date value of the widget.
+     *
+     * CAUTION: Date is a reference type. If you call `setValue` with
+     * a Date object, and then change that Date object's value, e.g.,
+     * with `date.setYear()`, and then call `setValue` with that same
+     * Date object, ** the widget will not update **. Instead, you
+     * should instantiate a new Date object with the old (modified)
+     * date object as its initiatializer, and pass that to `setValue`,
+     * e.g.,
+     *
+     * ```
+     * date = new Date();
+     * dateChooser.setValue(date);
+     * // ...some time later...
+     * date = date.setDate(date.getDate() + 1);
+     * // dateChooser.setValue(date);        // This will NOT update the widget
+     * dateChooser.setValue(new Date(date)); // This WILL update the widget
+     * ```
+     */
     value :
     {
       check : "Date",

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/CheckedList.js

@@ -155,8 +155,9 @@ qx.Class.define("qx.ui.form.CheckedList", {
     __onItemChangeCheckedImpl(item, removing) {
       let hash = item.toHashCode();
       let checked = item.getValue();
-      if (removing)
+      if (removing) {
         checked = false;
+      }
       let changed = false;
       let oldData = this.getChecked();
       if (checked) {

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