diff --git a/core/modules/edit/css/edit.theme.css b/core/modules/edit/css/edit.theme.css index bf5d0eb..86c5fd1 100644 --- a/core/modules/edit/css/edit.theme.css +++ b/core/modules/edit/css/edit.theme.css @@ -10,6 +10,10 @@ .edit-field .edit-editable { box-shadow: 0 0 0 2px #74b7ff; } +.edit-field.edit-editable:focus, +.edit-field .edit-editable:focus { + box-shadow: 0 0 0 4px #74b7ff; +} /** * Highlighted (hovered) editable. diff --git a/core/modules/edit/js/editors/formEditor.js b/core/modules/edit/js/editors/formEditor.js index 8910e82..59a3d0d 100644 --- a/core/modules/edit/js/editors/formEditor.js +++ b/core/modules/edit/js/editors/formEditor.js @@ -76,9 +76,12 @@ Drupal.edit.editors.form = Drupal.edit.EditorView.extend({ )); // 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').split(' '); - owns.push(id); - $entity.attr('aria-owns', owns.join(' ')); + var owns = $entity.attr('aria-owns'); + if (owns) { + owns = owns.split(' '); + owns.push(id); + $entity.attr('aria-owns', owns.join(' ')); + } // Mark up the form with state classes. $formContainer .find('.edit-form') @@ -161,15 +164,17 @@ Drupal.edit.editors.form = Drupal.edit.EditorView.extend({ 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') - .split(' ') - .filter(function (id) { - // Remove id values that start with 'edit-form-for-'. - return (id.indexOf('edit-form-for-') !== 0); - }) - .join(' '); - $entity.attr('aria-owns', owns); + var owns = $entity.attr('aria-owns'); + if (owns) { + owns + .split(' ') + .filter(function (id) { + // Remove id values that start with 'edit-form-for-'. + return (id.indexOf('edit-form-for-') !== 0); + }) + .join(' '); + $entity.attr('aria-owns', owns); + } }, /** diff --git a/core/modules/edit/js/views/FieldDecorationView.js b/core/modules/edit/js/views/FieldDecorationView.js index 4172840..0881d3f 100644 --- a/core/modules/edit/js/views/FieldDecorationView.js +++ b/core/modules/edit/js/views/FieldDecorationView.js @@ -31,6 +31,9 @@ Drupal.edit.FieldDecorationView = Backbone.View.extend({ this.listenTo(this.model, 'change:state', this.stateChange); this.listenTo(this.model, 'change:isChanged change:inTempStore', this.renderChanged); + + var fn = this.onKeypress.bind(this); + $(document).on('keypress.edit', fn); }, /** @@ -39,6 +42,7 @@ Drupal.edit.FieldDecorationView = Backbone.View.extend({ remove: function () { // The el property is the field, which should not be removed. Remove the // pointer to it, then call Backbone.View.prototype.remove(). + $(document).off('keypress.edit'); this.setElement(); Backbone.View.prototype.remove.call(this); }, @@ -128,6 +132,17 @@ Drupal.edit.FieldDecorationView = Backbone.View.extend({ }, /** + * Triggers a click event on fields when the enter key is pressed on them. + * + * @param jQuery event + */ + onKeypress: function (event) { + if (event.target === this.el && event.keyCode === 13) { + this.onClick(event); + } + }, + + /** * Transition to 'activating' stage. * * @param jQuery event @@ -143,6 +158,10 @@ Drupal.edit.FieldDecorationView = Backbone.View.extend({ */ decorate: function () { this.$el.addClass('edit-candidate edit-editable'); + this.$el.attr({ + 'role': 'button', + 'tabindex': '0' + }); }, /** @@ -150,6 +169,7 @@ Drupal.edit.FieldDecorationView = Backbone.View.extend({ */ undecorate: function () { this.$el.removeClass('edit-candidate edit-editable edit-highlighted edit-editing'); + this.$el.removeAttr('tabindex role'); }, /**