Merge pull request #32275 from yzen/bug-1212007

Bug 1212007 - making sure that pin dialog is trully hidden from a11y …

apps/system/style/chrome/chrome.css

@@ -318,6 +318,7 @@ html[dir="rtl"] .pin-dialog.hidden ~ .controls .urlbar::before {
 }
 
 section.pin-dialog {
+  visibility: visible;
   display: block;
   position: absolute;
   margin: 0 1rem;
@@ -327,14 +328,13 @@ section.pin-dialog {
   font-size: 1.2rem;
   color: #858585;
   box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
-  pointer-events: auto;
   transform: translateY(0) translateX(0) scale(1);
-  transition: opacity var(--transition-duration), transform var(--transition-duration);
+  transition: visibility var(--transition-duration), opacity var(--transition-duration), transform var(--transition-duration);
 }
 
 section.pin-dialog.hidden {
   opacity: 0;
-  pointer-events: none;
+  visibility: hidden;
 }
 html[dir="ltr"] section.pin-dialog.hidden {
   transform: translateY(-50%) translateX(-50%) scale(.3);
@@ -362,7 +362,7 @@ html[dir="rtl"] section.pin-dialog.hidden {
 }
 
 section.pin-dialog.hidden + .pin-scrim {
-  pointer-events: none;
+  visibility: hidden;
   opacity: 0;
 }
 

apps/system/test/marionette/browser_chrome_title_test.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var assert = require('assert');
+
 var urlUtility = require('url');
 var Server = require('../../../../shared/test/integration/server');
 var Rocketbar = require('./lib/rocketbar');
@@ -42,7 +44,7 @@ marionette('Browser Chrome - Title content', function() {
     var expectedTitle = 'Calendar';
     var appOrigin = 'app://calendar.gaiamobile.org';
     client.apps.launch(appOrigin);
-
+    assert(!system.pinDialog.displayed(), 'Pin dialog is invisible');
     client.waitFor(function(){
       return system.appUrlbar.text() === expectedTitle;
     });
@@ -53,7 +55,7 @@ marionette('Browser Chrome - Title content', function() {
     var expectedTitle = 'Fake Chrome Navigation';
     var appOrigin = 'app://fakechromenavapp.gaiamobile.org';
     client.apps.launch(appOrigin);
-
+    assert(!system.pinDialog.displayed(), 'Pin dialog is invisible');
     client.waitFor(function(){
       return system.appUrlbar.text() === expectedTitle;
     });

apps/system/test/marionette/fullscreen_app_statusbar_visibility_test.js

@@ -27,6 +27,7 @@ marionette('Fullscreen status bar visibility >', function() {
   test('Status bar visibility in fullscreen app', function() {
     assert(!system.statusbarMaximizedWrapper.displayed(),
       'The status bar maximized wrapper is invisible');
+    assert(!system.pinDialog.displayed(), 'Pin dialog is invisible');
     assert(!system.statusbarMinimizedWrapper.displayed(),
       'The status bar minimized wrapper is invisible');
   });

apps/system/test/marionette/fullscreen_layout_app_statusbar_visibility_test.js

@@ -28,6 +28,7 @@ marionette('Fullscreen layout status bar visibility >', function() {
   test('Status bar visibility in fullscreen layout app', function() {
     assert(!system.statusbarMaximizedWrapper.displayed(),
       'The status bar maximized wrapper is invisible');
+    assert(!system.pinDialog.displayed(), 'Pin dialog is invisible');
     assert(!system.statusbarMinimizedWrapper.displayed(),
       'The status bar minimized wrapper is invisible');
   });