We are trying to get our site to be WCAG AA compliant however the Telerik DatePicker appears to have inline styling on the second popup for month selection:
Hi,
Here is a workaround for avoiding this issue:
JavaScript
if (Telerik.Web.UI.Calendar.MonthYearFastNavigation) {
Telerik.Web.UI.Calendar.MonthYearFastNavigation.prototype.CreateLayout = function (style) {
var thisObject = this;
var table = document.createElement("table");
table.id = this.CalendarID + "_FastNavPopup";
table.className = style[1];
table.style.cssText = style[0];
if (this.enableKeyboardNavigation) {
table.tabIndex = 0;
}
var monthNames = this.MonthNames;
var monthNamesCount = monthNames.length;
if (!monthNames[12]) {
monthNamesCount--;
}
var rowsCount = Math.ceil(monthNamesCount / 2.0);
table.YearRowsCount = rowsCount - 1;
var monthIndex = 0;
var row, cell;
this.YearCells = [];
this.MonthCells = [];
for (var i = 0; i < rowsCount; i++) {
row = table.insertRow(table.rows.length);
// col 1 - month
cell = this.AddMonthCell(row, monthIndex++);
if (null != cell.Month) {
this.MonthCells[this.MonthCells.length] = cell;
}
// col 2 - month
cell = this.AddMonthCell(row, monthIndex++);
if (null != cell.Month) {
this.MonthCells[this.MonthCells.length] = cell;
}
// col 3 - year | <<
cell = row.insertCell(row.cells.length);
//this.FastNavPrevYears = cell;
cell.unselectable = "on";
var link;
if (i < (rowsCount - 1)) {
this.YearCells[this.YearCells.length] = cell;
link = document.createElement("a");
cell.appendChild(link);
link.href = "#";
link.innerHTML = " ";
link.onclick = function (e) {
if (!e) e = window.event;
thisObject.SelectYear(this.Year);
thisObject._disableOutOfRangeMonths();
if (e.preventDefault) {
e.preventDefault();
}
return false;
};
}
else {
cell.id = "rcMView_PrevY";
link = document.createElement("a");
cell.appendChild(link);
link.href = "#";
link.innerHTML = "<<";
this.FastNavPrevYearsLink = link;
if (thisObject.StartYear >= thisObject.MinYear[0]) {
link.onclick = function (e) {
if (!e) e = window.event;
thisObject.ScrollYears(-10);
if (e.preventDefault) {
e.preventDefault();
}
return false;
};
}
}
// col 4 - year | >>
cell = row.insertCell(row.cells.length);
//this.FastNavNextYears = cell;
cell.unselectable = "on";
if (i < (rowsCount - 1)) {
this.YearCells[this.YearCells.length] = cell;
link = document.createElement("a");
cell.appendChild(link);
link.href = "#";
link.innerHTML = " ";
link.onclick = function (e) {
if (!e) e = window.event;
thisObject.SelectYear(this.Year);
thisObject._disableOutOfRangeMonths();
if (e.preventDefault) {
e.preventDefault();
}
return false;
};
}
else {
cell.id = "rcMView_NextY";
link = document.createElement("a");
cell.appendChild(link);
link.href = "#";
link.innerHTML = ">>";
this.FastNavNextYearsLink = link;
var endYear = thisObject.StartYear + 10;
if (endYear <= thisObject.MaxYear[0]) {
link.onclick = function (e) {
if (!e) e = window.event;
thisObject.ScrollYears(10);
if (e.preventDefault) {
e.preventDefault();
}
return false;
};
}
}
}
row = table.insertRow(table.rows.length);
cell = row.insertCell(row.cells.length);
cell.className = "rcButtons";
cell.colSpan = 4;
var owner = $find(this.CalendarID);
this.CreateButton("rcMView_Today", cell, this.TodayButtonCaption, Telerik.Web.UI.Calendar.Utils.AttachMethod(this.OnToday, this), owner.get_renderMode());
cell.appendChild(document.createTextNode(" "));
this.CreateButton("rcMView_OK", cell, this.OkButtonCaption, Telerik.Web.UI.Calendar.Utils.AttachMethod(this.OnOK, this), owner.get_renderMode());
cell.appendChild(document.createTextNode(" "));
this.CreateButton("rcMView_Cancel", cell, this.CancelButtonCaption, Telerik.Web.UI.Calendar.Utils.AttachMethod(this.OnCancel, this), owner.get_renderMode());
if (this.enableKeyboardNavigation) {
this._keyDownDelegate = Function.createDelegate(this, this._keyDown);
window.$addHandlers(table, { keydown: _keyDownDelegate });
}
return table;
}
}
Kind regards,
Doncho
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.