Disabling jQuery UI Accordion with space bar toggling

Question

I see in jQuery UI accordian you can use the space bar to toggle active headers. How can one disable this? I don\'t want the user to use keyboard to interact with the accord

Answer 1

I developed an answer to just enabling the spacebar, but it could be expanded for other keydown events you want to override.

/*
 * Detect spacebar and return immediately, otherwise call standard behaviour
 * The 'solution' of deleting the event handler caused other errors
 * http://stackoverflow.com/a/7008791
*/
$.ui.accordion.prototype._originalKeyDown = $.ui.accordion.prototype._keydown;
$.ui.accordion.prototype._keydown = function( event ) {
    var keyCode = $.ui.keyCode;

    if (event.keyCode == keyCode.SPACE) {
        return;
    }
    // call the original method
    this._originalKeyDown(event);
};

Answer 2

if you don't need the "_keydown" function at all, I guess you can just delete it.

delete($.ui.accordion.prototype._keydown);

if you want to change or override the functionality of the "_keydown" function and don't want to hack it into the original file you could do:

$.ui.accordion.prototype._keydown = function( event ) {
    // your new code for the "_keydown" function
};

hope that helps

Answer 3

I found a working solution, but I'm not sure of the consequences.

In jquery.ui.accordion.js:

_keydown: function( event ) {
    if ( this.options.disabled || event.altKey || event.ctrlKey ) {
        return;
    }

    var keyCode = $.ui.keyCode,
        length = this.headers.length,
        currentIndex = this.headers.index( event.target ),
        toFocus = false;

    switch ( event.keyCode ) {
        case keyCode.RIGHT:
        case keyCode.DOWN:
            toFocus = this.headers[ ( currentIndex + 1 ) % length ];
            break;
        case keyCode.LEFT:
        case keyCode.UP:
            toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
            break;
        case keyCode.SPACE:
        case keyCode.ENTER:
            this._clickHandler( { target: event.target }, event.target );
            event.preventDefault();
    }

    if ( toFocus ) {
        $( event.target ).attr( "tabIndex", -1 );
        $( toFocus ).attr( "tabIndex", 0 );
        toFocus.focus();
        return false;
    }

    return true;
},

Notice the "fall through" from space to enter. I added a break:

_keydown: function( event ) {
    if ( this.options.disabled || event.altKey || event.ctrlKey ) {
        return;
    }

    var keyCode = $.ui.keyCode,
        length = this.headers.length,
        currentIndex = this.headers.index( event.target ),
        toFocus = false;

    switch ( event.keyCode ) {
        case keyCode.RIGHT:
        case keyCode.DOWN:
            toFocus = this.headers[ ( currentIndex + 1 ) % length ];
            break;
        case keyCode.LEFT:
        case keyCode.UP:
            toFocus = this.headers[ ( currentIndex - 1 + length ) % length ];
            break;
        case keyCode.SPACE:
            break;
        case keyCode.ENTER:
            this._clickHandler( { target: event.target }, event.target );
            event.preventDefault();
    }

    if ( toFocus ) {
        $( event.target ).attr( "tabIndex", -1 );
        $( toFocus ).attr( "tabIndex", 0 );
        toFocus.focus();
        return false;
    }

    return true;
},

You still get the closing behavior on pressing "enter", so feel free to break there if necessary as well. I think the problem is in

this._clickHandler( { target: event.target }, event.target );

but I didn't see it on my first read through. This edit works for me.

Hope that helps