diff --git a/core/misc/tabbingmanager.js b/core/misc/tabbingmanager.js index 4593ec4..11cee64 100644 --- a/core/misc/tabbingmanager.js +++ b/core/misc/tabbingmanager.js @@ -69,7 +69,10 @@ * * @fires event:drupalTabbingConstrained */ - constrain: function (elements) { + constrain: function (elements, comprehensive) { + if (typeof comprehensive === 'undefined') { + comprehensive = false; + } // Deactivate all tabbingContexts to prepare for the new constraint. A // tabbingContext instance will only be reactivated if the stack is // unwound to it in the _unwindStack() method. @@ -80,7 +83,16 @@ // The "active tabbing set" are the elements tabbing should be constrained // to. - var $elements = $(elements).find(':tabbable').addBack(':tabbable'); + var $elements; + // Find tabbable elements within the set of supplied elements if expansion + // is requested. + if (!comprehensive) { + $elements = $(elements).find(':tabbable').addBack(':tabbable'); + } + // Assume that a list of tabbable elements is provided. + else { + $elements = $(elements); + } var tabbingContext = new TabbingContext({ // The level is the current height of the stack before this new diff --git a/core/modules/quickedit/css/quickedit.theme.css b/core/modules/quickedit/css/quickedit.theme.css index 399db7a..388fca1 100644 --- a/core/modules/quickedit/css/quickedit.theme.css +++ b/core/modules/quickedit/css/quickedit.theme.css @@ -10,6 +10,10 @@ .quickedit-field .quickedit-editable { box-shadow: 0 0 0 2px #74b7ff; } +.quickedit-field.quickedit-editable:focus, +.quickedit-field .quickedit-editable:focus { + box-shadow: 0 0 0 4px #74b7ff; +} /** * Highlighted (hovered) editable. diff --git a/core/modules/quickedit/js/editors/formEditor.js b/core/modules/quickedit/js/editors/formEditor.js index 4a5468e..8df4a5e 100644 --- a/core/modules/quickedit/js/editors/formEditor.js +++ b/core/modules/quickedit/js/editors/formEditor.js @@ -97,13 +97,22 @@ // Render form container. var $formContainer = this.$formContainer = $(Drupal.theme('quickeditFormContainer', { id: id, + 'aria-label': Drupal.t('Edit form for @aria', {'@aria': fieldModel.get('metadata').aria}), loadingMsg: Drupal.t('Loading…') } )); + // Add this form's id to the list of elements that the entity owns. + var $entity = $(this.fieldModel.get('entity').get('el')); + var owns = $entity.attr('aria-owns'); + if (owns) { + var ownsValues = owns.split(/\s+/); + ownsValues.push(id); + $entity.attr('aria-owns', ownsValues.join(' ')); + } + // Mark up the form with state classes. $formContainer .find('.quickedit-form') - .addClass('quickedit-editable quickedit-highlighted quickedit-editing') - .attr('role', 'dialog'); + .addClass('quickedit-editable quickedit-highlighted quickedit-editing'); // Insert form container in DOM. if (this.$el.css('display') === 'inline') { @@ -157,6 +166,9 @@ } }); + // Set focus on the form, so that the next tab goes to the first field + // in this container. + $formContainer.trigger('focus'); // The in-place editor has loaded; change state to 'active'. fieldModel.set('state', 'active'); }); @@ -178,6 +190,18 @@ .off('keypress.quickedit', 'input') .remove(); this.$formContainer = null; + // Remove the form id from the entity's aria-owns attribute. + var $entity = $(this.fieldModel.get('entity').get('el')); + var owns = $entity.attr('aria-owns'); + if (owns) { + var ownsValues = owns + .split(/\s+/) + .filter(function (id) { + // Remove id values that start with 'quickedit-form-for-'. + return (id.indexOf('quickedit-form-for-') !== 0); + }); + $entity.attr('aria-owns', ownsValues.join(' ')); + } }, /** diff --git a/core/modules/quickedit/js/theme.js b/core/modules/quickedit/js/theme.js index 76cf875..dae7587 100644 --- a/core/modules/quickedit/js/theme.js +++ b/core/modules/quickedit/js/theme.js @@ -35,7 +35,7 @@ */ Drupal.theme.quickeditEntityToolbar = function (settings) { var html = ''; - html += '
'; + html += '