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

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

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/mobile/scss/common/_gradients.scss

@@ -6,6 +6,8 @@
 * If the first value is a color (or "transparent"), the mixin creates a plain colored background with it.
 * If multiple values are passed, the background mixins attempts to create a linear gradient through "linear-gradient" mixin.
 */
+@use "sass:math";
+
 @mixin background($values) {
   @if (length($values) == 1)  {
     background-color: $values;
@@ -97,7 +99,7 @@
       $next: nth($values, $i + 1);
 
       // If no position is passed inside color-stop, it calculates the position in percent.
-      $pos: ($i - 1)*(1/($last - 1));
+      $pos: ($i - 1)*math.div(1, $last - 1);
 
       // Separator between color-stops.
       $separator: "";

package/source/resource/qx/mobile/scss/theme/indigo/_styles.scss

@@ -145,7 +145,7 @@ $menu-item-selected-background:  lighten($highlight-color, 20%), $highlight-colo
 
 $navigationbar-height:  rem(40);
 $navigationbar-background:  $color-2,$color-1;
-$navigationbar-text-size:  $navigationbar-height/2;
+$navigationbar-text-size:  $navigationbar-height*0.5;
 $navigationbar-text-color:  $background-color;
 $navigationbar-padding:  rem(4);
 $navigationbar-font-weight: bold;

package/source/resource/qx/mobile/scss/ui/_carousel.scss

@@ -30,7 +30,7 @@
   transition: transform 2s;
 
   position:absolute;
-  bottom: $carousel-pagination-size/2;
+  bottom: $carousel-pagination-size*0.5;
   height: $carousel-pagination-size;
   line-height: 0;
   width: auto;
@@ -38,7 +38,7 @@
 }
 
 .carousel-pagination-label + .carousel-pagination-label {
-  margin-left: $carousel-pagination-size/2;
+  margin-left: $carousel-pagination-size*0.5;
 }
 
 .carousel-pagination-label {

package/source/resource/qx/mobile/scss/ui/_checkbox.scss

@@ -33,14 +33,14 @@
   position: absolute;
   left:50%;
   top:50%;
-  margin-left: -1*($checkbox-tick-size/2) - ($checkbox-tick-width/2);
-  margin-top: -1*($checkbox-tick-size/2) - ($checkbox-tick-width/2);
+  margin-left: -1*($checkbox-tick-size*0.5) - ($checkbox-tick-width*0.5);
+  margin-top: -1*($checkbox-tick-size*0.5) - ($checkbox-tick-width*0.5);
 
   display:block;
   opacity: 0;
   content:"";
   width: $checkbox-tick-size;
-  height: $checkbox-tick-size/2;
+  height: $checkbox-tick-size*0.5;
   background: transparent;
 
   border: $checkbox-tick-width solid $checkbox-tick-color;

package/source/resource/qx/mobile/scss/ui/_collapsible.scss

@@ -53,7 +53,7 @@
   position: absolute;
   top: 50%;
   right: $collapsible-header-padding;
-  margin-top:-1*($collapsible-arrow-size)/2;
+  margin-top:-1*($collapsible-arrow-size)*0.5;
   display:block;
   content: ""; 
 }
@@ -68,7 +68,7 @@
   position: absolute;
   top: 50%;
   right: $collapsible-header-padding;
-  margin-top:-1*($collapsible-arrow-size)/2;
+  margin-top:-1*($collapsible-arrow-size)*0.5;
   display:block;
   content: ""; 
 }

package/source/resource/qx/mobile/scss/ui/_picker.scss

@@ -109,7 +109,7 @@
     @include transition(all no-ease);
 
     position:relative;
-    top: -($picker-height/2);
+    top: -($picker-height*0.5);
 
     padding-top: $picker-height;
     padding-bottom:  $picker-height;
@@ -131,7 +131,7 @@
     padding-left: rem(5);
     padding-right: rem(5);
     
-    top: -$picker-label-height / 2;
+    top: -$picker-label-height * 0.5;
   }
 
   .picker-container {
@@ -178,11 +178,11 @@
     width:100%;
     z-index:1001;
 
-    top: $picker-height/2;
+    top: $picker-height*0.5;
     left: 0px;
 
     height: $picker-label-height; 
-    margin-top: -($picker-label-height/2) - ($picker-highlight-border-width);
+    margin-top: -($picker-label-height*0.5) - ($picker-highlight-border-width);
 
     border-top:  $picker-highlight-border-width solid $picker-highlight-color;
     border-bottom:  $picker-highlight-border-width solid $picker-highlight-color;

package/source/resource/qx/mobile/scss/ui/_radiobutton.scss

@@ -34,13 +34,13 @@
 
   z-index: 1;
 
-  width: $radiobutton-size/2;
-  height: $radiobutton-size/2;
+  width: $radiobutton-size*0.5;
+  height: $radiobutton-size*0.5;
 
   top: 50%;
   left: 50%;
-  margin-top: -1*$radiobutton-size/4;
-  margin-left: -1*$radiobutton-size/4;
+  margin-top: -1*$radiobutton-size*0.25;
+  margin-left: -1*$radiobutton-size*0.25;
 
   background: $radiobutton-dot-color;
 }

