From 64f0c409873154d17998c0a149ffbec95daf270a Mon Sep 17 00:00:00 2001 From: Jesse Greenberg Date: Thu, 5 Apr 2018 17:17:57 -0600 Subject: [PATCH] Remove timeout workaround for Edge, replace with forcing DOM redraw, see phetsims/a11y-research#30 and https://github.com/phetsims/resistance-in-a-wire/issues/141 --- js/accessibility/AccessibleInstance.js | 27 ++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/js/accessibility/AccessibleInstance.js b/js/accessibility/AccessibleInstance.js index 58d41ee0e..124889503 100644 --- a/js/accessibility/AccessibleInstance.js +++ b/js/accessibility/AccessibleInstance.js @@ -244,20 +244,23 @@ define( function( require ) { var parentElement = this.peer.getParentContainerElement(); var self = this; - var hideParent = function() { - parentElement.hidden = !( visibilityCount === self.trailDiff.length ); + parentElement.hidden = !( visibilityCount === self.trailDiff.length ); - // if we hid a parent element, blur focus if active element was an ancestor - if ( parentElement.hidden ) { - if ( parentElement.contains( document.activeElement ) ) { - scenery.Display.focus = null; - } + // if we hid a parent element, blur focus if active element was an ancestor + if ( parentElement.hidden ) { + if ( parentElement.contains( document.activeElement ) ) { + scenery.Display.focus = null; } - }; - - // wrapping the hiding and bluring in a timeout is a workaround for an Edge bug where unhidden elements remain - // excluded from the navigation order, see https://github.com/phetsims/a11y-research/issues/30 - platform.edge ? window.setTimeout( hideParent, 1 ) : hideParent(); + } + + // Edge has a bug where removing the hidden attribute on an ancestor doesn't add elements back to the navigation + // order. As a workaround, forcing the browser to redraw the PDOM seems to fix the issue. Forced redraw method + // recommended by https://stackoverflow.com/questions/8840580/force-dom-redraw-refresh-on-chrome-mac, also see + // https://github.com/phetsims/a11y-research/issues/30 + if ( platform.edge ) { + this.display.getAccessibleDOMElement().style.display = 'none'; + this.display.getAccessibleDOMElement().style.display = 'block'; + } }, /**