Focus groups automatically order the tabbable inputs within them, with the ability to sort items using relational or absolute ordering. Focus groups can also be embedded to provide for more intuitive grouped ordering, or to create discrete groupings with isolated tab groups.

/*
* inv-focus-group
* @options - Object - allows overrides of default settings for each focus group
*/
{
    'loop'       // {boolean} should loop to other side at edges. default: true
    'isolate'    // {boolean} isolates this focus group, and steals focus on creation if 'autofocus' is true. Typically used for popups. default: false
    'autoFocus'  // {boolean} should focus group attempt to auto focus first ordered element. default: true
    'forceFocus' // {boolean} forces this group to take focus, bypassing the standard deferments. default: false
}

/*
*  optional child ordering parameters
*/
  'focus-before' // {string} id of tabbable item or focus-group to place current tabbable item before
  'focus-after'  // {string} id of tabbable item or focus-group to place current tabbable item after
  'focus-index'  // {integer} zero based absolute index to place current tabbable item at within the current focus-group

Focus Group

Supports sorting of elements using all 3 possible ordering parameters [focus-before|focus-after|focus-index]

HTML

<div class="t-content">
    <ng-form class="c-generalForm" id="formApi" inv-focus-group>
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item">
                <label for="input-2">Input 2</label>
                <div class="c-checkbox">
                    <input type="checkbox" id="input-2" value="Stuff">
                    <label for="input-2">Input 2</label>
                </div>
            </div>

            <div class="c-fieldset-item">
                <label for="input-3">Input 3</label>
                <input id="input-3" type="text" focus-before="input-4">
            </div>

            <div class="c-fieldset-item">
                <label for="input-1">Input 1</label>
                <input id="input-1" type="text" placeholder="I should have focus" focus-index="0">
            </div>

            <div class="c-fieldset-item">
                <label for="ignored">Ignored Input</label>
                <input id="ignored" type="text" tabindex="-1" placeholder="Inputs with a -1 tabindex are ignored">
            </div>

            <div class="c-fieldset-item">
                <label for="input-5">Input 5</label>
                <input id="input-5" type="text" focus-after="input-4">
            </div>

            <div class="c-fieldset-item">
                <label for="input-7">Input 7</label>
                <input id="input-7" type="text" placeholder="I should be last" focus-index="-1">
            </div>

            <div class="c-fieldset-item">
                <label for="input-4">Input 4</label>
                <input id="input-4" type="text">
            </div>

            <div class="c-fieldset-item">
                <label for="input-6">Input 6</label>
                <input id="input-6" type="text">
            </div>
	    </fieldset>
    </ng-form>
</div>

Child Focus Group

Usage of child groups to shift the order of a set of elements.

HTML

<div class="t-content">
    <ng-form class="c-generalForm" id="formApi" inv-focus-group="{autofocus:false}">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item">
                <label for="input-1">Input 1</label>
                <input id="input-1" type="text">
            </div>
            
            <div class="c-fieldset-item">
                <label for="input-2">Input 2</label>
                <input id="input-2" type="text">
            </div>

            <fieldset inv-focus-group focus-before="input-2">
                <div class="c-fieldset-item">
                    <label for="child-input-1">Child Input 1</label>
                    <input id="child-input-1" type="text">
                </div>

                <div class="c-fieldset-item">
                    <label for="child-input-2">Child Input 2</label>
                    <input id="child-input-2" type="text">
                </div>
            </fieldset>
        </fieldset>
    </ng-form>
</div>

Isolated Focus Group

Usage of child groups to create a seperate group of focusable elements.

HTML

<div class="t-content">
    <ng-form class="c-generalForm" id="formApi" inv-focus-group="{autofocus:false}">
        <fieldset class="c-fieldset">
            
            <div class="c-fieldset-item">
                <label for="input-1">Input 1</label>
                <input id="input-1" type="text">
            </div>

            <div class="c-fieldset-item">
                <button class="c-button c-button--primary" ng-click="showHidden = !showHidden">Toggle isolated group and focus it</button>
            </div>

            <fieldset inv-focus-group="{isolate:true}" ng-if="showHidden">
                <h4>This grouping is isolated, and will not receive focus from outside the group, nor release it from within</h4>
                <div class="c-fieldset-item">
                    <button class="c-button c-button--primary" ng-click="$parent.showHidden = !$parent.showHidden">toggle isolated group and resume previous focus</button>
                </div>
                <div class="c-fieldset-item">
                    <label for="isolated-1">Isolated 1</label>
                    <input id="isolated-1" type="text">
                </div>
                <div class="c-fieldset-item">
                    <label for="isolated-2">Isolated 2</label>
                    <input id="isolated-2" type="text">
                </div>
            </fieldset>
            
            <div class="c-fieldset-item">
                <label for="input-2">Input 2</label>
                <input id="input-2" type="text">
            </div>
        </fieldset>
    </ng-form>
</div>