library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Calendar: Fix ARIA ids for multiple months

Browse Source
This commit is contained in:
Felix Nagel 2015-12-02 22:02:24 +01:00
parent 501c67ef24
commit a68048ff54
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/widgets/calendar.js
View File

@ -76,6 +76,7 @@ return $.widget( "ui.calendar", {
_create: function() { _create: function() {
this.id = this.element.uniqueId().attr( "id" ); this.id = this.element.uniqueId().attr( "id" );
this.gridId = this.id;
this.labels = this.options.labels; this.labels = this.options.labels;
this.buttonClickContext = this.element[ 0 ]; this.buttonClickContext = this.element[ 0 ];
@ -228,6 +229,7 @@ return $.widget( "ui.calendar", {
if ( this.options.numberOfMonths === 1 ) { if ( this.options.numberOfMonths === 1 ) {
pickerHtml += this._buildHeader() + this._buildGrid(); pickerHtml += this._buildHeader() + this._buildGrid();
this.element.attr( "aria-labelledby", this.gridId + "-title" );
} else { } else {
pickerHtml += this._buildMultiplePicker(); pickerHtml += this._buildMultiplePicker();
classes += " ui-calendar-multi"; classes += " ui-calendar-multi";
@ -235,10 +237,7 @@ return $.widget( "ui.calendar", {
this.element this.element
.addClass( classes ) .addClass( classes )
.attr( { .attr( "role", "region" )
role: "region",
"aria-labelledby": this.id + "-title"
} )
.html( pickerHtml ); .html( pickerHtml );
this.prevButton = this.element.find( ".ui-calendar-prev" ); this.prevButton = this.element.find( ".ui-calendar-prev" );
@ -255,12 +254,16 @@ return $.widget( "ui.calendar", {
html = "", html = "",
currentDate = this.viewDate, currentDate = this.viewDate,
months = this.viewDate.months( this.options.numberOfMonths - 1 ), months = this.viewDate.months( this.options.numberOfMonths - 1 ),
labelledby = [],
i = 0; i = 0;
for ( ; i < months.length; i++ ) { for ( ; i < months.length; i++ ) {
// TODO: Shouldn't we pass date as a parameter to build* fns instead of setting this.date? // TODO: Shouldn't we pass date as a parameter to build* fns instead of setting this.date?
this.viewDate = months[ i ]; this.viewDate = months[ i ];
this.gridId = this.id + "-" + i;
labelledby.push( this.gridId + "-title" );
headerClass = "ui-calendar-header ui-widget-header ui-helper-clearfix"; headerClass = "ui-calendar-header ui-widget-header ui-helper-clearfix";
if ( months[ i ].first ) { if ( months[ i ].first ) {
headerClass += " ui-corner-left"; headerClass += " ui-corner-left";
@ -276,6 +279,8 @@ return $.widget( "ui.calendar", {
html += "<div class='ui-calendar-row-break'></div>"; html += "<div class='ui-calendar-row-break'></div>";
this.element.attr( "aria-labelledby", labelledby.join( " " ) );
this.viewDate = currentDate; this.viewDate = currentDate;
return html; return html;
@ -307,8 +312,8 @@ return $.widget( "ui.calendar", {
}, },
_buildTitlebar: function() { _buildTitlebar: function() {
return "<div role='header' id='" + this.id + "-title'>" + return "<div role='header' id='" + this.gridId + "-title'>" +
"<div id='" + this.id + "-month-label' class='ui-calendar-title'>" + "<div id='" + this.gridId + "-month-label' class='ui-calendar-title'>" +
this._buildTitle() + this._buildTitle() +
"</div>" + "</div>" +
"<span class='ui-helper-hidden-accessible'>, " + "<span class='ui-helper-hidden-accessible'>, " +
@ -328,7 +333,7 @@ return $.widget( "ui.calendar", {
_buildGrid: function() { _buildGrid: function() {
return "<table class='ui-calendar-calendar' role='grid' aria-readonly='true' " + return "<table class='ui-calendar-calendar' role='grid' aria-readonly='true' " +
"aria-labelledby='" + this.id + "-month-label' tabindex='0' " + "aria-labelledby='" + this.gridId + "-month-label' tabindex='0' " +
"aria-activedescendant='" + this._getDayId( this.date ) + "'>" + "aria-activedescendant='" + this._getDayId( this.date ) + "'>" +
this._buildGridHeading() + this._buildGridHeading() +
this._buildGridBody() + this._buildGridBody() +