diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index a8e2ae4..412f262 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'); @@ -88,7 +94,6 @@ */ this.isActive = false; - // let listen for tab.. once pressed we can fire up and show the accessibility layer window.addEventListener('keydown', this._onKeyDown, false); } @@ -97,6 +102,29 @@ 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.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 @@ -124,6 +152,7 @@ */ AccessibilityManager.prototype.deactivate = function() { + return; if(!this.isActive) { return; diff --git a/src/accessibility/AccessibilityManager.js b/src/accessibility/AccessibilityManager.js index a8e2ae4..412f262 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'); @@ -88,7 +94,6 @@ */ this.isActive = false; - // let listen for tab.. once pressed we can fire up and show the accessibility layer window.addEventListener('keydown', this._onKeyDown, false); } @@ -97,6 +102,29 @@ 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.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 @@ -124,6 +152,7 @@ */ AccessibilityManager.prototype.deactivate = function() { + return; if(!this.isActive) { return; 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,