How to extend Jquery UI resizeable with arrow keys

I have Jquery UI resize component, I have to add keyboard key support like

  • Right-Left arrow: Resize the width
  • Down-Up arrow: Resize the height

I don’t know how to extend with $.ui widget or plugin method registry, any help would appreciatable

jQuery

$("#resizable").resizable();

$.ui.plugin.add("resizable", "keyboardsupport", {
incWidth : function(){
        this._mouseStart($.Event("mousedown", { pageX: 0, pageY: 0 }));
        this.axis = 'se';
        var end = $.Event("mouseup", {
            pageX: newSize.width,
        });
        this._mouseDrag(end);
        this._mouseStop(end);
        },

});

$('.ui-icon-gripsmall-diagonal-se').attr({role:'button',tabindex:'0'});

$(document).on('keydown', function(e) {
var activeElement = document.activeElement;
var $activeEl = $(activeElement);
    if (e.keyCode == 39 && $activeEl.hasClass('ui-icon-gripsmall-diagonal-se')) {
    $('#resizable').resizable("incWidth", {
        width: 10 
    });
  }
});

HTML

<div id="resizable"></div>

Workout : Jsfiddle link