scanning: a11y: Set focus on state changes

When the app opens, the focus is set onto the Scanner dropdown once it
finishes loading.
When a scan starts the focus is set on the Cancel button.
When a scan completes the focus is set on the scanned images.
Returning to the initial page after a completed scan, the focus
returns to the Scanner dropdown.

Bug: 1059779
Change-Id: I937eb956f52ff2a53ffcdd50c38be55138803800
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2581448
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Reviewed-by: Jesse Schettler <jschettler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#835923}

chromeos/components/scanning/resources/scan_preview.html

@@ -75,7 +75,8 @@
     --paper-progress-container-color: var(--google-grey-200);
   }
 </style>
-<div class="preview" aria-label="[[previewAriaLabel_]]">
+<div id="previewDiv" class="preview" aria-label="[[previewAriaLabel_]]"
+    tabindex="0">
   <div id="helpOrProgress" class="preview-item" hidden$="[[showScannedImages_]]"
       aria-hidden="true">
     <div id="helperText" hidden$="[[!showHelperText_]]">

chromeos/components/scanning/resources/scanning_app.js

@@ -27,7 +27,7 @@ import './source_select.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
-import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {afterNextRender, html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {getScanService} from './mojo_interface_provider.js';
 import {AppState, ScannerArr} from './scanning_app_types.js';
@@ -508,6 +508,18 @@ Polymer({
         this.appState_ === AppState.CANCELING;
     this.cancelButtonDisabled_ = this.appState_ === AppState.CANCELING;
     this.showDoneSection_ = this.appState_ === AppState.DONE;
+
+    // Need to wait for elements to render after updating their disabled and
+    // hidden attributes before they can be focused.
+    afterNextRender(this, () => {
+      if (this.appState_ === AppState.READY) {
+        this.$$('#scannerSelect').$$('#scannerSelect').focus();
+      } else if (this.appState_ === AppState.SCANNING) {
+        this.$$('#cancelButton').focus();
+      } else if (this.appState_ === AppState.DONE) {
+        this.$$('#scanPreview').$$('#previewDiv').focus();
+      }
+    });
   },
 
   /**