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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qooxdoo/framework",
-  "version": "7.0.0-beta.4",
+  "version": "7.0.0-beta.5",
   "description": "The JS Framework for Coders",
   "author": "The qooxdoo project",
   "keywords": [

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/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/window/Window.js

@@ -102,6 +102,11 @@ qx.Class.define("qx.ui.window.Window",
 
     // Change the resize frames appearance
     this._getResizeFrame().setAppearance("window-resize-frame");
+    
+    // ARIA attrs
+    this.getContentElement().setAttribute("role", "dialog");
+    this.addAriaLabelledBy(this.getChildControl("title"));
+    this.addAriaDescribedBy(this.getChildControl("statusbar-text"));
   },
 
 
@@ -961,6 +966,9 @@ qx.Class.define("qx.ui.window.Window",
       } else {
         this.addState("modal");
       }
+      
+      // ARIA attrs
+      this.getContentElement().setAttribute("aria-modal", value);
     },