Landmarks solved

assets/ik_lib.css

@@ -26,8 +26,9 @@ p {
   margin: 10px 0;
 }
 a {
-  color: #f76;
+  color: #8A1000;
   text-decoration: none;
+  font-size: large;
 }
 input[type=text] {
   padding: 8px 12px;
@@ -66,7 +67,7 @@ button {
   -webkit-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.25);
   -moz-box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.25);
   box-shadow: inset -1px -1px 0 rgba(0, 0, 0, 0.25), inset 1px 1px 0 rgba(255, 255, 255, 0.25);
-  background-color: #f76;
+  background-color: #8A1000;
   color: #fff;
   font: inherit;
   cursor: pointer;
@@ -525,11 +526,11 @@ button[disabled]:focus {
   font-weight: bold;
 }
 .ik_suggest .suggestions li:hover {
-  background-color: #f76;
+  background-color: #8A1000;
   color: #fff;
 }
 .ik_suggest .suggestions li.selected {
-  background-color: #f76;
+  background-color: #8A1000;
   color: #fff;
 }
 .ik_sortable {
@@ -910,13 +911,13 @@ button[disabled]:focus {
   border-bottom-right-radius: 6px;
 }
 .buttongroup .toggle:hover {
-  color: #f76;
+  color: #8A1000;
 }
 .buttongroup .toggle:focus {
   z-index: 1;
 }
 .buttongroup .toggle.pressed {
-  background-color: #f76;
+  background-color: #8A1000;
   color: #fff;
   border-color: #cc5f52;
   box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, 0.25);
@@ -930,3 +931,6 @@ button[disabled]:focus {
 .buttongroup .underline {
   text-decoration: underline;
 }
+ul li {
+  padding: 5px 0;
+}

assets/ik_suggest.js

@@ -2,6 +2,7 @@
 
 var pluginName = "ik_suggest",
 	defaults = {
+		'instructions': "As you start typing the application might suggest similar search terms. Use up and down arrow keys to select a suggested search string.",
 		'minLength': 2,
 		'maxResults': 10,
 		'source': []
@@ -34,7 +35,11 @@ var pluginName = "ik_suggest",
 		plugin = this;
 
 		plugin.notify = $('<div/>') // add hidden live region to be used by screen readers
-			.addClass('ik_readersonly');
+			.addClass('ik_readersonly')
+			.attr({
+				'role': 'region',
+				'aria-live': 'polite'
+			});
 
 		$elem = plugin.element
 			.attr({
@@ -65,6 +70,8 @@ var pluginName = "ik_suggest",
 
 		plugin = event.data.plugin;
 
+		plugin.notify.text(plugin.options.instructions);
+
 	};
 
 	/** 
@@ -114,26 +121,45 @@ var pluginName = "ik_suggest",
 
 		plugin = event.data.plugin;
 		$me = $(event.currentTarget);
-
-				plugin.list.empty();
-
-				suggestions = plugin.getSuggestions(plugin.options.source, $me.val());
-
-				if (suggestions.length >= 1) {
-					for(var i = 0, l = suggestions.length; i < l; i++) {
-						$('<li/>').html(suggestions[i])
-						.on('click', {'plugin': plugin}, plugin.onOptionClick) // add click event handler
-						.appendTo(plugin.list);
-					}
-					plugin.list.show();
-				} else {
-					plugin.list.hide();
-				}
+
+		switch (event.keyCode) {
+			case ik_utils.keys.down: // select next suggestion from list
+			selected = plugin.list.find('.selected');
+			if(selected.length) {
+			msg = selected.removeClass('selected').next().addClass('selected').text();
+			} else {
+			msg = plugin.list.find('li:first').addClass('selected').text();
+			}
+			plugin.notify.text(msg); // add suggestion text to live region to be read by screen reader
+			break;
+			case ik_utils.keys.up: // select previous suggestion from list
+			selected = plugin.list.find('.selected');
+			if(selected.length) {
+			msg = selected.removeClass('selected').prev().addClass('selected').text();
+			}
+			plugin.notify.text(msg); // add suggestion text to live region to be read by screen reader
+			break;
 
+			default: // get suggestions based on user input
+			plugin.list.empty();
+			suggestions = plugin.getSuggestions(plugin.options.source, $me.val());
+
+			if (suggestions.length >= 1) {
+				for(var i = 0, l = suggestions.length; i < l; i++) {
+					$('<li/>').html(suggestions[i])
+					.on('click', {'plugin': plugin}, plugin.onOptionClick) // add click event handler
+					.appendTo(plugin.list);
+				}
+				plugin.list.show();
+			} else {
+				plugin.list.hide();
+			}
+			break;
+		}
 	};
 
 	/** 
-	 * Handles fosucout event on text field.
+	 * Handles focusout event on text field.
 	 * 
 	 * @param {object} event - Focus event.
 	 * @param {object} event.data - Event data.
@@ -143,6 +169,8 @@ var pluginName = "ik_suggest",
 
 		var plugin = event.data.plugin;
 
+		plugin.notify.text(plugin.options.instructions);
+
 		setTimeout(function() { plugin.list.empty().hide(); }, 200);
 
 	};
@@ -194,7 +222,9 @@ var pluginName = "ik_suggest",
 				}
 			}
 		}
-
+		if (r.length > 1) { // add instructions to hidden live area
+			this.notify.text('Suggestions are available for this field. Use up and down arrows to select a suggestion and enter key to use it.');
+		}
 		return r;
 
 	};
@@ -212,4 +242,5 @@ var pluginName = "ik_suggest",
 
 	}
 
-})( jQuery, window, document );
+})( jQuery, window, document );
+var ik_utils = ik_utils || {};

assets/ik_togglebutton.js

@@ -1,12 +1,12 @@
 ;(function ( $, window, document, undefined ) {
- 
+
 	var pluginName = 'ik_togglebutton',
-		defaults = {
-			"label": "toggle button",
-			"isPressed": false,
-			"onToggle": function() { console.log('toggle action is undefined'); }
-		};
-	 
+	defaults = {
+		"label": "toggle button",
+		"isPressed": false,
+		"onToggle": function() { console.log('toggle action is undefined'); }
+	};
+
 	/**
 	 * @constructs Plugin
 	 * @param {Object} element - Current DOM element from selected collection.
@@ -31,19 +31,18 @@
 		id = 'toggle' + $('.ik_togglebutton').length; // generate unique id
 		$elem = this.element
 			.attr({
-				"id": id //,
-//			"tabindex": 0,
-//			"role": "button",
-//			"aria-label": plugin.options.label,
-//			"aria-pressed": false
+				"id": id,
+				"tabindex": 0,
+				"role": "button",
+				"aria-label": plugin.options.label,
+				"aria-pressed": false
 			});
 
 		plugin.options.onToggle = plugin.options.onToggle.bind(plugin);
 
 		$elem
 			.on('click', {plugin: plugin}, plugin.onActivate)
-//		.on('keydown', {plugin: plugin}, plugin.onActivate)
-		;
+			.on('keydown', {plugin: plugin}, plugin.onActivate);
 
 	};
 
@@ -68,21 +67,18 @@
 			if (plugin.options.isPressed) {
 				$me
 					.removeClass('pressed')
-//				.attr({
-//					"aria-pressed": false
-//				})
-					;
+					.attr({
+						"aria-pressed": false
+					});
 				plugin.options.isPressed = false;
 			} else {
 				$me
 					.addClass('pressed')
-//				.attr({
-//				  "aria-pressed": true
-//					})
-          ;
+					.attr({
+						"aria-pressed": true
+					});
 				plugin.options.isPressed = true;
 			}
-
 			plugin.options.onToggle();
 		}
 
@@ -100,5 +96,4 @@
 		});
 
 	}
-
 })( jQuery, window, document );