A11y - for diff mode selector

Add announcement when diff mode changed.
Inform user which mode is selected when focusing button.

Change-Id: If2b58ec90d6a4ab6399fc958476b9c43210784ad

polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.ts

@@ -15,6 +15,7 @@
  * limitations under the License.
  */
 import '@polymer/iron-icon/iron-icon';
+import '@polymer/iron-a11y-announcer/iron-a11y-announcer';
 import '../../../styles/shared-styles';
 import '../../shared/gr-button/gr-button';
 import '../../shared/gr-rest-api-interface/gr-rest-api-interface';
@@ -25,6 +26,7 @@ import {LegacyElementMixin} from '@polymer/polymer/lib/legacy/legacy-element-mix
 import {PolymerElement} from '@polymer/polymer/polymer-element';
 import {htmlTemplate} from './gr-diff-mode-selector_html';
 import {customElement, property} from '@polymer/decorators';
+import {IronA11yAnnouncer} from '@polymer/iron-a11y-announcer/iron-a11y-announcer';
 
 export interface GrDiffModeSelector {
   $: {
@@ -32,6 +34,10 @@ export interface GrDiffModeSelector {
   };
 }
 
+interface FixIronA11yAnnouncer extends IronA11yAnnouncer {
+  requestAvailability(): void;
+}
+
 @customElement('gr-diff-mode-selector')
 export class GrDiffModeSelector extends GestureEventListeners(
   LegacyElementMixin(PolymerElement)
@@ -50,6 +56,10 @@ export class GrDiffModeSelector extends GestureEventListeners(
   @property({type: Boolean})
   saveOnChange = false;
 
+  attached() {
+    ((IronA11yAnnouncer as unknown) as FixIronA11yAnnouncer).requestAvailability();
+  }
+
   /**
    * Set the mode. If save on change is enabled also update the preference.
    */
@@ -58,6 +68,21 @@ export class GrDiffModeSelector extends GestureEventListeners(
       this.$.restAPI.savePreferences({diff_view: newMode});
     }
     this.mode = newMode;
+    let annoucement;
+    if (this.isUnifiedSelected(newMode)) {
+      annoucement = 'Changed diff view to unified';
+    } else if (this.isSideBySideSelected(newMode)) {
+      annoucement = 'Changed diff view to side by side';
+    }
+    if (annoucement) {
+      this.fire(
+        'iron-announce',
+        {
+          text: annoucement,
+        },
+        {bubbles: true}
+      );
+    }
   }
 
   _computeSideBySideSelected(mode: DiffViewMode) {
@@ -68,6 +93,14 @@ export class GrDiffModeSelector extends GestureEventListeners(
     return mode === DiffViewMode.UNIFIED ? 'selected' : '';
   }
 
+  isSideBySideSelected(mode: DiffViewMode) {
+    return mode === DiffViewMode.SIDE_BY_SIDE;
+  }
+
+  isUnifiedSelected(mode: DiffViewMode) {
+    return mode === DiffViewMode.UNIFIED;
+  }
+
   _handleSideBySideTap() {
     this.setMode(DiffViewMode.SIDE_BY_SIDE);
   }

polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector_html.ts

@@ -36,6 +36,7 @@ export const htmlTemplate = html`
     has-tooltip=""
     class$="[[_computeSideBySideSelected(mode)]]"
     title="Side-by-side diff"
+    aria-pressed="[[isSideBySideSelected(mode)]]"
     on-click="_handleSideBySideTap"
   >
     <iron-icon icon="gr-icons:side-by-side"></iron-icon>
@@ -46,6 +47,7 @@ export const htmlTemplate = html`
     has-tooltip=""
     title="Unified diff"
     class$="[[_computeUnifiedSelected(mode)]]"
+    aria-pressed="[[isUnifiedSelected(mode)]]"
     on-click="_handleUnifiedTap"
   >
     <iron-icon icon="gr-icons:unified"></iron-icon>

polygerrit-ui/app/package.json

@@ -6,6 +6,7 @@
     "@polymer/decorators": "^3.0.0",
     "@polymer/font-roboto-local": "^3.0.2",
     "@polymer/iron-a11y-keys-behavior": "^3.0.1",
+    "@polymer/iron-a11y-announcer": "^3.0.1",
     "@polymer/iron-autogrow-textarea": "^3.0.3",
     "@polymer/iron-dropdown": "^3.0.1",
     "@polymer/iron-fit-behavior": "^3.0.2",

polygerrit-ui/app/yarn.lock

@@ -19,7 +19,7 @@
   resolved "https://registry.yarnpkg.com/@polymer/font-roboto/-/font-roboto-3.0.2.tgz#80cdaa7225db2359130dfb2c6d9a3be1820020c3"
   integrity sha512-tx5TauYSmzsIvmSqepUPDYbs4/Ejz2XbZ1IkD7JEGqkdNUJlh+9KU85G56Tfdk/xjEZ8zorFfN09OSwiMrIQWA==
 
-"@polymer/iron-a11y-announcer@^3.0.0-pre.26":
+"@polymer/iron-a11y-announcer@^3.0.0-pre.26", "@polymer/iron-a11y-announcer@^3.0.1":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@polymer/iron-a11y-announcer/-/iron-a11y-announcer-3.1.0.tgz#3d3712a165070ed3cdfc39e54f95515c913c9613"
   integrity sha512-lc5i4NKB8kSQHH0Hwu8WS3ym93m+J69OHJWSSBxwd17FI+h2wmgxDzeG9LI4ojMMck17/uc2pLe7g/UHt5/K/A==