core/modules/edit/js/app.js | 148 +----------------------------- core/modules/edit/js/edit.js | 27 ------ core/modules/edit/js/theme.js | 25 ----- core/modules/edit/js/views/modal-view.js | 2 - 4 files changed, 1 insertion(+), 201 deletions(-) diff --git a/core/modules/edit/js/app.js b/core/modules/edit/js/app.js index 645dca2..07f006f 100644 --- a/core/modules/edit/js/app.js +++ b/core/modules/edit/js/app.js @@ -134,17 +134,6 @@ }); // Manage the page's tab indexes. - // @todo Edit's a11y is temporarily disabled; see http://drupal.org/node/1913214. - /* - if (newState === 'candidate') { - this._manageDocumentFocus(); - Drupal.edit.setMessage(Drupal.t('In place edit mode is active'), Drupal.t('Page navigation is limited to editable items.'), Drupal.t('Press escape to exit')); - } - else if (newState === 'inactive') { - this._releaseDocumentFocusManagement(); - Drupal.edit.setMessage(Drupal.t('Edit mode is inactive.'), Drupal.t('Resume normal page navigation')); - } - */ }, /** @@ -323,7 +312,6 @@ // Keep track of the active editor in the global state. if (_.indexOf(this.activeEditorStates, to) !== -1 && this.model.get('activeEditor') !== editor) { this.model.set('activeEditor', editor); - Drupal.edit.setMessage(Drupal.t('An editor is active')); } else if (this.model.get('activeEditor') === editor && to === 'candidate') { // Discarded if it transitions from a changed state to 'candidate'. @@ -396,142 +384,8 @@ // Don't call .remove() on the decoration view, because that would remove // a potentially rerendered field. delete editor.decorationView; - }, - - /** - * Makes elements other than the editables unreachable via the tab key. - * - * @todo refactoring. - * - * This method is currently overloaded, handling elements of state modeling - * and application control. The state of the application is spread between - * this view, its model and aspects of the UI widgets in Create.js. In order - * to drive focus management from the application state (and have it - * influence that state of the application), we need to distall state out - * of Create.js components. - * - * This method introduces behaviors that support accessibility of the edit - * application. Although not yet integrated into the application properly, - * it does provide us with the opportunity to collect feedback from - * users who will interact with edit primarily through keyboard input. We - * want this feedback sooner than we can have a refactored application. - */ - _manageDocumentFocus: function () { - var editablesSelector = '.edit-candidate.edit-editable'; - var inputsSelector = 'a:visible, button:visible, input:visible, textarea:visible, select:visible'; - var $editables = $(editablesSelector) - .attr({ - 'tabindex': 0, - 'role': 'button' - }); - // Instantiate a variable to hold the editable element in the set. - var $currentEditable; - // We're using simple function scope to manage 'this' for the internal - // handler, so save this as that. - var that = this; - // Turn on focus management. - $(document).on('keydown.edit', function (event) { - var activeEditor, editableEntity, predicate; - // Handle esc key press. Close any active editors. - if (event.keyCode === 27) { - event.preventDefault(); - activeEditor = that.model.get('activeEditor'); - if (activeEditor) { - editableEntity = activeEditor.options.widget; - predicate = activeEditor.options.property; - editableEntity.setState('candidate', predicate, { reason: 'overlay' }); - } - else { - $(editablesSelector).trigger('tabOut.edit'); - // This should move into the state management for the app model. - location.hash = "#view"; - that.model.set('isViewing', true); - } - return; - } - // Handle enter or space key presses. - if (event.keyCode === 13 || event.keyCode === 32) { - if ($currentEditable && $currentEditable.is(editablesSelector)) { - $currentEditable.trigger('click'); - // Squelch additional handlers. - event.preventDefault(); - return; - } - } - // Handle tab key presses. - if (event.keyCode === 9) { - var context = ''; - // Include the view mode toggle with the editables selector. - var selector = editablesSelector + ', #toolbar-tab-edit'; - activeEditor = that.model.get('activeEditor'); - var $confirmDialog = $('#edit_modal'); - // If the edit modal is active, that is the tabbing context. - if ($confirmDialog.length) { - context = $confirmDialog; - selector = inputsSelector; - if (!$currentEditable || $currentEditable.is(editablesSelector)) { - $currentEditable = $(selector, context).eq(-1); - } - } - // If an editor is active, then the tabbing context is the editor and - // its toolbar. - else if (activeEditor) { - context = $(activeEditor.$formContainer).add(activeEditor.toolbarView.$el); - // Include the view mode toggle with the editables selector. - selector = inputsSelector; - if (!$currentEditable || $currentEditable.is(editablesSelector)) { - $currentEditable = $(selector, context).eq(-1); - } - } - // Otherwise the tabbing context is the list of editable predicates. - var $editables = $(selector, context); - if (!$currentEditable) { - $currentEditable = $editables.eq(-1); - } - var count = $editables.length - 1; - var index = $editables.index($currentEditable); - // Navigate backwards. - if (event.shiftKey) { - // Beginning of the set, loop to the end. - if (index === 0) { - index = count; - } - else { - index -= 1; - } - } - // Navigate forewards. - else { - // End of the set, loop to the start. - if (index === count) { - index = 0; - } - else { - index += 1; - } - } - // Tab out of the current editable. - $currentEditable.trigger('tabOut.edit'); - // Update the current editable. - $currentEditable = $editables - .eq(index) - .focus() - .trigger('tabIn.edit'); - // Squelch additional handlers. - event.preventDefault(); - event.stopPropagation(); - } - }); - // Set focus on the edit button initially. - $('#toolbar-tab-edit').focus(); - }, - /** - * Removes key management and edit accessibility features from the DOM. - */ - _releaseDocumentFocusManagement: function () { - $(document).off('keydown.edit'); - $('.edit-allowed.edit-field').removeAttr('tabindex role'); } + }); })(jQuery, _, Backbone, Drupal, VIE); diff --git a/core/modules/edit/js/edit.js b/core/modules/edit/js/edit.js index 639ff75..f924e7b 100644 --- a/core/modules/edit/js/edit.js +++ b/core/modules/edit/js/edit.js @@ -6,16 +6,6 @@ "use strict"; -/** - * The edit ARIA live message area. - * - * @todo Eventually the messages area should be converted into a Backbone View - * that will respond to changes in the application's model. For the initial - * implementation, we will call the Drupal.edit.setMessage method when an aural - * message should be read by the user agent. - */ -var $messages; - Drupal.edit = Drupal.edit || {}; Drupal.edit.metadataCache = Drupal.edit.metadataCache || {}; @@ -91,9 +81,6 @@ Drupal.behaviors.edit = { }; Drupal.edit.init = function() { - // Append a messages element for appending interaction updates for screen - // readers. - $messages = $(Drupal.theme('editMessageBox')).appendTo($(this).parent()); // Instantiate EditAppView, which is the controller of it all. EditAppModel // instance tracks global state (viewing/editing in-place). var appModel = new Drupal.edit.models.EditAppModel(); @@ -123,18 +110,4 @@ Drupal.edit.init = function() { Drupal.edit.app = app; }; -/** - * Places the message in the edit ARIA live message area. - * - * The message will be read by speaking User Agents. - * - * @param {String} message - * A string to be inserted into the message area. - */ -Drupal.edit.setMessage = function(message) { - var args = Array.prototype.slice.call(arguments); - args.unshift('editMessage'); - $messages.html(Drupal.theme.apply(this, args)); -}; - })(jQuery, _, Backbone, Drupal, drupalSettings); diff --git a/core/modules/edit/js/theme.js b/core/modules/edit/js/theme.js index 42f7613..f2452ba 100644 --- a/core/modules/edit/js/theme.js +++ b/core/modules/edit/js/theme.js @@ -152,29 +152,4 @@ Drupal.theme.editFormContainer = function(settings) { return html; }; -/** - * A region to post messages that a screen reading UA will announce. - * - * @return {String} - * A string representing a DOM fragment. - */ -Drupal.theme.editMessageBox = function() { - return '
'; -}; - -/** - * Wrap message strings in p tags. - * - * @return {String} - * A string representing a DOM fragment. - */ -Drupal.theme.editMessage = function() { - var messages = Array.prototype.slice.call(arguments); - var output = ''; - for (var i = 0; i < messages.length; i++) { - output += '

' + messages[i] + '

'; - } - return output; -}; - })(jQuery, Drupal); diff --git a/core/modules/edit/js/views/modal-view.js b/core/modules/edit/js/views/modal-view.js index edd158a..b98c876 100644 --- a/core/modules/edit/js/views/modal-view.js +++ b/core/modules/edit/js/views/modal-view.js @@ -55,8 +55,6 @@ Drupal.edit.views.ModalView = Backbone.View.extend({ setTimeout(function() { that.$el.removeClass('edit-animate-invisible'); }, 0); - - Drupal.edit.setMessage(Drupal.t('Confirmation dialog open')); }, /**