MD User Manager: fixes accessibility issues

chrome/browser/resources/md_user_manager/user_manager_pages.html

 <link rel="import" href="chrome://md-user-manager/create_profile.html">
 <link rel="import" href="chrome://md-user-manager/supervised_user_create_confirm.html">
 <link rel="import" href="chrome://md-user-manager/supervised_user_learn_more.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/slide-from-left-animation.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/slide-right-animation.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animated-pages.html">
 
 <dom-module id="user-manager-pages">
   <template>
     <style>
       neon-animated-pages {
         height: 100%;
       }
 
       neon-animated-pages > div {
         display: flex;
         justify-content: center;
       }
+
+      neon-animated-pages > div:not(.iron-selected) > ::content > * {

[tommycli, 2016/05/04 17:04:11]

Hmm... why is this necessary? I thought not-selected animated pages were
automatically not visible?

Is this because of the above CSS rule applying to neon-animated-pages > div?

[Moe, 2016/05/04 17:33:52]

neon-animated-pages works as expected. Note that if you look at the full source
of this file, user-manager-pages has its own content element (other than the
extra one that i removed). Q: why does it have its own content element? b/c for
countless reasons i can't componentize its distributed children and bring them
into this file! One reason being that the user pods JS/logic is complex and
shared between cros and desktop.

neon-animated-pages hides non-selected pages which are the wrapper divs (<div
id="...">). That does not penetrate to distributed children of
user-manager-pages. this new rules basically says "if a wrapper div is not
selected and has a <content> tag as a child, go ahead and hide the elements
under <content> as well."

'!important' is also needed b/c some of those children set 'display: block'
using id which is more specific and therefore takes priority.

[tommycli, 2016/05/04 17:56:02]

Hmm... I see. Do you still need this rule if the isPageVisible_ dom-if
statements are gone?

I suspect (though I'm not sure) that the <content></content> tag is not stamped
until after isPageVisible_ is true, and that's why the light-dom content is not
auto-hidden.

[tommycli, 2016/05/04 18:58:12]

I just spoke to michaelpg about this topic. Basically - <content> should never
be within a dom-if. Bad things happen.

[Moe, 2016/05/04 19:37:40]

I took content out of dom-if. user-pods-page is the default page anyway. so let
it get stamped right away. However, we still seem to need this rule. setting
'display: none' on <content> doesn't seem to propagate to its children. (based
on chrome's accessibility extension test results).

[tommycli, 2016/05/04 20:16:57]

Okay that's fine, can you just add a comment above explaining that
neon-animated-pages doesn't hide the content automatically?

+        display: none !important;
+      }
     </style>
     <neon-animated-pages id="animatedPages" attr-for-selected="id"
         selected="[[selectedPage_]]" entry-animation="slide-from-left-animation"
         exit-animation="slide-right-animation">
       <div id="create-user-page">
         <template is="dom-if"
             if="[[isPageVisible_(selectedPage_, 'create-user-page')]]" restamp>
           <create-profile></create-profile>
         </template>
       </div>
       <div id="user-pods-page">
         <template is="dom-if"
             if="[[isPageVisible_(selectedPage_, 'user-pods-page')]]">
           <content></content>
         </template>
       </div>
       <div id="supervised-learn-more-page">
         <template is="dom-if"
             if="[[isPageVisible_(selectedPage_,
                                  'supervised-learn-more-page')]]">
           <supervised-user-learn-more></supervised-user-learn-more>
         </template>
       </div>
       <div id="supervised-create-confirm-page">
         <template is="dom-if"
-            if="[[isPageVisible_(selectedPage_, 'supervised-create-confirm-page')]]">
+            if="[[isPageVisible_(selectedPage_,
+                                 'supervised-create-confirm-page')]]">
           <supervised-user-create-confirm profile-info="[[pageData_]]">
           </supervised-user-create-confirm>
         </template>
       </div>
-      <content></content>
     </neon-animated-pages>
   </template>
   <script src="chrome://md-user-manager/user_manager_pages.js"></script>
 </dom-module>