Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting tab index usefully when some fields are hidden by CSS (in an accordion container)

I am trying to make a large form more friendly. There are a number of fields which are used in special cases and these are hidden inside an accordion container with links to expose them if desired.

However (at least in Chrome) if you tab through fields you'll end up with focus on fields that are hidden from view but accessible to keyboard input.

What would be a Good™ way to handle this? Use jQuery to set tabindex based on display != none and then re-set when accordion events occur? Maybe when a field hidden by CSS receives focus the enclosing accordion is opened?

Here is a jsfiddle demonstrating the issue using the html below. Tab goes from visible to accordion link to hidden text input and out to last visible: http://jsfiddle.net/2EfXM/

<p class="file_info">
    <label>Visible
        <input type="text" name="vis1" id="vis1" class="date" value="" />
    </label>
</p>
<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading"> <a class="accordion-toggle accordion-arrow" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        Show more fields
      </a>

        </div>
        <div id="collapseOne" class="accordion-body collapse out">
             <h5>Source/Use Metadata</h5>

            <p class="file_info">
                <label>Hidden:
                    <input type="text" name="default_original_source" id="default_original_source" class="" value="" />
                </label>
            </p>
        </div>
    </div>
</div>
<p class="file_info">
    <label>Visible
        <input type="text" name="vis2" id="vis2" class="date" value="" />
    </label>
</p>

An interesting side note: using display:none then broke jQuery validate in IE 9. It threw errors on the hidden fields:

SCRIPT5007: Unable to get value of the property 'call': object is null or undefined jquery.validate.js, line 1174 character 5

After some research this was the final solution:

.collapse input {
    visibility: hidden;
}

.collapse.in input {
    visibility:visible;
}
like image 812
jerrygarciuh Avatar asked May 31 '13 15:05

jerrygarciuh


People also ask

Can Tabindex be set in CSS?

A non-standards-compliant tabindex attribute must be added on a DIV. Using any major browser will work. replace DIV by a href/assign prefix ( a – '), style and HTML with the: block and add the tabindex suffix.

What is the difference between Tabindex 0 and Tabindex =- 1?

tabindex="1" (or any number greater than 1) defines an explicit tab or keyboard navigation order. This must always be avoided. tabindex="0" allows elements besides links and form elements to receive keyboard focus.

What does Tabindex =- 1 mean?

A negative value (usually tabindex="-1" ) means that the element is not reachable via sequential keyboard navigation, but could be focused with JavaScript or visually by clicking with the mouse. It's mostly useful to create accessible widgets with JavaScript.

How do you make an element not Tabbable?

The way to do this is by adding tabindex="-1" . By adding this to a specific element, it becomes unreachable by the keyboard navigation. There is a great article here that will help you further understand tabindex.


1 Answers

Updated to keep accordion working and forms validating

Your main issue is that the code needs to set a visibility: hidden (note: originally I had display: none, but that created form validation issues per the OP's comment below) to the collapsed element. With visibility: hidden, the tabbing is ignored (because the element no longer has visibility in the document).

The code in your previous fiddle just sets the height: 0. This modified fiddle adds some CSS to control the visibility as well:

.collapse input {
    visibility: hidden;
}

.collapse.in input {
    visibility: visible;
}

It is functioning as you desire.

like image 54
ScottS Avatar answered Nov 17 '22 19:11

ScottS