From 0ec600c1b3f4b639c18a3ae3ede4321004eae2e6 Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Sun, 10 Oct 2010 21:17:49 -0400
Subject: [PATCH] Improved and expanded ARIA coverage to more components,
 including landmarks on common top-level page elements. Fixes #137

---
 js/jquery.mobile.dialog.js          |  2 ++
 js/jquery.mobile.forms.button.js    |  2 +-
 js/jquery.mobile.forms.slider.js    |  2 +-
 js/jquery.mobile.listview.filter.js |  2 +-
 js/jquery.mobile.navbar.js          |  2 ++
 js/jquery.mobile.page.js            | 18 +++++++++++++++++-
 6 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/js/jquery.mobile.dialog.js b/js/jquery.mobile.dialog.js
index 9a42a67e..af7a38f3 100644
--- a/js/jquery.mobile.dialog.js
+++ b/js/jquery.mobile.dialog.js
@@ -8,6 +8,8 @@
 $.fn.dialog = function(options){
 	return $(this).each(function(){		
 		$(this)
+			//add ARIA role
+			.attr("role","dialog")
 			.addClass('ui-page ui-dialog ui-body-a')
 			.find('[data-role=header]')
 			.addClass('ui-corner-top ui-overlay-shadow')
diff --git a/js/jquery.mobile.forms.button.js b/js/jquery.mobile.forms.button.js
index 7ab55e72..dd2ca24f 100644
--- a/js/jquery.mobile.forms.button.js
+++ b/js/jquery.mobile.forms.button.js
@@ -8,7 +8,7 @@
 $.fn.customButton = function(){
 	return $(this).each(function(){	
 		var button = $(this).addClass('ui-btn-hidden').attr('tabindex','-1');
-
+		//add ARIA role
 		$('<a href="#" role="button">'+ (button.text() || button.val()) +'</a>')
 			.buttonMarkup({theme: button.attr('data-theme'), icon: button.attr('data-icon')})
 			.click(function(){
diff --git a/js/jquery.mobile.forms.slider.js b/js/jquery.mobile.forms.slider.js
index 98e8e5f1..65b34c45 100644
--- a/js/jquery.mobile.forms.slider.js
+++ b/js/jquery.mobile.forms.slider.js
@@ -42,7 +42,7 @@ $.fn.slider = function(options){
 					corners = (i==0) ? 'right' :'left',
 					theme = (i==0) ?'c':'b';
 				$('<div class="ui-slider-labelbg ui-slider-labelbg-'+ side +' ui-btn-down-'+ theme +' ui-btn-corner-'+ corners+'"></div>').prependTo(slider);	
-				$('<span class="ui-slider-label ui-slider-label-'+ side +' ui-btn-down-'+ theme +' ui-btn-corner-'+ corners+'" role="image">'+$(this).text()+'</span>').prependTo(handle);
+				$('<span class="ui-slider-label ui-slider-label-'+ side +' ui-btn-down-'+ theme +' ui-btn-corner-'+ corners+'" role="img">'+$(this).text()+'</span>').prependTo(handle);
 			});
 			
 		}	
diff --git a/js/jquery.mobile.listview.filter.js b/js/jquery.mobile.listview.filter.js
index bb49660e..e5238efa 100644
--- a/js/jquery.mobile.listview.filter.js
+++ b/js/jquery.mobile.listview.filter.js
@@ -9,7 +9,7 @@ $( ":mobile-listview" ).live( "listviewcreate", function() {
 		return;
 	}
 
-	var wrapper = $( "<form>", { "class": "ui-listview-filter ui-bar-c" } ),
+	var wrapper = $( "<form>", { "class": "ui-listview-filter ui-bar-c", "role": "search" } ),
 		
 		search = $( "<input>", {
 				placeholder: "Filter results...",
diff --git a/js/jquery.mobile.navbar.js b/js/jquery.mobile.navbar.js
index 8a0623bb..508d4ff8 100755
--- a/js/jquery.mobile.navbar.js
+++ b/js/jquery.mobile.navbar.js
@@ -25,6 +25,8 @@ $.fn.navbar = function(settings){
 			}
 			
 			$navbar
+				//add ARIA role
+				.attr("role","navigation")
 				.find('ul')
 				.grid({grid: numTabs > 2 ? 'b' : 'a'})		
 		
diff --git a/js/jquery.mobile.page.js b/js/jquery.mobile.page.js
index 833e7f49..75c72457 100644
--- a/js/jquery.mobile.page.js
+++ b/js/jquery.mobile.page.js
@@ -29,6 +29,14 @@ $.widget( "mobile.page", $.mobile.widget, {
 			if ( role === "header" || role === "footer" ) {
 				$this.addClass( "ui-bar-" + (theme || "a") );
 				
+				//add ARIA role
+				if( role == "header" ){
+					$this.attr("role","banner");
+				}
+				else{
+					$this.attr("role","contentinfo");
+				}
+				
 				//right,left buttons
 				var $headeranchors = $this.children( "a" ),
 					leftbtn = $headeranchors.filter( ".ui-btn-left" ).length,
@@ -57,9 +65,17 @@ $.widget( "mobile.page", $.mobile.widget, {
 				$headeranchors.buttonMarkup();
 				
 				//page title	
-				$this.children( ":header" ).addClass( "ui-title" ).attr( "tabindex" , "0");
+				$this.children( ":header" )
+					.addClass( "ui-title" )
+					.attr( "tabindex" , "0")
+					.attr( "role" ,"heading")
+					.attr( "aria-level", "1" ); //regardless of h element number in src, it becomes h1 for the enhanced page
 			} else if ( role === "page" || role === "content" ) {
 				$this.addClass( "ui-body-" + (theme || "c") );
+				if( role == "content" ){
+					//add ARIA role
+					$this.attr("role","main");
+				}
 			}
 			
 			switch(role) {