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>
