diff --git a/CHANGELOG.md b/CHANGELOG.md index 7d80ca27..8ef83940 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/package.json b/package.json index f2462d83..69fc8995 100644 --- a/package.json +++ b/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", diff --git a/src/JClic.js b/src/JClic.js index 9c0094ad..6836b256 100644 --- a/src/JClic.js +++ b/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 diff --git a/src/activities/panels/Explore.js b/src/activities/panels/Explore.js index 554aca07..770b2135 100644 --- a/src/activities/panels/Explore.js +++ b/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) diff --git a/src/activities/text/WrittenAnswer.js b/src/activities/text/WrittenAnswer.js index 8ebd08c2..a372e774 100644 --- a/src/activities/text/WrittenAnswer.js +++ b/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} diff --git a/src/boxes/ActiveBox.js b/src/boxes/ActiveBox.js index 7caf39cb..799f5ee5 100644 --- a/src/boxes/ActiveBox.js +++ b/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); }) } }