JQuery UI datepicker icon trigger IMG is not Accessible from keyboard

Question

I am using this datepicker with the Icon Trigger active which renders an image. Example can be found here http://jqueryui.com/datepicker/#icon-trigger

If you place the cursor in the INPUT and hit tab, it skips over the calendar IMG and moves to the next available element.

The problem is that the IMG element does not have tabindex set to a value > 0 (there's no attribute at all). I need to set it to 0.

Has anyone gotten the image to be accessed from tabbing around with the keyboard only?

Background on why this matters:

From an Accessibility standpoint** this is bad because if you are only able to use the keyboard (and not a mouse), due to a disability or you prefer keyboard entry you can't access the calendar.

My application is failing on this point when its audited by Accessibility software.

**Icon trigger: Since the triggering element consists of an IMG tag, it is not keyboard accessible, nor does it include textual equivalents and a relevant ARIA role for screen reader users to convey that this is an active element. ref. https://www.levelaccess.com/jquery-ui-accessibility-analysis/

Jeff Mergler · Accepted Answer · 2018-02-10 06:32:02Z

After reviewing the datepicker documentation and seeing that a bug is logged here: https://bugs.jqueryui.com/ticket/9625 but there's been no activity on it. So, I found a workaround that should be easily implemented. I'll just add the tabindex using the following jQuery:

$(".ui-datepicker-trigger").attr("tabIndex", "0");

The "ui-datepicker-trigger" class seems to appear on every icon trigger image so this will add the tabIndex to all instances.

Next, since the onclick handler does not work when you have tabbed to the IMG and hit enter, I wired up a datepicker("show") to call show on onkeypress:

$(".ui-datepicker-trigger").attr("onkeypress", $(this).prev().datepicker('show');');

prev() works here because the img is appended at runtime immediately after the INPUT that calls the datepicker.

Full code:

$(document).ready(function () {
    var img = $(".ui-datepicker-trigger"); 
    if (img.length !== 0) {
        img.attr("tabIndex", "0"); // set tabIndex=0 so that you can tab to the image using keyboard only
        var js = "$(this).prev().datepicker('show');";
        img.attr("onkeypress", js); // invoke the datepicker show method onkeypress
    }
});

Collectives™ on Stack Overflow

JQuery UI datepicker icon trigger IMG is not Accessible from keyboard

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related