annotate core/modules/contextual/js/toolbar/views/AuralView.es6.js @ 19:fa3358dc1485 tip

Add ndrum files
author Chris Cannam
date Wed, 28 Aug 2019 13:14:47 +0100
parents 129ea1e6d783
children
rev   line source
Chris@0 1 /**
Chris@0 2 * @file
Chris@0 3 * A Backbone View that provides the aural view of the edit mode toggle.
Chris@0 4 */
Chris@0 5
Chris@17 6 (function($, Drupal, Backbone, _) {
Chris@17 7 Drupal.contextualToolbar.AuralView = Backbone.View.extend(
Chris@17 8 /** @lends Drupal.contextualToolbar.AuralView# */ {
Chris@17 9 /**
Chris@17 10 * Tracks whether the tabbing constraint announcement has been read once.
Chris@17 11 *
Chris@17 12 * @type {bool}
Chris@17 13 */
Chris@17 14 announcedOnce: false,
Chris@0 15
Chris@17 16 /**
Chris@17 17 * Renders the aural view of the edit mode toggle (screen reader support).
Chris@17 18 *
Chris@17 19 * @constructs
Chris@17 20 *
Chris@17 21 * @augments Backbone.View
Chris@17 22 *
Chris@17 23 * @param {object} options
Chris@17 24 * Options for the view.
Chris@17 25 */
Chris@17 26 initialize(options) {
Chris@17 27 this.options = options;
Chris@0 28
Chris@17 29 this.listenTo(this.model, 'change', this.render);
Chris@17 30 this.listenTo(this.model, 'change:isViewing', this.manageTabbing);
Chris@0 31
Chris@17 32 $(document).on('keyup', _.bind(this.onKeypress, this));
Chris@17 33 this.manageTabbing();
Chris@17 34 },
Chris@0 35
Chris@17 36 /**
Chris@17 37 * @inheritdoc
Chris@17 38 *
Chris@17 39 * @return {Drupal.contextualToolbar.AuralView}
Chris@17 40 * The current contextual toolbar aural view.
Chris@17 41 */
Chris@17 42 render() {
Chris@17 43 // Render the state.
Chris@17 44 this.$el
Chris@17 45 .find('button')
Chris@17 46 .attr('aria-pressed', !this.model.get('isViewing'));
Chris@17 47
Chris@17 48 return this;
Chris@17 49 },
Chris@17 50
Chris@17 51 /**
Chris@17 52 * Limits tabbing to the contextual links and edit mode toolbar tab.
Chris@17 53 */
Chris@17 54 manageTabbing() {
Chris@17 55 let tabbingContext = this.model.get('tabbingContext');
Chris@17 56 // Always release an existing tabbing context.
Chris@17 57 if (tabbingContext) {
Chris@17 58 // Only announce release when the context was active.
Chris@17 59 if (tabbingContext.active) {
Chris@17 60 Drupal.announce(this.options.strings.tabbingReleased);
Chris@17 61 }
Chris@17 62 tabbingContext.release();
Chris@17 63 }
Chris@17 64 // Create a new tabbing context when edit mode is enabled.
Chris@17 65 if (!this.model.get('isViewing')) {
Chris@17 66 tabbingContext = Drupal.tabbingManager.constrain(
Chris@17 67 $('.contextual-toolbar-tab, .contextual'),
Chris@17 68 );
Chris@17 69 this.model.set('tabbingContext', tabbingContext);
Chris@17 70 this.announceTabbingConstraint();
Chris@17 71 this.announcedOnce = true;
Chris@17 72 }
Chris@17 73 },
Chris@17 74
Chris@17 75 /**
Chris@17 76 * Announces the current tabbing constraint.
Chris@17 77 */
Chris@17 78 announceTabbingConstraint() {
Chris@17 79 const strings = this.options.strings;
Chris@17 80 Drupal.announce(
Chris@17 81 Drupal.formatString(strings.tabbingConstrained, {
Chris@17 82 '@contextualsCount': Drupal.formatPlural(
Chris@17 83 Drupal.contextual.collection.length,
Chris@17 84 '@count contextual link',
Chris@17 85 '@count contextual links',
Chris@17 86 ),
Chris@17 87 }),
Chris@17 88 );
Chris@17 89 Drupal.announce(strings.pressEsc);
Chris@17 90 },
Chris@17 91
Chris@17 92 /**
Chris@17 93 * Responds to esc and tab key press events.
Chris@17 94 *
Chris@17 95 * @param {jQuery.Event} event
Chris@17 96 * The keypress event.
Chris@17 97 */
Chris@17 98 onKeypress(event) {
Chris@17 99 // The first tab key press is tracked so that an announcement about
Chris@17 100 // tabbing constraints can be raised if edit mode is enabled when the page
Chris@17 101 // is loaded.
Chris@17 102 if (
Chris@17 103 !this.announcedOnce &&
Chris@17 104 event.keyCode === 9 &&
Chris@17 105 !this.model.get('isViewing')
Chris@17 106 ) {
Chris@17 107 this.announceTabbingConstraint();
Chris@17 108 // Set announce to true so that this conditional block won't run again.
Chris@17 109 this.announcedOnce = true;
Chris@17 110 }
Chris@17 111 // Respond to the ESC key. Exit out of edit mode.
Chris@17 112 if (event.keyCode === 27) {
Chris@17 113 this.model.set('isViewing', true);
Chris@17 114 }
Chris@17 115 },
Chris@0 116 },
Chris@17 117 );
Chris@17 118 })(jQuery, Drupal, Backbone, _);