MD User Manager: fixes accessibility issues

chrome/browser/resources/md_user_manager/import_supervised_user.html

 <link rel="import" href="chrome://md-user-manager/profile_browser_proxy.html">
 <link rel="import" href="chrome://md-user-manager/shared_styles.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
 
 <dom-module id="import-supervised-user">
   <template>
     <style include="shared-styles">
       #backdrop {
         align-items: center;
         background: rgba(255, 255, 255, 0.6);
         bottom: 0;
         display: flex;
         justify-content: center;
@@ skipping 13 matching lines @@
         width: 512px;
       }
 
       #title-bar {
         align-items: center;
         border-bottom: 1px solid rgba(0, 0, 0, .12);
         font-size: 16px;
         padding: 16px;
       }
 
-      #title-bar iron-icon {
-        --iron-icon-height: 12px;
-        --iron-icon-width: 12px;
+      #title-bar paper-icon-button {
+        --paper-icon-button: {
+          height: 36px;
+          width: 36px;
+        };
       }
 
       #message {
         padding: 20px 16px 16px;
         white-space: pre-wrap;
         word-wrap: break-word;
       }
 
-      #user-list .list-item {
-        align-items: center;
-        display: flex;
-        height: 52px;
-        padding: 0 16px;
+      paper-listbox {
+        --paper-listbox: {
+          padding: 0;
+          color: inherit;
+        };
       }
 
-      #user-list .list-item .profile-img {
+      paper-listbox paper-item {
+        --paper-item: {
+          font-size: inherit;
+          height: 52px;
+          line-height: inherit;
+          padding: 0 16px;
+        };
+        --paper-item-disabled: {
+          color: inherit;
+        };
+        --paper-item-focused: {
+          background: rgba(0, 0, 0, .04);
+        };
+        --paper-item-focused-before: {
+          background: none;
+        };
+        --paper-item-selected: {
+          background: rgba(0, 0, 0, .04);
+          font-weight: normal;
+        };
+      }
+
+      paper-listbox paper-item .profile-img {
         flex-shrink: 0;
       }
 
-      #user-list .list-item .profile-name {
+      paper-listbox paper-item .profile-name {
         -webkit-margin-start: 10px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
 
-      #user-list .list-item .on-device {
+      paper-listbox paper-item .on-device {
         -webkit-margin-start: 10px;
         flex-shrink: 0;
       }
 
-      #user-list .list-item.selectable.iron-selected {
-        background: var(--paper-grey-200);
-      }
-
       #actions {
         margin-top: 20px;
         padding: 16px;
       }
     </style>
     <template is="dom-if" if="[[!popupHidden_]]">
       <div id="backdrop">
         <div id="dialog">
           <div id="title-bar" class="horizontal justified layout">
             <span id="title">$i18n{supervisedUserImportTitle}</span>
-            <iron-icon icon="close" on-tap="onCancelTap_"></iron-icon>
+            <paper-icon-button icon="close" on-tap="onCancelTap_">
+            </paper-icon-button>
           </div>
           <div id="message">[[getMessage_(supervisedUsers_)]]</div>
-          <div id="user-list" class="content-area">
-            <iron-selector selected="{{supervisedUserIndex_}}"
-                selectable=".selectable">
-              <template is="dom-repeat" items="[[supervisedUsers_]]">
-                <div class$="[[getUserClassNames_(item)]]">
-                  <img class="profile-img" src="[[item.iconURL]]"></img>
-                  <div class="profile-name">[[item.name]]</div>
-                  <div class="on-device" hidden="[[!item.onCurrentDevice]]">
-                    $i18n{supervisedUserAlreadyOnThisDevice}
-                  </div>
+          <paper-listbox selected="{{supervisedUserIndex_}}">
+            <template is="dom-repeat" items="[[supervisedUsers_]]">
+              <paper-item disabled="[[item.onCurrentDevice]]">
+                <img class="profile-img" src="[[item.iconURL]]"></img>
+                <div class="profile-name">[[item.name]]</div>
+                <div class="on-device" hidden="[[!item.onCurrentDevice]]">
+                  $i18n{supervisedUserAlreadyOnThisDevice}
                 </div>
-              </template>
-            </iron-selector>
-          </div>
+              </paper-item>
+            </template>
+          </paper-listbox>
           <div id="actions" class="horizontal end-justified layout">
             <paper-button id="cancel" class="action secondary"
                 on-tap="onCancelTap_">
               $i18n{cancel}
             </paper-button>
             <paper-button id="import" class="action primary"
                 on-tap="onImportTap_"
                 disabled="[[isImportDisabled_(supervisedUserIndex_)]]">
               $i18n{supervisedUserImportOk}
             </paper-button>
           </div>
         </div>
       </div>
     </template>
   </template>
   <script src="chrome://md-user-manager/import_supervised_user.js"></script>
 </dom-module>