mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-25 06:23:43 +00:00
Improved and expanded ARIA coverage to more components, including landmarks on common top-level page elements. Fixes #137
This commit is contained in:
parent
43d26694f4
commit
0ec600c1b3
6 changed files with 24 additions and 4 deletions
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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(){
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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...",
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ $.fn.navbar = function(settings){
|
|||
}
|
||||
|
||||
$navbar
|
||||
//add ARIA role
|
||||
.attr("role","navigation")
|
||||
.find('ul')
|
||||
.grid({grid: numTabs > 2 ? 'b' : 'a'})
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue