#228 new
Berin Loritsch

Make EditInPlace Keyboard Accessible

Reported by Berin Loritsch | July 31st, 2009 @ 03:31 PM

With just a few modifications to the EditInPlace control, the control can be made keyboard accessible--improving WCAG and section 508 support. I'll highlight the changes in each section where the change had to be made:

Ajax.InPlaceEditor = Class.create({
  initialize: function(element, url, options) {
    // ... these lines go at the end of the initialize method

    // Make the element accessible via keyboard using the natural tab order
    this.element.writeAttribute('tabindex', '0')
  },
  checkForEscapeOrReturn: function(e) {
    if (e.ctrlKey || e.altKey || e.shiftKey) return;

    if (this._editing) {
        if (Event.KEY_ESC == e.keyCode)
          this.handleFormCancellation(e);
        else if (Event.KEY_RETURN == e.keyCode)
          this.handleFormSubmission(e);        
    } else {
        if (Event.KEY_RETURN == e.keyCode)
          this.enterEditMode(e);
    }
  // .... the rest of the methods
}

NOTE: Using "tabindex='0'" puts the control in the normal tab order for the page. The subtle change in the keyboard event handler is the "enterEditMode(e)" when the form is not in edit mode. There is a bug where this handler is bound to the original element, not the text box that was created. Perhaps two handlers are in order?

Object.extend(Ajax.InPlaceEditor, {
  // ... skip the other method declarations
  Listeners: {
    click: 'enterEditMode',
    keydown: 'checkForEscapeOrReturn',
    mouseover: 'enterHover',
    mouseout: 'leaveHover',
    focus: 'enterHover',
    blur: 'leaveHover'
  }
);

The focus and blur events allow the highlight to occur even when the control is tabbed to with the keyboard.

NOTE: I'm having issues with IE 6, but even when I back out the changes I'm still having problems with IE 6. I'll have to check with a virgin copy of Script.aculo.us to be sure. For example, dynamically adding the "tabindex='0'" doesn't seem to add the control to the tab order dynamically as it does in more modern browsers. Adding it manually to the HTML does work.

No comments found

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

script.aculo.us is an open-source JavaScript framework for visual effects and interface behaviours.
<br/><b>Source available from github</b>
The Git repository resides at:
<a href="http://github.com/madrobby/scriptaculous">http://github.com/madrobby/scriptaculous</a>
<br/>Check out the current development trunk with:
<code>git clone git://github.com/madrobby/scriptaculous.git</code>
<br/>As <b>script.aculo.us 1.xx is feature-frozen</b>, this development trunk is for <b>bugfixes only</b>.
<br/>New development should happen only for
<b>script.aculo.us 2</b>.
<br/><b>Creating a bug report</b>
When creating a bug report, be sure to include as much relevant information as possible. Post a an example that shows off the problem. Preferably, <b>alter the unit tests</b> and show through either changed or added tests how the expected behavior is not occuring.

People watching this ticket

Pages