diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index a8e2ae4..e510153 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -1,4 +1,5 @@ var core = require('../core'); +var Device = require('ismobilejs'); // add some extra variables to the container.. Object.assign( @@ -17,6 +18,11 @@ */ function AccessibilityManager(renderer) { + if(Device.tablet || Device.phone) + { + this.createTouchHook(); + } + // first we create a div that will sit over the pixi element. This is where the div overlays will go. var div = document.createElement('div'); @@ -87,7 +93,7 @@ * @private */ this.isActive = false; - + this.isMobileAccessabillity = false; // let listen for tab.. once pressed we can fire up and show the accessibility layer window.addEventListener('keydown', this._onKeyDown, false); @@ -97,13 +103,37 @@ AccessibilityManager.prototype.constructor = AccessibilityManager; module.exports = AccessibilityManager; +AccessibilityManager.prototype.createTouchHook = function() +{ + var hookDiv = document.createElement('button'); + hookDiv.style.width = 1 + 'px'; + hookDiv.style.height = 1 + 'px'; + hookDiv.style.position = 'absolute'; + hookDiv.style.top = -1000+'px'; + hookDiv.style.left = -1000+'px'; + hookDiv.style.zIndex = 2; + hookDiv.style.backgroundColor = '#FF0000' + hookDiv.title = 'HOOK DIV'; + + hookDiv.addEventListener('focus', function(){ + + this.isMobileAccessabillity = true; + this.activate(); + document.body.removeChild(hookDiv); + + }.bind(this)); + + document.body.appendChild(hookDiv); + +} + /** * Activating will cause the Accessibility layer to be shown. This is called when a user preses the tab key * @private */ AccessibilityManager.prototype.activate = function() { - if(this.isActive) + if(this.isActive ) { return; } @@ -124,7 +154,8 @@ */ AccessibilityManager.prototype.deactivate = function() { - if(!this.isActive) + + if(!this.isActive || this.isMobileAccessabillity) { return; } @@ -178,8 +209,8 @@ AccessibilityManager.prototype.update = function() { if(!this.renderer.renderingToScreen) { - return; - } + return; + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index a8e2ae4..e510153 100644 --- a/src/accessibility/AccessibilityManager.js +++ b/src/accessibility/AccessibilityManager.js @@ -1,4 +1,5 @@ var core = require('../core'); +var Device = require('ismobilejs'); // add some extra variables to the container.. Object.assign( @@ -17,6 +18,11 @@ */ function AccessibilityManager(renderer) { + if(Device.tablet || Device.phone) + { + this.createTouchHook(); + } + // first we create a div that will sit over the pixi element. This is where the div overlays will go. var div = document.createElement('div'); @@ -87,7 +93,7 @@ * @private */ this.isActive = false; - + this.isMobileAccessabillity = false; // let listen for tab.. once pressed we can fire up and show the accessibility layer window.addEventListener('keydown', this._onKeyDown, false); @@ -97,13 +103,37 @@ AccessibilityManager.prototype.constructor = AccessibilityManager; module.exports = AccessibilityManager; +AccessibilityManager.prototype.createTouchHook = function() +{ + var hookDiv = document.createElement('button'); + hookDiv.style.width = 1 + 'px'; + hookDiv.style.height = 1 + 'px'; + hookDiv.style.position = 'absolute'; + hookDiv.style.top = -1000+'px'; + hookDiv.style.left = -1000+'px'; + hookDiv.style.zIndex = 2; + hookDiv.style.backgroundColor = '#FF0000' + hookDiv.title = 'HOOK DIV'; + + hookDiv.addEventListener('focus', function(){ + + this.isMobileAccessabillity = true; + this.activate(); + document.body.removeChild(hookDiv); + + }.bind(this)); + + document.body.appendChild(hookDiv); + +} + /** * Activating will cause the Accessibility layer to be shown. This is called when a user preses the tab key * @private */ AccessibilityManager.prototype.activate = function() { - if(this.isActive) + if(this.isActive ) { return; } @@ -124,7 +154,8 @@ */ AccessibilityManager.prototype.deactivate = function() { - if(!this.isActive) + + if(!this.isActive || this.isMobileAccessabillity) { return; } @@ -178,8 +209,8 @@ AccessibilityManager.prototype.update = function() { if(!this.renderer.renderingToScreen) { - return; - } + return; + } // update children... this.updateAccessibleObjects(this.renderer._lastObjectRendered); diff --git a/src/accessibility/accessibleTarget.js b/src/accessibility/accessibleTarget.js index 2202637..d37a9b4 100644 --- a/src/accessibility/accessibleTarget.js +++ b/src/accessibility/accessibleTarget.js @@ -13,11 +13,11 @@ * ); */ var accessibleTarget = { - + /** - * Flag for if the object is accessible. If true AccessibilityManager will overlay a + * Flag for if the object is accessible. If true AccessibilityManager will overlay a * shadow div with attributes set - * + * * @member {boolean} */ accessible:false, @@ -25,14 +25,14 @@ /** * Sets the title attribute of the shadow div * If accessibleTitle AND accessibleHint has not been this will default to 'displayObject [tabIndex]' - * + * * @member {string} */ accessibleTitle:null, /** * Sets the aria-label attribute of the shadow div - * + * * @member {string} */ accessibleHint:null,