✨ Improve DOM accessible elements

CHANGELOG.md

@@ -1,7 +1,7 @@
-### v1.1.15 (Not yet released)
+### v1.1.15 (2020-05-26)
 #### Bug fixes
 - Unset `box-shadow` and `text-shadow` attributes in custom buttons
-- Fallback accessible components for `canvas` regions should always be created since `[HitRegions](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/addHitRegion)` have been deprecated. Also, `[CanvasRenderingContext2D.drawFocusIfNeeded](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded)` should be called on each call to `ActiveBox.updateContent`, not just at creation time.
+- Accessible components for `canvas` regions should always be created since [`HitRegions`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/addHitRegion) have been deprecated. Also, [`CanvasRenderingContext2D.drawFocusIfNeeded`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawFocusIfNeeded) should be called on each call to `updateContent` on ActiveBox objects, not just at creation time.
 
 #### Improvements
 - Map JDK logical fonts ("Dialog", "Serif", etc.) to [HTML5 generic font family names](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)

package.json

@@ -2,7 +2,7 @@
   "name": "jclic",
   "title": "JClic.js",
   "description": "HTML5 player for JClic activities",
-  "version": "1.1.15-beta-2",
+  "version": "1.1.15",
   "main": "src/JClic.js",
   "jsdelivr": "dist/jclic.min.js",
   "homepage": "http://projectestac.github.io/jclic.js",

src/JClic.js

@@ -211,7 +211,6 @@ define([
      */
     loadProject: function (div, projectName, options) {
 
-      //options = Utils.init(Object.assign({}, JClicObject.options, options))
       options = Utils.init($.extend(Object.create(JClicObject.options), options || {}))
       let player = null
 

src/activities/panels/Explore.js

@@ -299,8 +299,9 @@ define([
                 if (this.act.useOrder)
                   this.currentItem = this.bgA.getNextItem(this.currentItem)
                 this.ps.reportNewAction(this.act, 'SELECT', bx1.getDescription(), bx2.getDescription(), true, 0)
-                if (bx2.$accessibleElement)
-                  bx2.$accessibleElement.focus()
+                // Modified May 2020: Focusing `accessibleElement` will always draw a border on bx2
+                // if (bx2.$accessibleElement)
+                //   bx2.$accessibleElement.focus()
               } else {
                 bx2.clear()
                 bx2.setInactive(false)

src/activities/text/WrittenAnswer.js

@@ -358,6 +358,21 @@ define([
       }
     }
 
+    /**
+     * Builds the accessible components needed for this ActivityPanel
+     * This method is called when all main elements are placed and visible, when the activity is ready
+     * to start or when resized.
+     * @override
+     */
+    buildAccessibleComponents() {
+      if (this.$canvas && this.accessibleCanvas) {
+        super.buildAccessibleComponents()
+        if (this.bgA)
+          this.bgA.buildAccessibleElements(this.$canvas, this.$div, 'click')
+        // bgB has a regular input element, so it's already accessible
+      }
+    }
+
     /**
      * Checks if all inverse associations are done
      * @returns {boolean}

src/boxes/ActiveBox.js

@@ -95,6 +95,10 @@ define([
         box.setContent(abc)
         box.setBounds(rect)
         $dom.append($canvas)
+        // Create accessible, focusable elements only for cells with media content
+        // TODO: remove focus mark on blur in cells placed on fillInBlanks activities
+        if (abc.mediaContent)
+          box.buildAccessibleElement($canvas, $dom)
         box.update($canvas.get(-1).getContext('2d'), rect)
         return box
       }
@@ -409,8 +413,10 @@ define([
         abc = this.getCurrentContent(),
         bb = this.getBoxBaseResolve()
 
-      if (this.isInactive() || !abc || this.dim.width < 2 || this.dim.height < 2)
+      if (this.isInactive() || !abc || this.dim.width < 2 || this.dim.height < 2) {
+        this._focusAccessibleElement(ctx)
         return true
+      }
 
       if (dirtyRegion && !this.intersects(dirtyRegion))
         return false
@@ -576,13 +582,20 @@ define([
         }
       }
 
+      this._focusAccessibleElement(ctx)
+
+      return true
+    }
+
+    /**
+     * Draw focus on accessible element if needed
+     * @param {external:CanvasRenderingContext2D} ctx - The canvas rendering context
+     */
+    _focusAccessibleElement(ctx) {
       if (Utils.settings.CANVAS_DRAW_FOCUS && this.$accessibleElement) {
-        const elem = this.$accessibleElement.get(-1);
         this.shape.preparePath(ctx);
-        ctx.drawFocusIfNeeded(elem);
+        ctx.drawFocusIfNeeded(this.$accessibleElement.get(-1));
       }
-
-      return true
     }
 
     /**
@@ -737,10 +750,10 @@ define([
         if (Utils.settings.CANVAS_DRAW_FOCUS) {
           this.$accessibleElement.on('focus blur', ev => {
             Utils.log('debug', `${ev.type} event on accessible element: ${this.toString()}`)
+            this.invalidate();
             if (this.container)
               this.container.update();
-            else
-              this.updateContent(canvas.getContext(), null);
+            this.updateContent(canvas.getContext('2d'), null);
           })
         }
       }