package/source/resource/qx/mobile/scss/ui/_slider.scss

@@ -5,14 +5,14 @@
 .slider {
   @include border-radius($slider-border-radius);
   @include background($slider-background);
-  @include transform(translate3d(0,($slider-knob-height/2),0));
+  @include transform(translate3d(0,($slider-knob-height*0.5),0));
   @include touch-action(none);
 
   overflow: visible;
 
   margin-bottom: $slider-knob-height;
-  margin-left: ($slider-knob-width/2); 
-  margin-right: ($slider-knob-width/2);
+  margin-left: ($slider-knob-width*0.5); 
+  margin-right: ($slider-knob-width*0.5);
 
   border: rem(1) solid $slider-border-color;
 }
@@ -22,8 +22,8 @@
   content: "";
   height: $slider-knob-height;
   position: absolute;
-  top: -($slider-knob-height/2) + ($slider-height/2);
-  left:  -($slider-knob-width/2);
+  top: -($slider-knob-height*0.5) + ($slider-height*0.5);
+  left:  -($slider-knob-width*0.5);
   padding-right:  ($slider-knob-width);
   display: block;
   width: 100%;
@@ -62,8 +62,8 @@
   text-overflow: ellipsis;
   font-weight:normal;
 
-  top: -($slider-knob-height/2) + ($slider-height/2) - rem(1);
-  right: -1*$slider-knob-width/2;
+  top: -($slider-knob-height*0.5) + ($slider-height*0.5) - rem(1);
+  right: -1*$slider-knob-width*0.5;
 }
 
 .slider.percent > div:after {

package/source/resource/qx/scss/_gradients.scss

@@ -6,6 +6,8 @@
 * If the first value is a color (or "transparent"), the mixin creates a plain colored background with it.
 * If multiple values are passed, the background mixins attempts to create a linear gradient through "linear-gradient" mixin.
 */
+@use "sass:math";
+
 @mixin background($values) {
   @if (length($values) == 1)  {
     background-color: $values;
@@ -97,7 +99,7 @@
       $next: nth($values, $i + 1);
 
       // If no position is passed inside color-stop, it calculates the position in percent.
-      $pos: ($i - 1)*(1/($last - 1));
+      $pos: ($i - 1)*math.div(1, $last - 1);
 
       // Separator between color-stops.
       $separator: "";

package/source/resource/qx/scss/_mixins.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @function rem($value, $factor: 1.0) {
   @if ($value != 0 and $value != auto) {
     @if (unitless($value)) {
@@ -5,10 +7,10 @@
     }
 
     @if (unit($factor) == "%") {
-      $factor: $factor / ($factor * 0 + 1) / 100;
+      $factor: math.div($factor, $factor * 0 + 1) * 0.01;
     }
 
-    $value: $factor*($value/16px) * 1rem;
+    $value: $factor*math.div($value, 16px) * 1rem;
   }
 
   @return $value;

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() {}

package/source/resource/qx/tool/cli/templates/skeleton/mobile/source/theme/custom/scss/_styles.scss

@@ -145,7 +145,7 @@ $menu-item-selected-background:  lighten($highlight-color, 20%), $highlight-colo
 
 $navigationbar-height:  rem(40);
 $navigationbar-background:  $color-2,$color-1;
-$navigationbar-text-size:  $navigationbar-height/2;
+$navigationbar-text-size:  $navigationbar-height*0.5;
 $navigationbar-text-color:  $background-color;
 $navigationbar-padding:  rem(4);
 $navigationbar-font-weight: bold;

package/source/resource/qx/tool/cli/templates/template_vars.js

@@ -110,7 +110,7 @@ module.exports = function (argv, data) {
     "compiler_range": {
       "description": "the semver range of qooxdoo compiler versions that are compatible with this application",
       "default": function () {
-        return "^" + qx.tool.compiler.Version.VERSION;
+        return "^" + qx.tool.config.Utils.getCompilerVersion();
       }
     },
     "theme": {

package/source/resource/qx/tool/loadsass.js

@@ -1,21 +1,13 @@
 global.require = require;
+global.__filename__ = __filename;
+/* global loadSass */
 global.loadSass = new Function (
 `
   // trick out sass
   process.versions.electron = "0.0.0";
-  let remove = false;
   if (typeof window === "undefined")
     return;
-  if (!window.document.currentScript) {
-    window.document.currentScript = {src: ""};
-    remove = true;
-  }
   const sass = global.require("sass");
   delete process.versions.electron;
-  if (remove) {
-    delete window.document.currentScript;
-  }
   return sass;
 `);
-
-

package/source/resource/qx/tool/schema/Manifest-1-0-0.json

@@ -94,8 +94,7 @@
         },
         "version": {
           "type": "string",
-          "description": "a semver compatible version string",
-          "//pattern": "^(\\d|[1-9]\\d*)\\.(\\d|[1-9]\\d*)\\.(\\d|[1-9]\\d*)(?:-([-\\dA-Za-z]+(?:\\.[\\dA-Za-z-]+)*))?(?:\\+([-\\dA-Za-z]+(?:\\.[-\\d0-9A-Za-z]+)*))?$"
+          "description": "a semver compatible version string"
         },
         "qooxdoo-versions": {
           "type": "array",

package/source/resource/qx/tool/schema/Manifest-2-0-0.json

@@ -97,8 +97,7 @@
         },
         "version": {
           "type": "string",
-          "description": "a semver compatible version string",
-          "//pattern": "^(\\d|[1-9]\\d*)\\.(\\d|[1-9]\\d*)\\.(\\d|[1-9]\\d*)(?:-([-\\dA-Za-z]+(?:\\.[\\dA-Za-z-]+)*))?(?:\\+([-\\dA-Za-z]+(?:\\.[-\\d0-9A-Za-z]+)*))?$"
+          "description": "a semver compatible version string"
         },
         "sourceViewUri": {
           "type": "string",

package/source/resource/qx/tool/schema/compile-1-0-0.json

@@ -21,7 +21,6 @@
     },
     "run": {
       "type": "object",
-      "additionalItems": false,
       "required": [ "application" ],
       "properties": {
         "application": {
@@ -36,7 +35,6 @@
     },
     "sass": {
       "type": "object",
-      "additionalItems": false,
       "properties": {
         "compiler": {
           "description": "Which SASS compiler to use (default is deprecated \"legacy\" during v6, will default to \"latest\" in v7)",
@@ -79,7 +77,7 @@
               {
                 "type": "string",
                 "pattern": "^[-_a-zA-Z0-9]+$"
-              }, 
+              },
               {
                 "type": "array",
                 "items": {
@@ -158,7 +156,6 @@
           "runWhenWatching": {
             "description": "If provided then the compiler will run this command every time this application is compiled, killing any previous instance if necessary",
             "type": "object",
-            "additionalItems": false,
             "required": [
               "command"
             ],
@@ -242,7 +239,7 @@
           },
           "preserveEnvironment": {
             "description": "a list of environment settings that will be ignored for code elimination, ie settings which *must* be configured at runtime",
-            "type": "array", 
+            "type": "array",
             "items": {
               "type": "string"
             }
@@ -373,8 +370,7 @@
       "type": "array",
       "items": {
         "type": "string",
-        "minItems": 1,
-        "//pattern": "^\\S+$"
+        "minItems": 1
       }
     },
     "i18nAsParts": {

package/source/resource/qx/website/scss/ui/_carousel.scss

@@ -34,14 +34,14 @@ $carousel-pagination-font-size:  rem(1);
 
   position: relative;
   margin-top: -$carousel-pagination-size - rem(10);
-  padding-bottom: $carousel-pagination-size/2;
+  padding-bottom: $carousel-pagination-size*0.5;
   width: 100%;
   white-space: nowrap;
   @include flex-justify-content(center);
 }
 
 .qx-carousel-pagination-label + .qx-carousel-pagination-label {
-  margin-left: $carousel-pagination-size/2;
+  margin-left: $carousel-pagination-size*0.5;
 }
 
 .qx-carousel-pagination-label {

package/lib/resource/qx/tool/website/.gitignore

@@ -1,2 +0,0 @@
-old/
-.sass-cache

package/source/class/qx/tool/compiler/Version.js

@@ -1,20 +0,0 @@
-/* ************************************************************************
-
-   qooxdoo - the new era of web development
-
-   http://qooxdoo.org
-
-   License:
-     MIT: https://opensource.org/licenses/MIT
-     See the LICENSE file in the project's top-level directory for details.
-
-************************************************************************ */
-/**
- * NOTE: This is automatically generated by bootstrap-compiler.js
-*/
-qx.Class.define("qx.tool.compiler.Version", {
-  extend: qx.core.Object,
-  statics: {
-    VERSION: "7.0.0-beta.1"
-  }
-});

package/source/resource/qx/mobile/css/.gitignore

@@ -1,3 +0,0 @@
-# ignore files generated by Sass
-flat.css
-indigo.css

package/source/resource/qx/tool/website/.gitignore

@@ -1,2 +0,0 @@
-old/
-.sass-cache

package/source/resource/qx/website/.gitignore

@@ -1 +0,0 @@
-css

package/source/resource/qx/website/scss/.gitignore

@@ -1 +0,0 @@
-.sass-cache