@afixt/test-utils 1.0.0

package/src/testLang.js

@@ -0,0 +1,575 @@
+/**
+ * An array of language codes and their corresponding details.
+ * Each object in the array represents a language and contains the following properties:
+ *
+ * @property {string} alpha3 - The ISO 639-2 three-letter code for the language.
+ * @property {string} alpha2 - The ISO 639-1 two-letter code for the language.
+ * @property {string} English - The English name of the language.
+ * @property {string|null} [franc3] - The three-letter code used by the franc library, if available.
+ */
+export const langCodes = [
+    { alpha3: "aar", alpha2: "aa", English: "Afar", franc3: null },
+    { alpha3: "abk", alpha2: "ab", English: "Abkhazian", franc3: null },
+    { alpha3: "afr", alpha2: "af", English: "Afrikaans" },
+    { alpha3: "aka", alpha2: "ak", English: "Akan" },
+    { alpha3: "alb", alpha2: "sq", English: "Albanian", franc3: "als" },
+    { alpha3: "amh", alpha2: "am", English: "Amharic" },
+    { alpha3: "ara", alpha2: "ar", English: "Arabic", franc3: "arb" },
+    { alpha3: "arg", alpha2: "an", English: "Aragonese", franc3: null },
+    { alpha3: "arm", alpha2: "hy", English: "Armenian", franc3: "hye" },
+    { alpha3: "asm", alpha2: "as", English: "Assamese", franc3: null },
+    { alpha3: "ava", alpha2: "av", English: "Avaric", franc3: null },
+    { alpha3: "ave", alpha2: "ae", English: "Avestan", franc3: null },
+    { alpha3: "aym", alpha2: "ay", English: "Aymara", franc3: "ayr" },
+    { alpha3: "aze", alpha2: "az", English: "Azerbaijani", franc3: "azj" },
+    { alpha3: "bak", alpha2: "ba", English: "Bashkir", franc3: null },
+    { alpha3: "bam", alpha2: "bm", English: "Bambara" },
+    { alpha3: "baq", alpha2: "eu", English: "Basque", franc3: null },
+    { alpha3: "bel", alpha2: "be", English: "Belarusian" },
+    { alpha3: "ben", alpha2: "bn", English: "Bengali" },
+    { alpha3: "bih", alpha2: "bh", English: "Bihari languages", franc3: null },
+    { alpha3: "bis", alpha2: "bi", English: "Bislama", franc3: null },
+    { alpha3: "bos", alpha2: "bs", English: "Bosnian" },
+    { alpha3: "bre", alpha2: "br", English: "Breton", franc3: null },
+    { alpha3: "bul", alpha2: "bg", English: "Bulgarian" },
+    { alpha3: "bur", alpha2: "my", English: "Burmese", franc3: "mya" },
+    { alpha3: "cat", alpha2: "ca", English: "Catalan; Valencian" },
+    { alpha3: "cha", alpha2: "ch", English: "Chamorro", franc3: null },
+    { alpha3: "che", alpha2: "ce", English: "Chechen", franc3: null },
+    { alpha3: "chi", alpha2: "zh", English: "Chinese", franc3: "cmn" },
+    {
+        alpha3: "chu",
+        alpha2: "cu",
+        English:
+            "Church Slavic; Old Slavonic; Church Slavonic; Old Bulgarian; Old Church Slavonic",
+        franc3: null,
+    },
+    { alpha3: "chv", alpha2: "cv", English: "Chuvash", franc3: null },
+    { alpha3: "cor", alpha2: "kw", English: "Cornish", franc3: null },
+    { alpha3: "cos", alpha2: "co", English: "Corsican", franc3: null },
+    { alpha3: "cre", alpha2: "cr", English: "Cree", franc3: null },
+    { alpha3: "cze", alpha2: "cs", English: "Czech", franc3: "ces" },
+    { alpha3: "dan", alpha2: "da", English: "Danish" },
+    {
+        alpha3: "div",
+        alpha2: "dv",
+        English: "Divehi; Dhivehi; Maldivian",
+        franc3: null,
+    },
+    { alpha3: "dut", alpha2: "nl", English: "Dutch; Flemish", franc3: "nld" },
+    { alpha3: "dzo", alpha2: "dz", English: "Dzongkha", franc3: null },
+    { alpha3: "eng", alpha2: "en", English: "English" },
+    { alpha3: "epo", alpha2: "eo", English: "Esperanto" },
+    { alpha3: "est", alpha2: "et", English: "Estonian" },
+    { alpha3: "ewe", alpha2: "ee", English: "Ewe" },
+    { alpha3: "fao", alpha2: "fo", English: "Faroese", franc3: null },
+    { alpha3: "fij", alpha2: "fj", English: "Fijian", franc3: null },
+    { alpha3: "fin", alpha2: "fi", English: "Finnish" },
+    { alpha3: "fre", alpha2: "fr", English: "French", franc3: "fra" },
+    { alpha3: "fry", alpha2: "fy", English: "Western Frisian", franc3: null },
+    { alpha3: "ful", alpha2: "ff", English: "Fulah", franc3: null },
+    { alpha3: "geo", alpha2: "ka", English: "Georgian", franc3: "kat" },
+    { alpha3: "ger", alpha2: "de", English: "German", franc3: "deu" },
+    {
+        alpha3: "gla",
+        alpha2: "gd",
+        English: "Gaelic; Scottish Gaelic",
+        franc3: null,
+    },
+    { alpha3: "gle", alpha2: "ga", English: "Irish", franc3: null },
+    { alpha3: "glg", alpha2: "gl", English: "Galician" },
+    { alpha3: "glv", alpha2: "gv", English: "Manx", franc3: null },
+    {
+        alpha3: "gre",
+        alpha2: "el",
+        English: "Greek, Modern (1453-)",
+        franc3: "ell",
+    },
+    { alpha3: "grn", alpha2: "gn", English: "Guarani", franc3: null },
+    { alpha3: "guj", alpha2: "gu", English: "Gujarati" },
+    { alpha3: "hat", alpha2: "ht", English: "Haitian; Haitian Creole" },
+    { alpha3: "hau", alpha2: "ha", English: "Hausa" },
+    { alpha3: "heb", alpha2: "he", English: "Hebrew" },
+    { alpha3: "her", alpha2: "hz", English: "Herero", franc3: null },
+    { alpha3: "hin", alpha2: "hi", English: "Hindi" },
+    { alpha3: "hmo", alpha2: "ho", English: "Hiri Motu", franc3: null },
+    { alpha3: "hrv", alpha2: "hr", English: "Croatian" },
+    { alpha3: "hun", alpha2: "hu", English: "Hungarian" },
+    { alpha3: "ibo", alpha2: "ig", English: "Igbo" },
+    { alpha3: "ice", alpha2: "is", English: "Icelandic", franc3: null },
+    { alpha3: "ido", alpha2: "io", English: "Ido", franc3: null },
+    { alpha3: "iii", alpha2: "ii", English: "Sichuan Yi; Nuosu" },
+    { alpha3: "iku", alpha2: "iu", English: "Inuktitut", franc3: null },
+    {
+        alpha3: "ile",
+        alpha2: "ie",
+        English: "Interlingue; Occidental",
+        franc3: null,
+    },
+    {
+        alpha3: "ina",
+        alpha2: "ia",
+        English: "Interlingua (International Auxiliary Language Association)",
+        franc3: null,
+    },
+    { alpha3: "ind", alpha2: "id", English: "Indonesian" },
+    { alpha3: "ipk", alpha2: "ik", English: "Inupiaq", franc3: null },
+    { alpha3: "ita", alpha2: "it", English: "Italian" },
+    { alpha3: "jav", alpha2: "jv", English: "Javanese" },
+    { alpha3: "jpn", alpha2: "ja", English: "Japanese" },
+    {
+        alpha3: "kal",
+        alpha2: "kl",
+        English: "Kalaallisut; Greenlandic",
+        franc3: null,
+    },
+    { alpha3: "kan", alpha2: "kn", English: "Kannada" },
+    { alpha3: "kas", alpha2: "ks", English: "Kashmiri", franc3: null },
+    { alpha3: "kau", alpha2: "kr", English: "Kanuri", franc3: "knc" },
+    { alpha3: "kaz", alpha2: "kk", English: "Kazakh" },
+    { alpha3: "khm", alpha2: "km", English: "Central Khmer" },
+    { alpha3: "kik", alpha2: "ki", English: "Kikuyu; Gikuyu", franc3: null },
+    { alpha3: "kin", alpha2: "rw", English: "Kinyarwanda" },
+    { alpha3: "kir", alpha2: "ky", English: "Kirghiz; Kyrgyz" },
+    { alpha3: "kom", alpha2: "kv", English: "Komi", franc3: "koi" },
+    { alpha3: "kon", alpha2: "kg", English: "Kongo", franc3: null },
+    { alpha3: "kor", alpha2: "ko", English: "Korean" },
+    {
+        alpha3: "kua",
+        alpha2: "kj",
+        English: "Kuanyama; Kwanyama",
+        franc3: null,
+    },
+    { alpha3: "kur", alpha2: "ku", English: "Kurdish", franc3: "ckb" },
+    { alpha3: "lao", alpha2: "lo", English: "Lao" },
+    { alpha3: "lat", alpha2: "la", English: "Latin", franc3: null },
+    { alpha3: "lav", alpha2: "lv", English: "Latvian" },
+    {
+        alpha3: "lim",
+        alpha2: "li",
+        English: "Limburgan; Limburger; Limburgish",
+        franc3: null,
+    },
+    { alpha3: "lin", alpha2: "ln", English: "Lingala" },
+    { alpha3: "lit", alpha2: "lt", English: "Lithuanian" },
+    {
+        alpha3: "ltz",
+        alpha2: "lb",
+        English: "Luxembourgish; Letzeburgesch",
+        franc3: null,
+    },
+    { alpha3: "lub", alpha2: "lu", English: "Luba-Katanga", franc3: null },
+    { alpha3: "lug", alpha2: "lg", English: "Ganda" },
+    { alpha3: "mac", alpha2: "mk", English: "Macedonian", franc3: "mkd" },
+    { alpha3: "mah", alpha2: "mh", English: "Marshallese", franc3: null },
+    { alpha3: "mal", alpha2: "ml", English: "Malayalam" },
+    { alpha3: "mao", alpha2: "mi", English: "Maori", franc3: null },
+    { alpha3: "mar", alpha2: "mr", English: "Marathi" },
+    { alpha3: "may", alpha2: "ms", English: "Malay", franc3: null },
+    { alpha3: "mlg", alpha2: "mg", English: "Malagasy", franc3: "plt" },
+    { alpha3: "mlt", alpha2: "mt", English: "Maltese", franc3: null },
+    { alpha3: "mon", alpha2: "mn", English: "Mongolian", franc3: "khk" },
+    { alpha3: "nau", alpha2: "na", English: "Nauru", franc3: null },
+    { alpha3: "nav", alpha2: "nv", English: "Navajo; Navaho", franc3: null },
+    {
+        alpha3: "nbl",
+        alpha2: "nr",
+        English: "Ndebele, South; South Ndebele",
+        franc3: null,
+    },
+    {
+        alpha3: "nde",
+        alpha2: "nd",
+        English: "Ndebele, North; North Ndebele",
+        franc3: null,
+    },
+    { alpha3: "ndo", alpha2: "ng", English: "Ndonga" },
+    { alpha3: "nep", alpha2: "ne", English: "Nepali" },
+    {
+        alpha3: "nno",
+        alpha2: "nn",
+        English: "Norwegian Nynorsk; Nynorsk, Norwegian",
+    },
+    {
+        alpha3: "nob",
+        alpha2: "nb",
+        English: "Bokmål, Norwegian; Norwegian Bokmål",
+    },
+    { alpha3: "nor", alpha2: "no", English: "Norwegian", franc3: "nob" },
+    { alpha3: "nya", alpha2: "ny", English: "Chichewa; Chewa; Nyanja" },
+    {
+        alpha3: "oci",
+        alpha2: "oc",
+        English: "Occitan (post 1500); Provençal",
+        franc3: null,
+    },
+    { alpha3: "oji", alpha2: "oj", English: "Ojibwa", franc3: null },
+    { alpha3: "ori", alpha2: "or", English: "Oriya" },
+    { alpha3: "orm", alpha2: "om", English: "Oromo", franc3: "gax" },
+    { alpha3: "oss", alpha2: "os", English: "Ossetian; Ossetic", franc3: null },
+    { alpha3: "pan", alpha2: "pa", English: "Panjabi; Punjabi" },
+    { alpha3: "per", alpha2: "fa", English: "Persian", franc3: "fas" },
+    { alpha3: "pli", alpha2: "pi", English: "Pali", franc3: null },
+    { alpha3: "pol", alpha2: "pl", English: "Polish" },
+    { alpha3: "por", alpha2: "pt", English: "Portuguese" },
+    { alpha3: "pus", alpha2: "ps", English: "Pushto; Pashto", franc3: null },
+    { alpha3: "que", alpha2: "qu", English: "Quechua", franc3: "quz" },
+    { alpha3: "roh", alpha2: "rm", English: "Romansh", franc3: null },
+    {
+        alpha3: "rum",
+        alpha2: "ro",
+        English: "Romanian; Moldavian; Moldovan",
+        franc3: "ron",
+    },
+    { alpha3: "run", alpha2: "rn", English: "Rundi" },
+    { alpha3: "rus", alpha2: "ru", English: "Russian" },
+    { alpha3: "sag", alpha2: "sg", English: "Sango" },
+    { alpha3: "san", alpha2: "sa", English: "Sanskrit", franc3: null },
+    { alpha3: "sin", alpha2: "si", English: "Sinhala; Sinhalese" },
+    { alpha3: "slo", alpha2: "sk", English: "Slovak", franc3: "slk" },
+    { alpha3: "slv", alpha2: "sl", English: "Slovenian" },
+    { alpha3: "sme", alpha2: "se", English: "Northern Sami", franc3: null },
+    { alpha3: "smo", alpha2: "sm", English: "Samoan", franc3: null },
+    { alpha3: "sna", alpha2: "sn", English: "Shona" },
+    { alpha3: "snd", alpha2: "sd", English: "Sindhi", franc3: null },
+    { alpha3: "som", alpha2: "so", English: "Somali" },
+    { alpha3: "sot", alpha2: "st", English: "Sotho, Southern" },
+    { alpha3: "spa", alpha2: "es", English: "Spanish; Castilian" },
+    { alpha3: "srd", alpha2: "sc", English: "Sardinian", franc3: "src" },
+    { alpha3: "srp", alpha2: "sr", English: "Serbian" },
+    { alpha3: "ssw", alpha2: "ss", English: "Swati" },
+    { alpha3: "sun", alpha2: "su", English: "Sundanese" },
+    { alpha3: "swa", alpha2: "sw", English: "Swahili", franc3: "swh" },
+    { alpha3: "swe", alpha2: "sv", English: "Swedish" },
+    { alpha3: "tah", alpha2: "ty", English: "Tahitian", franc3: null },
+    { alpha3: "tam", alpha2: "ta", English: "Tamil" },
+    { alpha3: "tat", alpha2: "tt", English: "Tatar" },
+    { alpha3: "tel", alpha2: "te", English: "Telugu" },
+    { alpha3: "tgk", alpha2: "tg", English: "Tajik" },
+    { alpha3: "tgl", alpha2: "tl", English: "Tagalog" },
+    { alpha3: "tha", alpha2: "th", English: "Thai" },
+    { alpha3: "tib", alpha2: "bo", English: "Tibetan", franc3: "bod" },
+    { alpha3: "tir", alpha2: "ti", English: "Tigrinya" },
+    {
+        alpha3: "ton",
+        alpha2: "to",
+        English: "Tonga (Tonga Islands)",
+        franc3: "toi",
+    },
+    { alpha3: "tsn", alpha2: "tn", English: "Tswana" },
+    { alpha3: "tso", alpha2: "ts", English: "Tsonga" },
+    { alpha3: "tuk", alpha2: "tk", English: "Turkmen" },
+    { alpha3: "tur", alpha2: "tr", English: "Turkish" },
+    { alpha3: "twi", alpha2: "tw", English: "Twi", franc3: null },
+    { alpha3: "uig", alpha2: "ug", English: "Uighur; Uyghur" },
+    { alpha3: "ukr", alpha2: "uk", English: "Ukrainian" },
+    { alpha3: "urd", alpha2: "ur", English: "Urdu" },
+    { alpha3: "uzb", alpha2: "uz", English: "Uzbek", franc3: "uzn" },
+    { alpha3: "ven", alpha2: "ve", English: "Venda" },
+    { alpha3: "vie", alpha2: "vi", English: "Vietnamese" },
+    { alpha3: "vol", alpha2: "vo", English: "Volapük", franc3: null },
+    { alpha3: "wel", alpha2: "cy", English: "Welsh", franc3: null },
+    { alpha3: "wln", alpha2: "wa", English: "Walloon", franc3: null },
+    { alpha3: "wol", alpha2: "wo", English: "Wolof" },
+    { alpha3: "xho", alpha2: "xh", English: "Xhosa" },
+    { alpha3: "yid", alpha2: "yi", English: "Yiddish", franc3: "ydd" },
+    { alpha3: "yor", alpha2: "yo", English: "Yoruba" },
+    { alpha3: "zha", alpha2: "za", English: "Zhuang; Chuang", franc3: "zyb" },
+    { alpha3: "zul", alpha2: "zu", English: "Zulu" },
+];
+
+/**
+ * An array of valid language codes.
+ *
+ * This array contains ISO 639-1 language codes that are used to identify languages.
+ *
+ * @constant {string[]}
+ */
+export const validLangCodes = [
+    "af",
+    "agq",
+    "ak",
+    "am",
+    "ar",
+    "as",
+    "asa",
+    "ast",
+    "az",
+    "bas",
+    "be",
+    "bem",
+    "bez",
+    "bg",
+    "bm",
+    "bn",
+    "bo",
+    "br",
+    "brx",
+    "bs",
+    "ca",
+    "ce",
+    "cgg",
+    "chr",
+    "ckb",
+    "cs",
+    "cu",
+    "cy",
+    "da",
+    "dav",
+    "de",
+    "dje",
+    "dsb",
+    "dua",
+    "dyo",
+    "dz",
+    "ebu",
+    "ee",
+    "el",
+    "en",
+    "eo",
+    "es",
+    "et",
+    "eu",
+    "ewo",
+    "fa",
+    "ff",
+    "fi",
+    "fil",
+    "fo",
+    "fr",
+    "fur",
+    "fy",
+    "ga",
+    "gd",
+    "gl",
+    "gsw",
+    "gu",
+    "guz",
+    "gv",
+    "ha",
+    "haw",
+    "he",
+    "hi",
+    "hr",
+    "hsb",
+    "hu",
+    "hy",
+    "id",
+    "ig",
+    "ii",
+    "is",
+    "it",
+    "ja",
+    "jgo",
+    "jmc",
+    "ka",
+    "kab",
+    "kam",
+    "kde",
+    "kea",
+    "khq",
+    "ki",
+    "kk",
+    "kkj",
+    "kl",
+    "kln",
+    "km",
+    "kn",
+    "ko",
+    "kok",
+    "ks",
+    "ksb",
+    "ksf",
+    "ksh",
+    "kw",
+    "ky",
+    "lag",
+    "lb",
+    "lg",
+    "lkt",
+    "ln",
+    "lo",
+    "lrc",
+    "lt",
+    "lu",
+    "luo",
+    "luy",
+    "lv",
+    "mas",
+    "mer",
+    "mfe",
+    "mg",
+    "mgh",
+    "mgo",
+    "mk",
+    "ml",
+    "mn",
+    "mr",
+    "ms",
+    "mt",
+    "mua",
+    "my",
+    "mzn",
+    "naq",
+    "nb",
+    "nd",
+    "nds",
+    "ne",
+    "nl",
+    "nmg",
+    "nn",
+    "nnh",
+    "nus",
+    "nyn",
+    "om",
+    "or",
+    "os",
+    "pa",
+    "pl",
+    "prg",
+    "ps",
+    "pt",
+    "qu",
+    "rm",
+    "rn",
+    "ro",
+    "rof",
+    "ru",
+    "rw",
+    "rwk",
+    "sah",
+    "saq",
+    "sbp",
+    "se",
+    "seh",
+    "ses",
+    "sg",
+    "shi",
+    "si",
+    "sk",
+    "sl",
+    "smn",
+    "sn",
+    "so",
+    "sq",
+    "sr",
+    "sv",
+    "sw",
+    "ta",
+    "te",
+    "teo",
+    "th",
+    "ti",
+    "tk",
+    "to",
+    "tr",
+    "twq",
+    "tzm",
+    "ug",
+    "uk",
+    "ur",
+    "uz",
+    "vai",
+    "vi",
+    "vo",
+    "vun",
+    "wae",
+    "xog",
+    "yav",
+    "yi",
+    "yo",
+    "yue",
+    "zgh",
+    "zh",
+    "zu",
+];
+
+/**
+ * An array of language codes that are written from right to left.
+ *
+ * @constant {string[]}
+ */
+export const rtls = ["ar", "az", "dv", "he", "ku", "fa", "ur"];
+
+
+/**
+ * Converts a three-letter language code to a two-letter language code.
+ *
+ * @param {string} threeLetterCode - The three-letter language code to convert.
+ * @returns {string|boolean} The corresponding two-letter language code, or false if not found.
+ */
+export function getTwoLetterCode(threeLetterCode) {
+    if (threeLetterCode === "cmn") {
+        threeLetterCode = "chi";
+    }
+    const result = langCodes.find(
+        (value) =>
+            value.alpha3 === threeLetterCode || value.franc3 === threeLetterCode
+    );
+    return result ? result.alpha2 : false;
+}
+
+/**
+ * Tests the language of an HTML element against its content.
+ *
+ * This function checks the `lang` or `xml:lang` attribute of the given element
+ * and its ancestors to determine the language. It then uses the `franc` library
+ * to detect the language of the element's text content and compares it to the
+ * language attribute.
+ *
+ * @param {HTMLElement} element - The HTML element to test.
+ * @returns {boolean} - Returns `true` if the detected language matches the
+ *                      language attribute or if the detected language is
+ *                      undefined ("und"). Otherwise, returns `false`.
+ */
+export function testLang(element) {
+    let selfLang =
+        element.getAttribute("lang") || element.getAttribute("xml:lang");
+    if (!selfLang) {
+        let parent = element.parentElement;
+        while (parent && !selfLang) {
+            selfLang =
+                parent.getAttribute("lang") || parent.getAttribute("xml:lang");
+            parent = parent.parentElement;
+        }
+    }
+    if (!selfLang || selfLang.length < 2) return false;
+    selfLang = selfLang.split("-")[0].toLowerCase();
+    const threeLetterCode = franc(element.textContent.trim());
+    if (threeLetterCode === "und") return true;
+    return getTwoLetterCode(threeLetterCode) === selfLang;
+}
+
+export function getLang(element) {
+    let selfLang =
+        element.getAttribute("lang") || element.getAttribute("xml:lang");
+    if (!selfLang) {
+        let parent = element.parentElement;
+        while (parent && !selfLang) {
+            selfLang =
+                parent.getAttribute("lang") || parent.getAttribute("xml:lang");
+            parent = parent.parentElement;
+        }
+    }
+    if (!selfLang || selfLang.length < 2) return false;
+    selfLang = selfLang.split("-")[0].toLowerCase();
+    const result = langCodes.find(
+        (value) => value.alpha2 === selfLang || value.alpha3 === selfLang
+    );
+    if (result) {
+        return result.alpha2;
+    } else if (validLangCodes.includes(selfLang)) {
+        return selfLang;
+    } else {
+        return false;
+    }
+}
+
+export function isDirValid(element) {
+    const lang = getLang(element);
+    if (element.hasAttribute("dir")) {
+        const dir = element.getAttribute("dir");
+        return rtls.includes(lang) ? dir === "rtl" : dir !== "rtl";
+    }
+    return !rtls.includes(lang);
+}

