Life @ High Road Communications

The modal dialog “Reveal” plugin by Foundation is one of my favorites simply due to the quick-and-easy nature of integrating it within a new or existing project and having it up and running in a short period of time. That and the fact that is has a good amount of available options to allow you to configure it to the requirements of a given project.

However, accessibility wise it is a bit lean, at least in terms of how a keyboard should be able to interact with it. In a recent article on the YUI Accessibility blog, the author outlines a series of steps that should happen when a modal dialog window is triggered (open).

As such, I’ve created a plugin of sorts that achieves this functionality using existing logic that is found within the jQuery UI library – which they use for this same purpose.

I invite you to grab the JavaScript code below and try it out. Any comments/suggestions would be greatly appreciated.

(function( $ ) {
	if(typeof $.fn.reveal !== 'function') return false;

	var caller;

	// This was ripped directly from the jQuery UI 1.9.1 source.
	function focusable( element, isTabIndexNotNaN ) {
		var map, mapName, img,
			nodeName = element.nodeName.toLowerCase();
		if ( "area" === nodeName ) {
			map = element.parentNode;
			mapName = map.name;
			if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) {
				return false;
			}
			img = $( "img[usemap=#" + mapName + "]" )[0];
			return !!img && visible( img );
		}
		return ( /input|select|textarea|button|object/.test( nodeName ) ?
			!element.disabled :
			"a" === nodeName ?
				element.href || isTabIndexNotNaN :
				isTabIndexNotNaN) &&
			// the element and all of its ancestors must be visible
			visible( element );
	}

	// This was ripped directly from the jQuery UI 1.9.1 source.
	function visible( element ) {
		return $.expr.filters.visible( element ) &&
			!$( element ).parents().andSelf().filter(function() {
				return $.css( this, "visibility" ) === "hidden";
			}).length;
	}

	// This was ripped directly from the jQuery UI 1.9.1 source.
	$.extend( $.expr[ ":" ], {
		data: $.expr.createPseudo ?
			$.expr.createPseudo(function( dataName ) {
				return function( elem ) {
					return !!$.data( elem, dataName );
				};
			}) :
			// support: jQuery <1.8
			function( elem, i, match ) {
				return !!$.data( elem, match[ 3 ] );
			},

		focusable: function( element ) {
			return focusable( element, !isNaN( $.attr( element, "tabindex" ) ) );
		},

		tabbable: function( element ) {
			var tabIndex = $.attr( element, "tabindex" ),
				isTabIndexNaN = isNaN( tabIndex );
			return ( isTabIndexNaN || tabIndex >= 0 ) && focusable( element, !isTabIndexNaN );
		}
	});

	$(document).on('click', 'a[data-reveal-id]', function (e) {
		caller = event.target;
	});

	$('[role="dialog"]').on('reveal:opened', function(e) {
		var tabbables = $(':tabbable', this),
			first = tabbables.filter(':first'),
			last  = tabbables.filter(':last');

			first.focus();

		// prevent tabbing out of modal dialogs
		$(this).bind('keydown', function(event) {
			if (event.keyCode !== 9) {
				return;
			}

			if (event.target === last[0] && !event.shiftKey) {
				first.focus();
				return false;
			} else if (event.target === first[0] && event.shiftKey) {
				last.focus();
				return false;
			}
		});
	});

	$('[role="dialog"]').on('reveal:closed', function(e) {
		$(caller).focus();
	});
})( jQuery );