Calendar: Introduce getter / setter for grid id

This commit is contained in:
Felix Nagel 2017-04-12 23:25:41 +02:00
parent 9bb209cc94
commit d6de67a70a

View File

@ -89,7 +89,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._setGridId( this.id );
this.labels = this.options.labels; this.labels = this.options.labels;
this.buttonClickContext = this.element[ 0 ]; this.buttonClickContext = this.element[ 0 ];
@ -287,7 +287,7 @@ return $.widget( "ui.calendar", {
this._addClass( header, "ui-calendar-header-first ui-calendar-header-last" ); this._addClass( header, "ui-calendar-header-first ui-calendar-header-last" );
this.element this.element
.attr( "aria-labelledby", this.gridId + "-title" ) .attr( "aria-labelledby", this._getGridId() + "-title" )
.append( header ) .append( header )
.append( this._buildGrid() ); .append( this._buildGrid() );
}, },
@ -305,8 +305,8 @@ return $.widget( "ui.calendar", {
// TODO: Shouldn't we pass date as a parameter to build* fns // TODO: Shouldn't we pass date as a parameter to build* fns
// instead of setting this.viewDate? // instead of setting this.viewDate?
this._setViewDate( months[ i ] ); this._setViewDate( months[ i ] );
this.gridId = this.id + "-" + i; this._setGridId( this.id + "-" + i );
labelledBy.push( this.gridId + "-title" ); labelledBy.push( this._getGridId() + "-title" );
element = $( "<div>" ); element = $( "<div>" );
this._addClass( element, "ui-calendar-group" ); this._addClass( element, "ui-calendar-group" );
@ -353,7 +353,7 @@ return $.widget( "ui.calendar", {
_buildHeader: function() { _buildHeader: function() {
var header = $( "<div>" ), var header = $( "<div>" ),
title = $( "<div>", { role: "header", id: this.gridId + "-title" } ), title = $( "<div>", { role: "header", id: this._getGridId() + "-title" } ),
notice = $( "<span>" ).text( ", " + this._getTranslation( "datePickerRole" ) ); notice = $( "<span>" ).text( ", " + this._getTranslation( "datePickerRole" ) );
this._addClass( header, "ui-calendar-header", "ui-widget-header ui-helper-clearfix" ) this._addClass( header, "ui-calendar-header", "ui-widget-header ui-helper-clearfix" )
@ -367,7 +367,7 @@ return $.widget( "ui.calendar", {
}, },
_buildTitle: function() { _buildTitle: function() {
var title = $( "<div>", { role: "alert", id: this.gridId + "-month-label" } ), var title = $( "<div>", { role: "alert", id: this._getGridId() + "-month-label" } ),
month = this._buildTitleMonth(), month = this._buildTitleMonth(),
year = this._buildTitleYear(); year = this._buildTitleYear();
@ -394,7 +394,7 @@ return $.widget( "ui.calendar", {
role: "grid", role: "grid",
tabindex: 0, tabindex: 0,
"aria-readonly": true, "aria-readonly": true,
"aria-labelledby": this.gridId + "-month-label", "aria-labelledby": this._getGridId() + "-month-label",
"aria-activedescendant": this._getDayId( this._getDate() ) "aria-activedescendant": this._getDayId( this._getDate() )
} ); } );
@ -466,7 +466,7 @@ return $.widget( "ui.calendar", {
"role='gridcell'", "role='gridcell'",
"aria-selected='" + ( this._isCurrent( day ) ? true : false ) + "'", "aria-selected='" + ( this._isCurrent( day ) ? true : false ) + "'",
"aria-label='" + dayName + ", " + this._format( dateObject ) + "'", "aria-label='" + dayName + ", " + this._format( dateObject ) + "'",
"aria-describedby='" + this.gridId + "-month-label'" "aria-describedby='" + this._getGridId() + "-month-label'"
], ],
selectable = ( day.selectable && this._isValid( dateObject ) ); selectable = ( day.selectable && this._isValid( dateObject ) );
@ -666,6 +666,14 @@ return $.widget( "ui.calendar", {
} ); } );
}, },
_getGridId: function() {
return this.gridId;
},
_setGridId: function( id ) {
this.gridId = id;
},
_getDate: function() { _getDate: function() {
return this.date; return this.date;
}, },