2 * DO NOT EDIT THIS FILE.
3 * See the following change record for more information,
4 * https://www.drupal.org/node/2815083
8 (function (Drupal, Backbone, $) {
9 Drupal.ckeditor.AuralView = Backbone.View.extend({
11 'click .ckeditor-buttons a': 'announceButtonHelp',
12 'click .ckeditor-multiple-buttons a': 'announceSeparatorHelp',
13 'focus .ckeditor-button a': 'onFocus',
14 'focus .ckeditor-button-separator a': 'onFocus',
15 'focus .ckeditor-toolbar-group': 'onFocus'
18 initialize: function initialize() {
19 this.listenTo(this.model, 'change:isDirty', this.announceMove);
21 announceMove: function announceMove(model, isDirty) {
23 var item = document.activeElement || null;
26 if ($item.hasClass('ckeditor-toolbar-group')) {
27 this.announceButtonGroupPosition($item);
28 } else if ($item.parent().hasClass('ckeditor-button')) {
29 this.announceButtonPosition($item.parent());
34 onFocus: function onFocus(event) {
35 event.stopPropagation();
37 var $originalTarget = $(event.target);
38 var $currentTarget = $(event.currentTarget);
39 var $parent = $currentTarget.parent();
40 if ($parent.hasClass('ckeditor-button') || $parent.hasClass('ckeditor-button-separator')) {
41 this.announceButtonPosition($currentTarget.parent());
42 } else if ($originalTarget.attr('role') !== 'button' && $currentTarget.hasClass('ckeditor-toolbar-group')) {
43 this.announceButtonGroupPosition($currentTarget);
46 announceButtonGroupPosition: function announceButtonGroupPosition($group) {
47 var $groups = $group.parent().children();
48 var $row = $group.closest('.ckeditor-row');
49 var $rows = $row.parent().children();
50 var position = $groups.index($group) + 1;
51 var positionCount = $groups.not('.placeholder').length;
52 var row = $rows.index($row) + 1;
53 var rowCount = $rows.not('.placeholder').length;
54 var text = Drupal.t('@groupName button group in position @position of @positionCount in row @row of @rowCount.', {
55 '@groupName': $group.attr('data-drupal-ckeditor-toolbar-group-name'),
56 '@position': position,
57 '@positionCount': positionCount,
62 if (position === 1 && row === rowCount) {
64 text += Drupal.t('Press the down arrow key to create a new row.');
66 Drupal.announce(text, 'assertive');
68 announceButtonPosition: function announceButtonPosition($button) {
69 var $row = $button.closest('.ckeditor-row');
70 var $rows = $row.parent().children();
71 var $buttons = $button.closest('.ckeditor-buttons').children();
72 var $group = $button.closest('.ckeditor-toolbar-group');
73 var $groups = $group.parent().children();
74 var groupPosition = $groups.index($group) + 1;
75 var groupPositionCount = $groups.not('.placeholder').length;
76 var position = $buttons.index($button) + 1;
77 var positionCount = $buttons.length;
78 var row = $rows.index($row) + 1;
79 var rowCount = $rows.not('.placeholder').length;
81 var type = $button.attr('data-drupal-ckeditor-type') === 'separator' ? '' : Drupal.t('button');
84 if ($button.closest('.ckeditor-toolbar-disabled').length > 0) {
85 text = Drupal.t('@name @type.', {
86 '@name': $button.children().attr('aria-label'),
89 text += '\n' + Drupal.t('Press the down arrow key to activate.');
91 Drupal.announce(text, 'assertive');
92 } else if ($group.not('.placeholder').length === 1) {
93 text = Drupal.t('@name @type in position @position of @positionCount in @groupName button group in row @row of @rowCount.', {
94 '@name': $button.children().attr('aria-label'),
96 '@position': position,
97 '@positionCount': positionCount,
98 '@groupName': $group.attr('data-drupal-ckeditor-toolbar-group-name'),
100 '@rowCount': rowCount
103 if (groupPosition === 1 && position === 1 && row === rowCount) {
105 text += Drupal.t('Press the down arrow key to create a new button group in a new row.');
108 if (groupPosition === groupPositionCount && position === positionCount) {
110 text += Drupal.t('This is the last group. Move the button forward to create a new group.');
112 Drupal.announce(text, 'assertive');
115 announceButtonHelp: function announceButtonHelp(event) {
116 var $link = $(event.currentTarget);
117 var $button = $link.parent();
118 var enabled = $button.closest('.ckeditor-toolbar-active').length > 0;
119 var message = void 0;
122 message = Drupal.t('The "@name" button is currently enabled.', {
123 '@name': $link.attr('aria-label')
125 message += '\n' + Drupal.t('Use the keyboard arrow keys to change the position of this button.');
126 message += '\n' + Drupal.t('Press the up arrow key on the top row to disable the button.');
128 message = Drupal.t('The "@name" button is currently disabled.', {
129 '@name': $link.attr('aria-label')
131 message += '\n' + Drupal.t('Use the down arrow key to move this button into the active toolbar.');
133 Drupal.announce(message);
134 event.preventDefault();
136 announceSeparatorHelp: function announceSeparatorHelp(event) {
137 var $link = $(event.currentTarget);
138 var $button = $link.parent();
139 var enabled = $button.closest('.ckeditor-toolbar-active').length > 0;
140 var message = void 0;
143 message = Drupal.t('This @name is currently enabled.', {
144 '@name': $link.attr('aria-label')
146 message += '\n' + Drupal.t('Use the keyboard arrow keys to change the position of this separator.');
148 message = Drupal.t('Separators are used to visually split individual buttons.');
149 message += '\n' + Drupal.t('This @name is currently disabled.', {
150 '@name': $link.attr('aria-label')
152 message += '\n' + Drupal.t('Use the down arrow key to move this separator into the active toolbar.');
153 message += '\n' + Drupal.t('You may add multiple separators to each button group.');
155 Drupal.announce(message);
156 event.preventDefault();
159 })(Drupal, Backbone, jQuery);