WAI ARIAに準じたインターフェイスを実装するためのjQueryプラグイン。 「role=button」編

jquery.wai-area.js

$.fn.roleButton = function () {
	return this.each(function (method) {
    var $this,
        isPressed;
		function updatePressed () {
			$this.attr('area-pressed', isPressed);
		}
		function changePressed () {
			isPressed = !isPressed;
			updatePressed();
		}
    $this = $(this);
    if ($this.data('is-role-button-instance')) {
      isPressed = $this.attr('area-pressed') === 'true';
      $this.data('is-role-button-instance', true);
      switch (method) {
        default:
          return isPressed;
      }
    } else {
      $this.attr('role', 'button');
      if (!$this.attr('tabindex')) {
        $this.attr('tabindex', 0);
      }
      isPressed = $this.attr('area-pressed') === 'true';
			$this.on('click keyup', function () {
				$this.trigger('press', isPressed);
				return;
			});
			$this.on('press', function () {
				changePressed();
				return true;
			});
			updatePressed();
		}
	});
};

role-button.js

var $buttons = $('button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"]');
$buttons.roleButton();
$buttons.on('press', function () {
  var $this = $(this);
  var isPressed = $this.roleButton();
})