Improved and expanded ARIA coverage to more components, including landmarks on common top-level page elements. Fixes #137

This commit is contained in:
scottjehl 2010-10-10 21:17:49 -04:00
parent 43d26694f4
commit 0ec600c1b3
6 changed files with 24 additions and 4 deletions

View file

@ -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')

View file

@ -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(){

View file

@ -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);
});
}

View file

@ -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...",

View file

@ -25,6 +25,8 @@ $.fn.navbar = function(settings){
}
$navbar
//add ARIA role
.attr("role","navigation")
.find('ul')
.grid({grid: numTabs > 2 ? 'b' : 'a'})

View file

@ -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) {