New option autoFocus allows keyboard-only usage

mar10 · mar10 · commit b13970c30ea7 · 2015-03-08T22:13:29.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,5 @@
 # 1.8.3-0 / Unreleased
+* [FEATURE] New option `autoFocus`, defaults to *false*
 
 # 1.8.2 / 2015-02-08
 
diff --git a/README.md b/README.md
@@ -242,6 +242,12 @@ $(document).contextmenu({
     default: <code>"ui-contextmenu"</code><br>
     This class is added to the outer ul element.
 </dd>
+<dt>autoFocus</dt>
+<dd>
+    Type: <code>Boolean</code>, 
+    default: <code>false</code><br>
+    Set keyboard focus to first menu entry on open.
+</dd>
 <dt>autoTrigger</dt>
 <dd>
     Type: <code>Boolean</code>, 
@@ -457,6 +463,13 @@ and make it right aligned via CSS:
 }
 ```
 
+### [Howto] Enable keyboard control
+
+In order open a context menu with the keyboard, make sure the target elements
+are tabbable, for example by adding a `tabindex="0"` attribute.
+Also make sure the `autoFocus: true` option is set.
+This will allow to Use <kbd>Tab</key> and the Windows <key>Menu</key> keys.
+
 
 ### [Howto] Modify the menu using an asynchronous request
 
diff --git a/demo/index.html b/demo/index.html
@@ -77,6 +77,7 @@
 
 	$(document).contextmenu({
 		delegate: ".hasmenu",
+		autoFocus: true,
 		preventContextMenuForPopup: true,
 		preventSelect: true,
 		taphold: true,
@@ -206,9 +207,9 @@ <h3>Sample 1</h3>
 	</ul>
 	<p>Right-click in an element to open the context menu:</p>
 	<div>
-		<span class="hasmenu">AAA</span>
-		<span class="hasmenu">BBB</span>
-		<span class="hasmenu">CCC</span>
+		<span class="hasmenu" tabindex="0">AAA</span>
+		<span class="hasmenu" tabindex="0">BBB</span>
+		<span class="hasmenu" tabindex="0">CCC</span>
 	</div>
 
 	<h3>Sample 2</h3>
diff --git a/jquery.ui-contextmenu.js b/jquery.ui-contextmenu.js
@@ -33,6 +33,7 @@ $.widget("moogle.contextmenu", {
 	version: "@VERSION",
 	options: {
 		addClass: "ui-contextmenu",  // Add this class to the outer <ul>
+		autoFocus: false,      // Set keyboard focus to first entry on open
 		autoTrigger: true,    // open menu on browser's `contextmenu` event
 		delegate: null,       // selector
 		hide: { effect: "fadeOut", duration: "fast" },
@@ -64,6 +65,7 @@ $.widget("moogle.contextmenu", {
 		this.$menu = null;
 		this.menuIsTemp = false;
 		this.currentTarget = null;
+		this.previousFocus = null;
 
 		if (opts.preventSelect) {
 			// Create a global style for all potential menu targets
@@ -261,7 +263,14 @@ $.widget("moogle.contextmenu", {
 				event.preventDefault();
 			});
 		}
-		this._show(this.$menu, this.options.show, function() {
+		this._show(this.$menu, opts.show, function() {
+			// Set focus to first active menu entry
+			if ( opts.autoFocus ) {
+				// var $first = self.$menu.children(".ui-menu-item:enabled:first");
+				// self.$menu.menu("focus", event, $first).focus();
+				self.$menu.focus();
+				self.previousFocus = $(event.target);
+			}
 			self._trigger.call(self, "open", event, ui);
 		});
 	},
@@ -281,6 +290,10 @@ $.widget("moogle.contextmenu", {
 			this.$menu
 				.unbind("contextmenu" + this.eventNamespace);
 			this._hide(this.$menu, hideOpts, function() {
+				if ( self.previousFocus ) {
+					self.previousFocus.focus();
+					self.previousFocus = null;
+				}
 				self._trigger("close");
 			});
 		} else {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`# 1.8.3-0 / Unreleased`
	`2`	+* [FEATURE] New option `autoFocus`, defaults to false
`2`	`3`
`3`	`4`	`# 1.8.2 / 2015-02-08`
`4`	`5`