Thursday, July 5, 2018

Modal window and Web in alpha five

July 5th 2018.
This is second of my post in the blog this week to cover a topic.

I happened to visit the forum for personal reason and found this topic and it was interesting.
There is not really a modal window in web, it is a make believe window positioned over the current window with different background color to make the current window standout and make the elements in the background not clickable, but they are still reachable by tabbing into them.  Yes, of course you can make them fully a modal window with ARIA compliant code, however it is a simple matter of making all input elements not tabbable and only the input elements in the dialog itself tabbable. Then when you close make all the elements back to tabbable state. By description the modal dialog should not have any tabindex set, and you canconfirm alpha did not set them if you examine in the web inspector. So far so good.

Most of the framework when you work with the background fields are accessible, so it is not a bug in alpha.  It is consumer misunderstanding as far as I know and think.

In order to make this work
got to the dialog and go all the down and select window events and select onBeforeShow event and add this code
var $j = jQuery;
var inputs = $j(document).find('select, input, textarea, button, a').filter(':visible');
$j(inputs).each(function() {
$j(this).attr("tabindex", -1);
});

and then go to the onHide event and add this code:
var $j = jQuery;
var inputs = $j(document).find('select, input, textarea, button, a').filter(':visible');
$j(inputs).each(function() {
$j(this).attr("tabindex", 0);
});

This should work, I have tested in internet explorer. I was about to send this to Selwyn to analyse, but elected to post here in my blog.
The one this this will not address is tabbing out to the document itself which is normal behavior in most browsers.
The video is published in youtube and here is the link:

http://www.youtube.com/watch?v=LI6UQQvHiqo

let me know if this works.



1 comment:

  1. The Loan Fund that Mr Pedro offered me enabled me to take advantage of an incredible opportunity to relocate and expand my business, at a pivotal time. The support I received from The staff was priceless at the rate of 2% in return.
    You can contact them for a loan request on pedroloanss@gmail.com And WhatsApp + 1-8632310632

    ReplyDelete