Sablo provides a set of angular directives that can help custom web component developers.

svy-tabseq

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 ... svy-tabseq="2" ...) and an optional config attribute (<div ... svy-tabseq-config:{container: true} ...).

Based on only these two things that you can add to a new custom component as needed, the svy-tabseq 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 svy-tabseq element marked with

<someTag ... svy-tabseq="0" svy-tabseq-config="{root: true}"/>

. This can be for example the <body> tag.

svy-tabseq requires you to include a full jQuery lib in your page, before angular.js. It will now work with angular shipped jQLite only (because it relies on jquery trigger() which is not available in jQLite).

For example:

<!DOCTYPE html>
<html ng-app="myApp" svy-tabSeq="1" svy-tabSeq-config="{container: true}">

  <head>
    <title>Tabseq</title>
    <link href="css/style.css" rel="stylesheet" />
    <script src="../lib/jquery-1.11.1.js"></script>
    <script src="../lib/angular-1.3.0-beta.2/angular.js"></script>
    <script src="controllers/impl.js"></script>
  </head>

  <body ng-controller="myController">
        <mycustomcomponent svy-tabSeq="model1.tabSeq"></mycustomcomponent >
        <div svy-tabSeq="2" svy-tabSeq-config="{container: true, reservedGap: 50}">
            <input svy-tabSeq="1" value="a"/>
            <input svy-tabSeq="-2" value="b"/>
            <input svy-tabSeq="1" value="c"/>
        </div>
        <mycustomcomponent svy-tabSeq="model2.tabSeq"></mycustomcomponent >
 
  </body>

</html>