Tab/enter keypress not working on calendar popup - Accessibility insights for web

[Kishor Garad]

Syncfusion calendar control has there own shortcut keys but "Accessibility insights" browser extension looks for general key shortcuts like tab, enter, etc.
Ex. we can not open calendar popup on Enter key press.
We can not focus ​on Today button from calendar popup using tab or any other keys.

Please Guide.

[Mallesh Ravi Chandran]

Hi Kishor ,

Currently, we have implemented the functionality that enables the calendar to be opened by pressing "Alt+ArrowDown". This is the default behaviour on our end.

To address your concern, we have prepared a workaround. In this workaround, we can add focus to the calendar icon by pressing the Tab key. We achieved this by adding a tabindex of "0" for the DatePicker components in the created event.  Now, you can open/close the calendar popup using the enter key.

 

@inject IJSRuntime JSRuntime

 

        <SfDatePicker @ref="datePicker>

            <DatePickerEvents TValue="DateTime?"  Created="CreatedHandler"></DatePickerEvents>

        </SfDatePicker>

@code {

    private SfDatePicker<DateTime?> datePicker;

    public async Task CreatedHandler(object args)

    {

        // Call the JavaScript function using JSRuntime

        await JSRuntime.InvokeVoidAsync("myBlazorInterop.myJavaScriptFunction",

 DotNetObjectReference.Create(this));

    }

    [JSInvokable]

    public void TriggerOnScrollToEnd()

    {

        // Show the date picker

        datePicker.ShowPopupAsync();

        datePicker.FocusAsync();

    }

}

 

[_Layout.cshtml ]

 

<script>

        window.myBlazorInterop = {

          myJavaScriptFunction: function (dotNetObjRef) {

             setTimeout(function () {

               // Find the date icon element and set tabIndex

               var elem = document.getElementsByClassName('e-date-icon');

               if (elem != null && elem.length > 0) {

                  elem[0].tabIndex = 0;

                  elem[0].addEventListener('keydown', function (e) {

                    if (e.key == 'Enter') {

                      console.log("Enter Clicked")

                        var datepicker = document.getElementsByClassName('e-datepicker')[0];

                        if (datepicker && datepicker.ej2_instances && datepicker.ej2_instances.length > 0) {

                        dotNetObjRef.invokeMethodAsync('TriggerOnScrollToEnd');

                         }

                    }

                  });

                }

              }, 100);

          }

        };

    </script>

Video reference :

API Reference : https://blazor.syncfusion.com/documentation/datepicker/events#created

Accessibility in Blazor DatePicker Component : https://blazor.syncfusion.com/documentation/datepicker/accessibility

We have prepared the sample for your reference. Please review the sample and ensure it meets your requirement . If you have any concerns, please get back to us.

Regards,

Mallesh

Attachment: DatePicker_531c49b1.zip