A11y - for diff mode selector
Add announcement when diff mode changed.
Inform user which mode is selected when focusing button.
Change-Id: If2b58ec90d6a4ab6399fc958476b9c43210784ad
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.ts b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.ts
index c1447d4..bec07f0 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.ts
+++ b/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 {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 @@
};
}
+interface FixIronA11yAnnouncer extends IronA11yAnnouncer {
+ requestAvailability(): void;
+}
+
@customElement('gr-diff-mode-selector')
export class GrDiffModeSelector extends GestureEventListeners(
LegacyElementMixin(PolymerElement)
@@ -50,6 +56,10 @@
@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 @@
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 @@
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);
}
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector_html.ts b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector_html.ts
index 73f7426..a5bf269 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector_html.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector_html.ts
@@ -36,6 +36,7 @@
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 @@
has-tooltip=""
title="Unified diff"
class$="[[_computeUnifiedSelected(mode)]]"
+ aria-pressed="[[isUnifiedSelected(mode)]]"
on-click="_handleUnifiedTap"
>
<iron-icon icon="gr-icons:unified"></iron-icon>
diff --git a/polygerrit-ui/app/package.json b/polygerrit-ui/app/package.json
index d6e94fc..a67bf4a 100644
--- a/polygerrit-ui/app/package.json
+++ b/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",
diff --git a/polygerrit-ui/app/yarn.lock b/polygerrit-ui/app/yarn.lock
index 45e0ea7..16a9f78 100644
--- a/polygerrit-ui/app/yarn.lock
+++ b/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==
