Holiday Notice – Support Unavailable on April 18 and April 21

We just wanted to let you know that our support team will be offline on Friday, April 18th (Good Friday) and Monday, April 21st (Easter Monday) due to the holidays.
We'll be back on Tuesday, ready to assist you!

In the meantime, if you need any help, feel free to:

Amelia YouTube Channel

wpDataTables YouTube Channel

Thank you for your understanding, and we wish you a wonderful holiday weekend!

Okay
  Public Ticket #2278981
Modal Dialog Fox not in focus
Closed

Comments

  • Sagar Prasai started the conversation
    January 23, 2020 at 9:03am

    Hello,

    I am testing this plugin to build an internal database website for our organization. But some of our users are visually impaired and use screen readers (NVDA or JAWS) for using computers. 

    I found that your plugin is not fully accessible to screen readers but I have found work around for almost all issues except one. In all the modal windows open to add new entry, delete entry or even show master detail, when the users click on the button to open the modal, the current focus item is not changed to the modal window rather than stays on the parent element. Now for users who can see, that is not an issue because we can just see the modal and start using it with a mouse click.

    However, for a blind user, this is a serious issue. His screen reader would then keep reading the parent content even though the modal window is opened and he will not know what is happening.  So is there any way to shift the focus inside the modal dailog by adding custom js? I guess its not that difficult.

    Some examples of good focus in your plugin:

    1. In pagination, when we click for example, "3", the focus automatically goes to "showing 11 of 40 entries" so that blind users would know the table is updated.

    2. When we add the entry, the focus goes to success message and says the data is updated.

    If I can find a solution to this, then I will buy your plugin.

    Also, I suggest you implement, WCAG in your plugin or at least make your table more accessible to persons with disabilities also that way your customers base will increase significantly because today more and more governments and organization has agreed to make their website disability friendly.

    I will be waiting for your reply.

    Regards,

    Sagar

  •  2,576
    Aleksandar replied
    January 24, 2020 at 8:54am

    Hello Sagar

    Thank you for your interest in our plugin.

    I am sorry to disappoint you, but unfortunately we won't be able to make the changes in near future. We are well aware of this, and our development team has it in their to-do list, but we haven't gotten to it yet.

    Unfortunately, the changes that you're about cannot be implemented yet, because our developers have a lot of work on their hands, and they don't have time for custom development. When they start working on improving the plugin for visually impaired people, they will dedicate themselves to that task only, but I cannot say when that will be.

    Sorry for the inconvenience.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

  • Sagar Prasai replied
    January 26, 2020 at 9:49am

    Dear Aleksandar,

    Thanks for your reply. 

    What I am asking is not a custom development. Its just a line of code or two, which if your developer can share then I can paste in custom js code box of your plugin.

    Only thing that needs to be done is when you click on ADD NEW RECORD or EDIT RECORD button and the modal opens, the focus should automatically go to that modal window.

    Its just a 5 min work for someone who knows JS. Unfortunately, I am not that proficient in this. Thus I am requesting this.

    Can you please check once with your team?
    Sagar

  •  2,576
    Aleksandar replied
    January 27, 2020 at 2:14pm

    Hi again Sagar

    I have forwarded your request to one of our developers, and here's what he said:

    You need to add a script like this:

    jQuery(document).ready(function(e) {
      jQuery('#wdt-frontend-modal').on('shown.bs.modal', function() {
        jQuery('#table_1_columnname').focus();
      });
    });
    And it will automatically focus to the "Columnname" column in the edit modal. So the only thing you need to find here is the column's name, to insert instead of "#table_1_columnname":

    #table_1_columnname

    When you open the modal, and right click on a field go to inspect:

    9331593785.png

    It will open the console, where you will see the name:

    4312703063.png

    So, for the modal shown above, you'd need to use this JS:

    jQuery(document).ready(function(e) {
      jQuery('#wdt-frontend-modal').on('shown.bs.modal', function() {
        jQuery('#table_1_dateofinteraction').focus();
      });
    });
    I hope that helps.

    Kind Regards, 

    Aleksandar Vuković
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables