MonthYearPicker should focus pop-up dialog when activated for better keyboard navigation support.

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 02 Oct 2019 14:28 by ADMIN

Jeff

Created on: 05 Jun 2019 07:28

Category: MonthYearPicker

Type: Bug Report

MonthYearPicker should focus pop-up dialog when activated for better keyboard navigation support.

Please see demo: https://demos.telerik.com/aspnet-ajax/monthyearpicker/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility/defaultcs.aspx

1. tab to calendar button

2. hit enter to open calendar dialog

3. press tab

Notice that instead of causing the focus to move within the calendar pop-up, focus first shifts through all remaining elements of the underlying page. This make this control difficult for users relying solely on keyboard navigation.

Ideally this control should function more like the standard calendar controls, obtaining focus when opened and returning focus to the date field when closed.

2 comments

ADMIN

Rumen

Posted on: 14 Aug 2019 12:37

Hi Jeff,

I hope you are doing well!

We just released the Latest Internal Build 2019.2.814 of the suite with a fix for this issue and wanted to notify you about that.

You can check the release notes at https://www.telerik.com/support/whats-new/aspnet-ajax/release-history/ui-for-asp-net-ajax-2019-2-814-(nightly-build-2019-08-14) as well as download the Telerik_UI_for_ASP.NET_AJAX_2019_2_814_Dev_hotfix.zip installation from https://www.telerik.com/account/product-download?product=RCAJAX.

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

ADMIN

Peter Milchev

Posted on: 05 Jun 2019 07:38

Hello Jeff,

For convenience and better visibility from the community, I am sharing the two workarounds that we came up with in the support thread.

Workaround 1: Focusing the first cell.

<telerik:RadMonthYearPicker RenderMode="Lightweight" EnableTyping="true" ID="RadMonthYearPicker1" runat="server" EnableAriaSupport="true" TabIndex="1" >

<DateInput ID="DateInput1" runat="server" EmptyMessage="Choose a date" ToolTip="Date input">

</DateInput>

<ClientEvents OnPopupOpening="OnPopupOpening" OnPopupClosing="OnPopupClosing" />

<MonthYearNavigationSettings EnableScreenBoundaryDetection="true"></MonthYearNavigationSettings>

</telerik:RadMonthYearPicker>

<script>

function OnPopupOpening(sender, args) {

var popup = args.get_pickerControl().Popup;

setTimeout(function () {

var $popupElement = $telerik.$(popup.DomElement);

$popupElement.find("tbody [role='gridcell'] a").eq(0).focus();

});

}

function OnPopupClosing(sender, args) {

sender.get_dateInput().focus();

}

</script>

Workaround 2: Keep the tabbing cycle inside the dialog until it is closed

var _onPopupOpening = function (sender, args) {

setTimeout(function () {

//TelerikDateTextBox and TelerikMonthYearTextBox have different interfaces.

// get_pickerControl is for TelerikMonthYearTextBox

// get_popupControl is for TelerikDateTextBox

var

popupDom = args.get_pickerControl ? args.get_pickerControl().Popup.DomElement : args.get_popupControl()._calendarDomObject;

var $popupElement = $telerik.$(popupDom);

//set focus to first "selected" element

//$popupElement.find("tbody [role='gridcell'] a").eq(0).focus();  // Telerik's suggested selector... doesn't work because role is missing when EnableAriaSupport=false.

$popupElement.find("tbody tr td.rcSelected a").eq(0).focus();

if (!$popupElement[0].classList.contains("hasTabEvent")) {

$popupElement[0].addEventListener("keydown", function () {

//set flag so we only setup event handlers one time.

$popupElement[0].classList.add("hasTabEvent");

if (event.key === "Tab") {

//we have to get the node list inside the listener, because it might have changed since the

//calendar was opened. (Like if we changed the year or month in the calendar.)

var $nodes = $popupElement.find("tbody tr td a");

//Some calendars have link buttons at the bottom. When present, we want to use the last button

//as our last element instead of the last calendar entry. (See TelerikMonthYearTextBox)

var $buttons = $popupElement.find(".rcButtons");

var first = $nodes[0];

var last = $buttons.length ? $buttons.children().last()[0] : $nodes.last()[0];

//If shift key down and current node is first, set target to last node.

//If shift key up and current node is last, set target to first node.

var target = event.shiftKey && event.srcElement.isSameNode(first) ? last :

!event.shiftKey && event.srcElement.isSameNode(last) ? first :

undefined;

if (target) {

target.focus();

event.preventDefault();

}

});

}

}); //end setTimeout

};

Regards,
Peter Milchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.