Sablotabsequence

This directive helps provide dynamic tab sequences on the client. All it needs is a set of so called 'design' values on DOM nodes inside your document (<input ... [sabloTabseq]="2" ...) and an optional config attribute (<div ... [sabloTabseqConfig]={container: true} ...).

Based on only these two things that you can add to a new custom component as needed, the sabloTabseq directive will generate and dynamically manage the "tabIndex" attributes for all the DOM elements displayed in the browser that use this directive.

IMPORTANT One must always have in the DOM structure a top-most sabloTabseq element marked with

<someTag ... [sabloTabseq]="1" [sabloTabseqConfig]="{root: true}"/>

This can be for example the tag.

For example:

  <div id="mainBody" [sabloTabseq]="1" [sabloTabseqConfig]="{root: true}">
        <mycustomcomponent [sabloTabseq]="model1.tabSeq"></mycustomcomponent>
        <div [sabloTabseq]="20" [sabloTabseqConfig]="{container: true, reservedGap: 50}">
            <input [sabloTabseq]="1" value="a"/>
            <input [sabloTabseq]="-2" value="b"/>
            <input [sabloTabseq]="1" value="c"/>
        </div>
        <mycustomcomponent [sabloTabseq]="model2.tabSeq"></mycustomcomponent>
  </div>

Here we have two custom web components 'mycustomcomponent' (could be anything, for example you could replace them with inputs as well) and 3 inputs that are meant to have a specific tab traversal sequence.

Let's assume that

model1.tabSeq === 30
model1.tabSeq === 10

In this case this case the wanted tab sequence is: [last custom component, input field 'a', input field 'c', first custom component]. And indeed when you would run this example, the tabIndex attribute will automatically get set like this (ignoring the fact that mycustomcomponent would probably be expanded by angular depending on what that web component does):

<mycustomcomponent [sabloTabseq]="model1.tabSeq" tabIndex='53'></mycustomcomponent>
<div [sabloTabseq]="20" [sabloTabseqConfig]="{container: true, reservedGap: 50}">
    <input [sabloTabseq]="1" value="a" tabIndex='2'/>
    <input [sabloTabseq]="-2" value="b" tabIndex='-1'/>
    <input [sabloTabseq]="1" value="c" tabIndex='2'/>
</div>
<mycustomcomponent [sabloTabseq]="model2.tabSeq" tabIndex='1'></mycustomcomponent>

Notice that I intentionally used 10, 20, 30 as 'design' tab indexes for the 2 custom components and the parent div of the inputs. This is just to show that only their order matters, as at runtime the real tabIndex that is generated by sabloTabseq directive and used by the browser will start from 1 and increase accordingly.

Also notice that "-2" is a special 'design' value that means 'this tag should be skipped completely by tab sequence'. It will always generate a "tabIndex='-1'" for that DOM element and for any child DOM elements that it might have using sabloTabseq directive.

"0" is a special 'design' value as well and it means 'this tag should use default tab sequence'. It will remove "tabIndex" attributes for that DOM element and for any child DOM elements that it might have using sabloTabseq directive.

Duplicate 'design' tab indexes on the same level are permitted and will generate duplicate tabIndex attribute values (it lets the browser decide which one gets focus first).

Another thing to notice is the div's configuration as tab sequence container ([sabloTabseqConfig]="{container: true, reservedGap: 50}). This means that child DOM elements of that div are considered to be traversed by tab sequence at the 'design' tab index value of that div/container. So at runtime all child DOM elements of that div will get a tabIndex value that sets them between the parent div's siblings, according to the 'design' tab index value of the parent and it's siblings. Also notice the child 'design' values are not related to the ones on the container level. They only logically make sense as compared to the ones on the same level - in this case the 'input' siblings.

About 'reservedGap': it is an optional configuration option; it will work without it as well. It tells sabloTabseq that it should 'reserve' a number of tabIndexes for that container on top of the ones it currently needs. That can help later on, if more elements are added to that container and it needs more tabIndexes assigned - it can just use them without recalculating the tabIndexes of the parents (so less calculations to be done in the browser) - at least for a while, until it runs out of reserved indexes.

For example let's say (that div is actually an angular expanded smarter custom web component) that at runtime decides to add 10 more input children in the div. Only the tabIndex values inside the div will be updated as needed, because of the reservedGap:

        <mycustomcomponent [sabloTabseq]="model1.tabSeq" tabIndex='53'></mycustomcomponent>
        <div [sabloTabseq]="20" [sabloTabseqConfig]="{container: true, reservedGap: 50}">
            <input [sabloTabseq]="1" value="a" tabIndex='3'/>
            <input [sabloTabseq]="-2" value="b" tabIndex='-1'/>
            <input [sabloTabseq]="1" value="c" tabIndex='3'/>
            <input [sabloTabseq]="0" value="new1" tabIndex='2'/>
            <input [sabloTabseq]="2" value="new2" tabIndex='4'/>
            <input [sabloTabseq]="3" value="new3" tabIndex='5'/>
              (...)
            <input [sabloTabseq]="10" value="new10" tabIndex='12'/>
         </div>
        <mycustomcomponent [sabloTabseq]="model2.tabSeq" tabIndex='1'></mycustomcomponent>

But then, if you add 80 more inputs (a real life example could be a table having all sorts of components that can grow depending on data model content) then one sibling of the parent div will be updated as well, as the initial reservedGap is not enough:

<mycustomcomponent [sabloTabseq]="model1.tabSeq" tabIndex='143'></mycustomcomponent>
<div [sabloTabseq]="20" [sabloTabseqConfig="{container: true, reservedGap: 50}">
    <input [sabloTabseq]="1" value="a" tabIndex='3'/>
    <input [sabloTabseq]="-2" value="b" tabIndex='-1'/>
    <input [sabloTabseq]="1" value="c" tabIndex='3'/>
    <input [sabloTabseq]="0" value="new1" tabIndex='2'/>
    <input [sabloTabseq]="2" value="new2" tabIndex='4'/>
    <input [sabloTabseq="3" value="new3" tabIndex='5'/>
      (...)
    <input [sabloTabseq]="90" value="new90" tabIndex='92'/>
 </div>
<mycustomcomponent [sabloTabseq]="model2.tabSeq" tabIndex='1'></mycustomcomponent>

In order to disable/enable the tab sequence on a component and all its children components, you should trigger a custom event disableTabseq/enabledTabseq on it:

const mainForm = this.doc.getElementById('mainForm');
if (mainForm) {
    const customEvent = new CustomEvent('disableTabseq', {
        bubbles: true
    });
    mainForm.dispatchEvent(customEvent);
}