package/src/testOrder.js

@@ -0,0 +1,90 @@
+import { getFocusableElements } from "./getFocusableElements.js";
+
+/**
+ *
+ * @param {Element} a - First element to compare
+ * @param {Element} b - Second element to compare
+ * @returns {number} - Sorting order based on visual position
+ */
+export function sortByVisualOrder(a, b) {
+    const rectA = a.getBoundingClientRect();
+    const rectB = b.getBoundingClientRect();
+
+    if (rectA.top !== rectB.top) {
+        return rectA.top - rectB.top;
+    }
+    return rectA.left - rectB.left;
+}
+
+/**
+ *
+ * @param {Element} el - The container element to test focus order
+ * @returns {boolean} - True if the focus order matches visual order
+ */
+export function testOrder(el) {
+    const els = getFocusableElements(el);
+    let focusOrder = [...els];
+
+    // Sort by tabindex
+    const elsIndex = focusOrder.map((el, index) => ({ index, el }));
+    elsIndex.sort((a, b) => {
+        const tabindexA = parseInt(a.el.getAttribute("tabindex")) || 0;
+        const tabindexB = parseInt(b.el.getAttribute("tabindex")) || 0;
+
+        const definedA = tabindexA > 0;
+        const definedB = tabindexB > 0;
+
+        if (!definedA && !definedB) {
+            return a.index - b.index;
+        }
+        if (definedA && !definedB) {
+            return -1;
+        }
+        if (!definedA && definedB) {
+            return 1;
+        }
+        return tabindexA - tabindexB;
+    });
+    focusOrder = elsIndex.map((obj) => obj.el);
+
+    const visualOrder = [...els].sort(sortByVisualOrder);
+    const visualOrderNoCSS = [...els];
+
+    // Remove CSS and inline styles
+    const styleEls = Array.from(
+        document.querySelectorAll('link[rel="stylesheet"], style')
+    ).map((style) => style.cloneNode(true));
+    document
+        .querySelectorAll('link[rel="stylesheet"], style')
+        .forEach((style) => style.remove());
+
+    const inlineStyles = visualOrderNoCSS.map((el) => {
+        const style = el.getAttribute("style");
+        el.setAttribute("style", "");
+        return style;
+    });
+
+    // Sort with no styles
+    visualOrderNoCSS.sort(sortByVisualOrder);
+
+    // Restore styles
+    visualOrderNoCSS.forEach((el, i) => {
+        if (inlineStyles[i]) {
+            el.setAttribute("style", inlineStyles[i]);
+        } else {
+            el.removeAttribute("style");
+        }
+    });
+
+    styleEls.forEach((style) => document.head.appendChild(style));
+
+    for (let i = 0; i < focusOrder.length; i++) {
+        if (focusOrder[i] !== visualOrder[i]) {
+            return false;
+        }
+        if (focusOrder[i] !== visualOrderNoCSS[i]) {
+            return false;
+        }
+    }
+    return true;
+}

package/test/_template.test.js

@@ -0,0 +1,21 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+// Import the function or module you want to test
+// import { functionName } from '../src/fileName';
+
+describe('Template Test File', () => {
+  // Setup before each test if needed
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should do something expected', () => {
+    // Arrange: Set up your test
+    
+    // Act: Call the function or method being tested
+    
+    // Assert: Check the result matches what you expect
+    expect(true).toBe(true);
+  });
+
+  // Add more test cases here
+});