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

package/source/class/qx/ui/core/Widget.js

@@ -3827,6 +3827,76 @@ qx.Class.define("qx.ui.core.Widget",
 
 
 
+    /*
+    ---------------------------------------------------------------------------
+      ARIA attrs support
+    ---------------------------------------------------------------------------
+    */
+    
+    /**
+     * Sets the string which labels this widget. This will be read out by screenreaders. Needed if there is no
+     * readable text/label in this widget which would automatically act as aria-label.
+     * @param label {String} Labelling Text
+     */
+    setAriaLabel: function(label) {
+      this.getContentElement().setAttribute("aria-label", label);
+    },
+
+    /**
+     * Marks that this widget gets labelled by another widget. This will be read out by screenreaders as first
+     * information.
+     * Similiar to aria-label, difference being that the labelling widget is an different widget and multiple
+     * widgets can be added.
+     * @param labelWidgets {qx.ui.core.Widget[]} Indefinite Number of labelling Widgets
+     */
+    addAriaLabelledBy: function(...labelWidgets) {
+      this.__addAriaXBy(labelWidgets, "aria-labelledby");
+    },
+
+    /**
+     * Marks that this widget gets described by another widget. This will be read out by screenreaders as last
+     * information. Multiple Widgets possible.
+     * @param describingWidgets {qx.ui.core.Widget[]} Indefinite Number of describing Widgets
+     */
+    addAriaDescribedBy: function(...describingWidgets) {
+      this.__addAriaXBy(describingWidgets, "aria-describedby");
+    },
+
+    /**
+     * Sets either aria-labelledby or aria-describedby
+     * @param widgets {qx.ui.core.Widget[]} Indefinite Number of widgets
+     * @param ariaAttr {String} aria-labelledby | aria-describedby
+     */
+    __addAriaXBy: function(widgets, ariaAttr) {
+      if (!["aria-labelledby", "aria-describedby"].includes(ariaAttr)) {
+        throw new Error("Only aria-labelledby or aria-describedby allowed!");
+      }
+      let idArr = [];
+      for (const widget of widgets) {
+        if (!(widget instanceof qx.ui.core.Widget)) {
+          throw new Error("Given widget " + widget + " is not an instance of qx.ui.core.Widget!");
+        }
+        const contentEl = widget.getContentElement();
+        let widgetId = contentEl.getAttribute("id");
+        if (!widgetId) {
+          widgetId = `label-${widget.toHashCode()}`;
+          contentEl.setAttribute("id", widgetId);
+        }
+        if (!idArr.includes(widgetId)) {
+          idArr.push(widgetId);
+        }
+      }
+      if (idArr.length === 0) {
+        return;
+      }
+      const idStr = idArr.join(" ");
+      const contentEl = this.getContentElement();
+      let res = contentEl.getAttribute(ariaAttr);
+      res = res ? `${res} ${idStr}` : idStr;
+      contentEl.setAttribute(ariaAttr, res);
+    },
+
+
 
     /*
     ---------------------------------------------------------------------------

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,25 +245,24 @@ 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,18 @@ qx.Class.define("qx.ui.form.ComboBox",
           this.__preSelectedItem = null;
         }
       }
+
+      // Set aria-activedescendant
+      const textFieldContentEl = this.getChildControl("textfield").getContentElement();
+      if (!textFieldContentEl) {
+        return;
+      }
+      const currentContentEl = current && current[0] ? current[0].getContentElement() : null;
+      if (currentContentEl) {
+        textFieldContentEl.setAttribute("aria-activedescendant", currentContentEl.getAttribute("id"));
+      } else {
+        textFieldContentEl.removeAttribute("aria-activedescendant");
+      }
     },
 
 
@@ -363,16 +377,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 +394,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 +407,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/DateField.js

@@ -602,7 +602,22 @@ qx.Class.define("qx.ui.form.DateField",
 
       field.getFocusElement().focus();
       field.selectAllText();
-    }
+    },
+
+    // overridden
+    setAriaLabel: function(label) {
+      this.getChildControl("textfield").setAriaLabel(label);
+    },
+
+    // overridden
+    addAriaLabelledBy: function(...labelWidgets) {
+      this.getChildControl("textfield").addAriaLabelledBy(...labelWidgets);
+    },
+
+    // overridden
+    addAriaDescribedBy: function(...describingWidgets) {
+      this.getChildControl("textfield").addAriaDescribedBy(...describingWidgets);
+    },
   },
 
 

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");
   },
 
 
@@ -120,6 +123,21 @@ qx.Class.define("qx.ui.form.MenuButton",
         value.removeState("submenu");
         value.removeState("contextmenu");
       }
+      
+      // ARIA attrs
+      const contentEl = this.getContentElement();
+      if (!contentEl) {
+        return;
+      }
+      if (value) {
+        contentEl.setAttribute("aria-haspopup", "menu");
+        contentEl.setAttribute("aria-expanded", value.isVisible());
+        contentEl.setAttribute("aria-controls", value.getContentElement().getAttribute("id"));
+      } else {
+        contentEl.removeAttribute("aria-haspopup");
+        contentEl.removeAttribute("aria-expanded");
+        contentEl.removeAttribute("aria-controls");
+      }
     },
 
 
@@ -142,6 +160,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 +199,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 +266,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,18 @@ qx.Class.define("qx.ui.form.SelectBox",
       {
         this.resetSelection();
       }
+
+      // Set aria-activedescendant
+      const contentEl = this.getContentElement();
+      if (!contentEl) {
+        return;
+      }
+      const currentContentEl = current && current[0] ? current[0].getContentElement() : null;
+      if (currentContentEl) {
+        contentEl.setAttribute("aria-activedescendant", currentContentEl.getAttribute("id"));
+      } else {
+        contentEl.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);
     },
 
     /**