Unplanned
Last Updated: 15 Apr 2021 14:48 by ADMIN
Neale Hayes
Created on: 15 Apr 2021 14:39
Category: DatePicker
Type: Feature Request
1
Html is used to format content on date picker - WCAG compliancy

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:

1 comment
ADMIN
Doncho
Posted on: 15 Apr 2021 14:48

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 = "&nbsp;";

                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 = "&lt;&lt;";

                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 = "&nbsp;";

                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 = "&gt;&gt;";

                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.