X-Git-Url: http://www.aleph1.co.uk/gitweb/?p=yaffs-website;a=blobdiff_plain;f=web%2Fcore%2Fmodules%2Ftoolbar%2Fjs%2Fviews%2FToolbarAuralView.es6.js;fp=web%2Fcore%2Fmodules%2Ftoolbar%2Fjs%2Fviews%2FToolbarAuralView.es6.js;h=c27b864f06dc8672c3b3a6f9c4b5e251dd684603;hp=0000000000000000000000000000000000000000;hb=9917807b03b64faf00f6a1f29dcb6eafc454efa5;hpb=aea91e65e895364e460983b890e295aa5d5540a5

diff --git a/web/core/modules/toolbar/js/views/ToolbarAuralView.es6.js b/web/core/modules/toolbar/js/views/ToolbarAuralView.es6.js
new file mode 100644
index 000000000..c27b864f0
--- /dev/null
+++ b/web/core/modules/toolbar/js/views/ToolbarAuralView.es6.js
@@ -0,0 +1,71 @@
+/**
+ * @file
+ * A Backbone view for the aural feedback of the toolbar.
+ */
+
+(function (Backbone, Drupal) {
+  Drupal.toolbar.ToolbarAuralView = Backbone.View.extend(/** @lends Drupal.toolbar.ToolbarAuralView# */{
+
+    /**
+     * Backbone view for the aural feedback of the toolbar.
+     *
+     * @constructs
+     *
+     * @augments Backbone.View
+     *
+     * @param {object} options
+     *   Options for the view.
+     * @param {object} options.strings
+     *   Various strings to use in the view.
+     */
+    initialize(options) {
+      this.strings = options.strings;
+
+      this.listenTo(this.model, 'change:orientation', this.onOrientationChange);
+      this.listenTo(this.model, 'change:activeTray', this.onActiveTrayChange);
+    },
+
+    /**
+     * Announces an orientation change.
+     *
+     * @param {Drupal.toolbar.ToolbarModel} model
+     *   The toolbar model in question.
+     * @param {string} orientation
+     *   The new value of the orientation attribute in the model.
+     */
+    onOrientationChange(model, orientation) {
+      Drupal.announce(Drupal.t('Tray orientation changed to @orientation.', {
+        '@orientation': orientation,
+      }));
+    },
+
+    /**
+     * Announces a changed active tray.
+     *
+     * @param {Drupal.toolbar.ToolbarModel} model
+     *   The toolbar model in question.
+     * @param {HTMLElement} tray
+     *   The new value of the tray attribute in the model.
+     */
+    onActiveTrayChange(model, tray) {
+      const relevantTray = (tray === null) ? model.previous('activeTray') : tray;
+      // Current activeTray and previous activeTray are empty, no state change
+      // to announce.
+      if (!relevantTray) {
+        return;
+      }
+      const action = (tray === null) ? Drupal.t('closed') : Drupal.t('opened');
+      const trayNameElement = relevantTray.querySelector('.toolbar-tray-name');
+      let text;
+      if (trayNameElement !== null) {
+        text = Drupal.t('Tray "@tray" @action.', {
+          '@tray': trayNameElement.textContent, '@action': action,
+        });
+      }
+      else {
+        text = Drupal.t('Tray @action.', { '@action': action });
+      }
+      Drupal.announce(text);
+    },
+  });
+}(Backbone, Drupal));