All geek questions in one place

Tab order for links in a simple modal dialog

I use the excellent jquery.simplemodal text plugin to display a list of items. These elements contain hyperlinks. This all works just fine, except that links appear in modal dialog mode as part of the tab order. I tried installing tabindex explicitly, but for some reason, only the input elements are in tab order - if I enter a dialog, I just look at the three input elements and don’t click on the anchors.

Am I doing something wrong with calling a simplemodal plugin?

Example: http://dev.andrewbucknell.com/basic/demo1.html

The code (with relative paths) for demonstration is as follows

<!DOCTYPE html> <html> <head> <title> SimpleModal Basic Modal Dialog </title> <meta name='author' content='Eric Martin' /> <meta name='copyright' content='2010 - Eric Martin' /> <!-- Page styles --> <link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' /> <!-- Contact Form CSS files --> <link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' /> <!-- IE6 "fix" for the close png image --> <!--[if lt IE 7]> <link type='text/css' href='css/basic_ie.css' rel='stylesheet' media='screen' /> <![endif]--> <!-- JS files are loaded at the bottom of the page --> </head> <body> <div id='container'> <div id='logo'> <h1>Simple<span>Modal</span></h1> <span class='title'>A Modal Dialog Framework Plugin for jQuery</span> </div> <div id='content'> <div id='basic-modal'> <h3>Basic Modal Dialog</h3> <p>A basic modal dialog with minimal styling and no additional options. There are a few CSS properties set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p> <input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a> </div> <div id="funddialog"> <div id="fundpickfilter"> <div class="fundfilter"> <label style="font-weight: bold;" for="filtertext">Find: </label> <input class="tfilter" type="text" id="filtertext" value=""/> </div> <div id="fundactions"> <button type="button" id="fundsearch" class="searchbutton">Search</button> <button type="button" id="fundreset" class="resetbutton">Reset</button> </div> </div> <div id="fundpicklist"> <div class="fund"><a href="http://www.slashdot.org" >Item 1</a></div> <div class="fund"><a href="http://www.arstechnica.com" >Item 2</a></div> <div class="fund"><a href="http://www.techmeme.com" >Item 3</a></div> </div> </div> <!-- modal content --> <div id="basic-modal-content"> <div id="funddialog"> <div id="fundpickfilter"> <div class="fundfilter"> <label style="font-weight: bold;" for="filtertext">Find: </label> <input class="tfilter" type="text" id="filtertext" value=""/> </div> <div id="fundactions"> <button type="button" id="fundsearch" class="searchbutton">Search</button> <button type="button" id="fundreset" class="resetbutton">Reset</button> </div> </div> <div id="fundpicklist"> <div class="fund"><a href="http://www.slashdot.org" >Item 1</a></div> <div class="fund"><a href="http://www.arstechnica.com" >Item 2</a></div> <div class="fund"><a href="http://www.techmeme.com" >Item 3</a></div> </div> </div> </div> </div> </div> <!-- Load jQuery, SimpleModal and Basic JS files --> <script type='text/javascript' src='js/jquery.js'></script> <script type='text/javascript' src='js/jquery.simplemodal.js'></script> <script type='text/javascript' src='js/basic.js'></script> </body> </html>
+4
source share
3 answers

I myself ran into this problem. Here is what I have developed so far. Simplemodal should add tabs to the watchTab and focus functions to navigate to maintain focus inside the modal. He achieves this by writing down the first and last input, and when you walk past them, focusing on the corresponding other. Unfortunately, it only looks at inputs, not links. This means that you can only go to links that are located between the first and last input elements. You can overwrite or modify these functions to get the desired behavior. Something like that:

replace line 473 with var input = $('#simplemodal-data :input:visible:enabled, #simplemodal-data a:visible')[p]();

replace line 592 with s.inputs = $('#simplemodal-data :input:visible:enabled, #simplemodal-data a:visible');

This is a simplified solution, which is likely to break in the case of a browser that does not attach to links. I will try to come up with something better.

+3
source

I found a solution with SimpleModal 1.4.2

In line 609

Change this s.inputs = $(':input:enabled:visible:first, :input:enabled:visible:last', sddata[0]);

To do this, s.inputs = $('a:visible, :input:enabled:visible', sddata[0]).filter(':first,:last');

+1
source

sddata [0] sddata [0] also note that there is no existing implementation with the following selector:

 s.inputs = $(':input:enabled:visible:first, :input:enabled:visible:last', sddata[0]);

and the answer above, handle tabindexes correctly - the switch after the last element will be executed by the first element in dom, and not with the smallest tabindex (and vice versa) To fix this, you should do this:

 s.inputs = $.merge(self.smallestTabindex(sddata[0]), self.biggestTabindex(sddata[0]));

where smallest / mostTabindex functions return the appropriate elements

0
source

Source: https://habr.com/ru/post/1381652/

More articles:


All Articles