@uuv/assistant 2.72.0 → 2.73.1

package/dist/src/helper/informative-nodes-helper.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Software Name : UUV
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This software is distributed under the MIT License,
+ * see the "LICENSE" file for more details
+ *
+ * Authors: NJAKO MOLOM Louis Fredice & SERVICAL Stanley
+ * Software description: Make test writing fast, understandable by any human
+ * understanding English or French.
+ */
+export declare class InformativeNodesHelper {
+    private readonly TAGS_WITH_NATIVE_ACCESSIBILITY_DATA;
+    private readonly INTERESTING_TAGS;
+    private readonly candidatesWithNativeAccessibleData;
+    private readonly candidatesWithCustomAccessibleData;
+    constructor();
+    /**
+     * Trouve l'élément parent le plus pertinent pour l'analyse d'accessibilité
+     * @param {HTMLElement} element - L'élément de départ
+     * @returns {HTMLElement|null} - L'élément parent pertinent ou null si non trouvé
+     */
+    findRelevantAccessibilityParent(element: any): HTMLElement | null;
+    extractContextForElement(element: Element): {
+        parentElement: HTMLElement | null;
+        htmlContext: string;
+        siblingText: string;
+    };
+    getSiblingsFragment(element: Element, maxSiblings?: number): string;
+    private extractInterestingChildren;
+    private isStructuralOnly;
+    private findInformativeElements;
+    getAvailableNodes(): Element[];
+    getAvailableChildren(node: HTMLElement | Element): Promise<Element[]>;
+    private hasInformativeAttributes;
+    getDialogName(node: Element): string | null;
+}

package/dist/src/helper/informative-nodes-helper.js

@@ -0,0 +1,250 @@
+"use strict";
+/**
+ * Software Name : UUV
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This software is distributed under the MIT License,
+ * see the "LICENSE" file for more details
+ *
+ * Authors: NJAKO MOLOM Louis Fredice & SERVICAL Stanley
+ * Software description: Make test writing fast, understandable by any human
+ * understanding English or French.
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InformativeNodesHelper = void 0;
+class InformativeNodesHelper {
+    constructor() {
+        this.TAGS_WITH_NATIVE_ACCESSIBILITY_DATA = [
+            "article",
+            "aside",
+            "button",
+            "details",
+            "dialog",
+            "fieldset",
+            "figure",
+            "form",
+            "footer",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "header",
+            "hr",
+            "img",
+            "input",
+            "label",
+            "li",
+            "main",
+            "menu",
+            "nav",
+            "ol",
+            "ul",
+            "option",
+            "progress",
+            "section",
+            "select",
+            "summary",
+            "table",
+            "textarea",
+            "tbody",
+            "thead",
+            "tfoot",
+            "td",
+            "th",
+            "tr",
+        ];
+        // fIXME SSE transformer en role
+        this.INTERESTING_TAGS = ["P", "H1", "H2", "H3", "H4", "H5", "H6", "BUTTON", "A", "LABEL", "STRONG", "DIV", "SPANz"];
+        this.candidatesWithNativeAccessibleData = document.querySelectorAll(this.TAGS_WITH_NATIVE_ACCESSIBILITY_DATA.join(","));
+        this.candidatesWithCustomAccessibleData = this.findInformativeElements(document);
+    }
+    /**
+     * Trouve l'élément parent le plus pertinent pour l'analyse d'accessibilité
+     * @param {HTMLElement} element - L'élément de départ
+     * @returns {HTMLElement|null} - L'élément parent pertinent ou null si non trouvé
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    findRelevantAccessibilityParent(element) {
+        if (!element || !(element instanceof HTMLElement)) {
+            return null;
+        }
+        // Éléments considérés comme pertinents pour l'accessibilité (par ordre de priorité)
+        const relevantElements = [
+            // Éléments sectionnels et structurels
+            "section", "article", "aside", "nav", "main", "header", "footer",
+            // Éléments de contenu
+            "p", "div", "span",
+            // Éléments de liste
+            "ul", "ol", "li", "dl", "dt", "dd",
+            // Éléments de formulaire
+            "form", "fieldset", "legend",
+            // Éléments de tableau
+            "table", "thead", "tbody", "tfoot", "tr", "td", "th",
+            // Autres éléments structurels
+            "blockquote", "figure", "figcaption", "details", "summary"
+        ];
+        // Éléments avec des rôles ARIA pertinents
+        const relevantAriaRoles = [
+            "banner", "navigation", "main", "complementary", "contentinfo",
+            "region", "article", "section", "group", "list", "listitem",
+            "table", "row", "cell", "columnheader", "rowheader",
+            "form", "search", "dialog", "alertdialog", "alert"
+        ];
+        let currentElement = element.parentElement;
+        let bestMatch = null;
+        let bestPriority = Infinity;
+        while (currentElement) {
+            const tagName = currentElement.tagName.toLowerCase();
+            const role = currentElement.getAttribute("role");
+            // Vérifier si l'élément a un rôle ARIA pertinent
+            if (role && relevantAriaRoles.includes(role)) {
+                const priority = relevantAriaRoles.indexOf(role);
+                if (priority < bestPriority) {
+                    bestMatch = currentElement;
+                    bestPriority = priority;
+                }
+            }
+            // Vérifier si l'élément est dans notre liste d'éléments pertinents
+            const elementIndex = relevantElements.indexOf(tagName);
+            if (elementIndex !== -1 && elementIndex < bestPriority) {
+                bestMatch = currentElement;
+                bestPriority = elementIndex;
+            }
+            // Vérifier les attributs d'accessibilité importants
+            if (currentElement.hasAttribute("aria-label") ||
+                currentElement.hasAttribute("aria-labelledby") ||
+                currentElement.hasAttribute("aria-describedby")) {
+                // Donner une priorité plus élevée aux éléments avec des labels d'accessibilité
+                const accessibilityPriority = bestPriority - 0.5;
+                if (accessibilityPriority < bestPriority) {
+                    bestMatch = currentElement;
+                    bestPriority = accessibilityPriority;
+                }
+            }
+            // Arrêter la recherche si on trouve un élément très pertinent
+            if (["section", "article", "main", "nav", "form"].includes(tagName) ||
+                (role && ["main", "navigation", "banner", "contentinfo"].includes(role))) {
+                break;
+            }
+            currentElement = currentElement.parentElement;
+        }
+        return bestMatch;
+    }
+    extractContextForElement(element) {
+        var _a, _b;
+        const siblingText = Array.from(((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.childNodes) || [])
+            .filter((n) => {
+            var _a;
+            const isTextNode = n.nodeType === 3;
+            return isTextNode && ((_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim());
+        })
+            .map((n) => { var _a; return (_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
+            .join(" ");
+        let fragment = this.getSiblingsFragment(element, 1);
+        const prev = (_b = element.parentElement) === null || _b === void 0 ? void 0 : _b.previousElementSibling;
+        if (prev && this.INTERESTING_TAGS.includes(prev.tagName)) {
+            fragment = prev.outerHTML + "\n" + fragment;
+        }
+        return {
+            parentElement: element.parentElement,
+            htmlContext: element.parentElement.outerHTML,
+            siblingText,
+        };
+    }
+    getSiblingsFragment(element, maxSiblings = 1) {
+        const parent = element.parentElement;
+        if (!parent) {
+            return element.outerHTML;
+        }
+        const children = Array.from(parent.children);
+        const index = children.indexOf(element);
+        const beforeEls = children.slice(Math.max(0, index - maxSiblings), index);
+        const afterEls = children.slice(index + 1, index + 1 + maxSiblings);
+        function processElement(informativeNodesHelper, el) {
+            if (informativeNodesHelper.INTERESTING_TAGS.includes(el.tagName)) {
+                return el.outerHTML;
+            }
+            if (informativeNodesHelper.isStructuralOnly(el)) {
+                return informativeNodesHelper.extractInterestingChildren(el).join("\n");
+            }
+            return "";
+        }
+        const before = beforeEls.map(value => processElement(this, value)).filter(Boolean);
+        const after = afterEls.map(value => processElement(this, value)).filter(Boolean);
+        return [...before, element.outerHTML, ...after].join("\n");
+    }
+    extractInterestingChildren(el) {
+        const collected = [];
+        for (const child of Array.from(el.children)) {
+            if (this.INTERESTING_TAGS.includes(child.tagName)) {
+                collected.push(child.outerHTML);
+            }
+            else if (this.isStructuralOnly(child)) {
+                collected.push(...this.extractInterestingChildren(child));
+            }
+        }
+        return collected;
+    }
+    isStructuralOnly(el) {
+        const tag = el.tagName;
+        const isStructuralTag = ["DIV", "SPAN", "SECTION", "MAIN", "BODY"].includes(tag);
+        return isStructuralTag && !this.hasInformativeAttributes(el);
+    }
+    findInformativeElements(root) {
+        const query = `*${this.TAGS_WITH_NATIVE_ACCESSIBILITY_DATA.map(tag => `:not(${tag})`).join("")}`;
+        const nodes = root.querySelectorAll(query);
+        const informative = [...nodes].filter(el => this.hasInformativeAttributes(el));
+        const children = [...nodes].flatMap(el => Array.from(el.children));
+        return [...informative, ...children];
+    }
+    getAvailableNodes() {
+        return [...this.candidatesWithNativeAccessibleData, ...this.candidatesWithCustomAccessibleData];
+    }
+    getAvailableChildren(node) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (node.children.length === 1) {
+                return this.getAvailableChildren(node.children[0]);
+            }
+            return this.findInformativeElements(node);
+        });
+    }
+    hasInformativeAttributes(node) {
+        for (const attr of Array.from(node.attributes)) {
+            const name = attr.name.toLowerCase();
+            const isAccessibilityAttr = name === "role" ||
+                name === "alt" ||
+                name === "title" ||
+                name === "tabindex" ||
+                name === "lang" ||
+                name === "scope" ||
+                name === "for" ||
+                name.startsWith("aria-");
+            const isTechnicalAttr = name === "data-testid";
+            if (isAccessibilityAttr || isTechnicalAttr) {
+                return true;
+            }
+        }
+        return false;
+    }
+    getDialogName(node) {
+        var _a, _b, _c;
+        const idAccessibleName = node.getAttribute("aria-labelledby");
+        if (idAccessibleName) {
+            return (_b = (_a = document.getElementById(idAccessibleName)) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : null;
+        }
+        return (_c = node.getAttribute("aria-label")) !== null && _c !== void 0 ? _c : node.getAttribute("title");
+    }
+}
+exports.InformativeNodesHelper = InformativeNodesHelper;

package/dist/src/helper/keyboard-navigation-helper.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Software Name : UUV
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This software is distributed under the MIT License,
+ * see the "LICENSE" file for more details
+ *
+ * Authors: NJAKO MOLOM Louis Fredice & SERVICAL Stanley
+ * Software description: Make test writing fast, understandable by any human
+ * understanding English or French.
+ */
+import { FocusableElement } from "tabbable";
+import { AdditionalLayerEnum, ResultSentence } from "../Commons";
+export interface KeyboardNavigation {
+    current: FocusableElement[];
+    expected: FocusableElement[];
+}
+export declare function switchKeyboardLayer(keyboardLayer: ShadowRoot, layer: AdditionalLayerEnum, elements: FocusableElement[]): void;
+export declare function getKeyboardNavigation(): Promise<KeyboardNavigation>;
+export declare function buildResultSentence(focusableElements: FocusableElement[]): Promise<ResultSentence[]>;

package/dist/src/helper/keyboard-navigation-helper.js

@@ -0,0 +1,151 @@
+"use strict";
+/**
+ * Software Name : UUV
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This software is distributed under the MIT License,
+ * see the "LICENSE" file for more details
+ *
+ * Authors: NJAKO MOLOM Louis Fredice & SERVICAL Stanley
+ * Software description: Make test writing fast, understandable by any human
+ * understanding English or French.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.switchKeyboardLayer = switchKeyboardLayer;
+exports.getKeyboardNavigation = getKeyboardNavigation;
+exports.buildResultSentence = buildResultSentence;
+const tabbable_1 = require("tabbable");
+const Commons_1 = require("../Commons");
+const LayerHelper = __importStar(require("./layer-helper"));
+const model_1 = require("../translator/model");
+const keyboard_navigation_translator_1 = require("../translator/keyboard-navigation-translator");
+const highlight_helper_1 = require("./highlight/highlight-helper");
+const translator = new keyboard_navigation_translator_1.KeyboardNavigationTranslator();
+function switchKeyboardLayer(keyboardLayer, layer, elements) {
+    const htmlElements = elements.map(el => el);
+    if (layer === Commons_1.AdditionalLayerEnum.CURRENT_NAVIGATION) {
+        LayerHelper.removeLayerToShadowDom(keyboardLayer, Commons_1.AdditionalLayerEnum.EXPECTED_NAVIGATION);
+        LayerHelper.addLayerToShadowDom(keyboardLayer, Commons_1.AdditionalLayerEnum.CURRENT_NAVIGATION);
+        LayerHelper.buildLayer(keyboardLayer, Commons_1.AdditionalLayerEnum.CURRENT_NAVIGATION, htmlElements, buildAdditionalStyle(htmlElements), false, true);
+    }
+    else {
+        LayerHelper.removeLayerToShadowDom(keyboardLayer, Commons_1.AdditionalLayerEnum.CURRENT_NAVIGATION);
+        LayerHelper.addLayerToShadowDom(keyboardLayer, Commons_1.AdditionalLayerEnum.EXPECTED_NAVIGATION);
+        LayerHelper.buildLayer(keyboardLayer, Commons_1.AdditionalLayerEnum.EXPECTED_NAVIGATION, htmlElements, buildAdditionalStyle(htmlElements), false, true);
+    }
+}
+function getKeyboardNavigation() {
+    return __awaiter(this, void 0, void 0, function* () {
+        const currentKeyboardFocusableElements = (0, tabbable_1.tabbable)(document.body, {});
+        return {
+            current: currentKeyboardFocusableElements,
+            expected: extractExpectedKeyboardNavigation(currentKeyboardFocusableElements)
+        };
+    });
+}
+function buildResultSentence(focusableElements) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const sentences = [];
+        const startKeyboardNavigationSentence = translator.getSentenceFromKey("key.given.keyboard.startNavigationFromTheTop");
+        if (startKeyboardNavigationSentence) {
+            sentences.push(model_1.StepCaseEnum.AND + startKeyboardNavigationSentence.wording);
+        }
+        const promises = focusableElements.map((node) => __awaiter(this, void 0, void 0, function* () {
+            const focusBySelectorControlSentence = translator.getSentenceFromKey("key.then.element.withSelectorFocused");
+            const focusByRoleAndNameControlSentence = translator.getSentenceFromKey("key.then.element.withRoleAndNameFocused");
+            if (focusBySelectorControlSentence && focusByRoleAndNameControlSentence) {
+                const result = yield translator.translate(node);
+                result.sentences.forEach((element) => {
+                    sentences.push(element);
+                });
+            }
+            else {
+                console.error("sentences next focus element or check focused element is undefined");
+            }
+            return Promise.resolve("");
+        }));
+        yield Promise.all(promises);
+        return sentences.map((elem, key) => {
+            return {
+                key: key,
+                result: elem
+            };
+        });
+    });
+}
+function buildAdditionalStyle(elements) {
+    let completeStyle = "";
+    if (elements) {
+        elements.forEach((element, index) => {
+            completeStyle = `${completeStyle}
+                
+        #element-border-${index}:has(~ #order-${index}:hover), #element-border-${index}:has(~ #order-content-${index}:hover) {
+          stroke-width: ${highlight_helper_1.HIGHLIGHT_ORANGE_PROPS.width};
+          stroke: ${highlight_helper_1.HIGHLIGHT_ORANGE_PROPS.borderColor};
+          fill: transparent;
+        }
+        
+        .line:has(~ #order-${index}:hover), .navigation-line:has(~ #order-content-${index}:hover) {
+          stroke: grey;
+        }
+        `;
+        });
+    }
+    return completeStyle;
+}
+function extractExpectedKeyboardNavigation(currentKeyboardFocusableElements) {
+    return [...currentKeyboardFocusableElements].sort((a, b) => {
+        const leftRect = a.getBoundingClientRect();
+        const rightRect = b.getBoundingClientRect();
+        if (leftRect.y < rightRect.y) {
+            return -1;
+        }
+        if (leftRect.y === rightRect.y && leftRect.x < rightRect.x) {
+            return -1;
+        }
+        return 1;
+    });
+}

package/dist/src/helper/layer-helper.d.ts

@@ -0,0 +1,12 @@
+import { AdditionalLayerEnum } from "../Commons";
+export interface Point {
+    x: number;
+    y: number;
+}
+export declare const ORDER_PROPS: {
+    radius: number;
+    linkWith: number;
+};
+export declare function buildLayer(layerShadowRoot: ShadowRoot, layer: AdditionalLayerEnum, elements: HTMLElement[], additionalStyle: string, isFullWith: boolean, displayLinkBetweenElements: boolean, displayNavigationOrder?: boolean): void;
+export declare function addLayerToShadowDom(dom: ShadowRoot, layer: AdditionalLayerEnum): void;
+export declare function removeLayerToShadowDom(dom: ShadowRoot, layer: AdditionalLayerEnum): void;

package/dist/src/helper/layer-helper.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ORDER_PROPS = void 0;
+exports.buildLayer = buildLayer;
+exports.addLayerToShadowDom = addLayerToShadowDom;
+exports.removeLayerToShadowDom = removeLayerToShadowDom;
+const Commons_1 = require("../Commons");
+const highlight_helper_1 = require("./highlight/highlight-helper");
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+exports.ORDER_PROPS = {
+    radius: 12,
+    linkWith: 4,
+};
+function buildBasicLayerStyle(isFullWith) {
+    const remaningWidth = isFullWith ? 0 : Commons_1.UUV_ASSISTANT_BAR_WIDTH;
+    return `
+    .uvv-assistant-additional-layer-svg {
+      z-index: 2147483527;
+      position: absolute;
+      top: 0;
+      min-width: calc(100vw - ${remaningWidth}px);
+      width: ${document.body.getBoundingClientRect().width - remaningWidth}px;
+      min-height: 100vh;
+      height: ${document.body.getBoundingClientRect().height + 50}px;
+      background-color: rgba(128, 128, 128, 0.65);
+    }
+    
+    .element-border {
+      fill: transparent;
+    }
+    
+    .order {
+      fill: black;
+      cursor: pointer;
+    }
+    
+    .order-content {
+      fill: white;
+      cursor: pointer;
+    }
+    
+    .line {
+      stroke: black;
+      stroke-width: ${exports.ORDER_PROPS.linkWith};
+    }
+  `;
+}
+function buildCompleteStyle(additionalStyle, isFullWith) {
+    return `${buildBasicLayerStyle(isFullWith)}
+        ${additionalStyle}
+    `;
+}
+function drawHighlight(layerContainer, targetElement, order) {
+    const highlightArea = document.createElementNS(SVG_NAMESPACE, "rect");
+    highlightArea.setAttribute("class", "element-border");
+    highlightArea.setAttribute("id", `element-border-${order}`);
+    highlightArea.setAttribute("width", `${targetElement.getBoundingClientRect().width + (highlight_helper_1.HIGHLIGHT_ORANGE_PROPS.width * 2)}`);
+    highlightArea.setAttribute("height", `${targetElement.getBoundingClientRect().height + (highlight_helper_1.HIGHLIGHT_ORANGE_PROPS.width * 2)}`);
+    highlightArea.setAttribute("x", `${window.scrollX + targetElement.getBoundingClientRect().x - highlight_helper_1.HIGHLIGHT_ORANGE_PROPS.width}`);
+    highlightArea.setAttribute("y", `${window.scrollY + targetElement.getBoundingClientRect().y - highlight_helper_1.HIGHLIGHT_ORANGE_PROPS.width}`);
+    layerContainer.append(highlightArea);
+}
+function drawNavigationOrder(layerContainer, targetElement, order) {
+    const x = window.scrollX +
+        targetElement.getBoundingClientRect().x +
+        targetElement.getBoundingClientRect().width;
+    const y = window.scrollY + targetElement.getBoundingClientRect().y;
+    const orderIndicatorContainer = document.createElementNS(SVG_NAMESPACE, "circle");
+    orderIndicatorContainer.setAttribute("class", "order");
+    orderIndicatorContainer.setAttribute("id", `order-${order}`);
+    orderIndicatorContainer.setAttribute("r", `${exports.ORDER_PROPS.radius}`);
+    orderIndicatorContainer.setAttribute("cx", `${x}`);
+    orderIndicatorContainer.setAttribute("cy", `${y}`);
+    const orderIndicatorContent = document.createElementNS(SVG_NAMESPACE, "text");
+    orderIndicatorContent.innerHTML = `${order + 1}`;
+    orderIndicatorContent.setAttribute("class", "order-content");
+    orderIndicatorContent.setAttribute("id", `order-content-${order}`);
+    orderIndicatorContent.setAttribute("text-anchor", "middle");
+    orderIndicatorContent.setAttribute("alignment-baseline", "central");
+    orderIndicatorContent.setAttribute("x", `${x}`);
+    orderIndicatorContent.setAttribute("y", `${y}`);
+    layerContainer.append(orderIndicatorContainer);
+    layerContainer.append(orderIndicatorContent);
+}
+function drawLinkBetweenElement(layerContainer, startPoint, endPoint) {
+    const linkBetweenNode = document.createElementNS(SVG_NAMESPACE, "line");
+    linkBetweenNode.setAttribute("class", "line");
+    linkBetweenNode.setAttribute("x1", `${startPoint.x}`);
+    linkBetweenNode.setAttribute("y1", `${startPoint.y}`);
+    linkBetweenNode.setAttribute("x2", `${endPoint.x}`);
+    linkBetweenNode.setAttribute("y2", `${endPoint.y}`);
+    layerContainer.append(linkBetweenNode);
+}
+function getMiddlePoint(previousElement) {
+    return {
+        x: window.scrollX +
+            previousElement.getBoundingClientRect().x +
+            previousElement.getBoundingClientRect().width,
+        y: window.scrollY + previousElement.getBoundingClientRect().y,
+    };
+}
+function initSvgElement(layerShadowRoot, layer, additionalStyle, isFullWith) {
+    const completeStyle = buildCompleteStyle(additionalStyle, isFullWith);
+    const layerShadowRootElement = layerShadowRoot.querySelector(`#${layer.toString()}`);
+    if (layerShadowRootElement) {
+        layerShadowRootElement.innerHTML = `
+      <style>
+        ${completeStyle}
+      </style>
+      <svg xmlns="http://www.w3.org/2000/svg" id="${layer.toString()}-svg" class="uvv-assistant-additional-layer-svg">
+      </svg>
+    `;
+    }
+}
+function buildLayer(layerShadowRoot, layer, elements, additionalStyle, isFullWith, displayLinkBetweenElements, displayNavigationOrder = true) {
+    initSvgElement(layerShadowRoot, layer, additionalStyle, isFullWith);
+    const layerContainer = layerShadowRoot.querySelector(`#${layer.toString()}-svg`);
+    if (layerContainer) {
+        if (displayLinkBetweenElements) {
+            elements.forEach((currentElement, index, allElements) => {
+                if (index > 0) {
+                    const startPoint = getMiddlePoint(allElements[index - 1]);
+                    const endPoint = getMiddlePoint(currentElement);
+                    drawLinkBetweenElement(layerContainer, startPoint, endPoint);
+                }
+            });
+        }
+        elements.forEach((currentElement, index) => {
+            drawHighlight(layerContainer, currentElement, index);
+            if (displayNavigationOrder) {
+                drawNavigationOrder(layerContainer, currentElement, index);
+            }
+        });
+    }
+}
+function addLayerToShadowDom(dom, layer) {
+    const newLayer = document.createElement("div");
+    newLayer.setAttribute("id", layer.toString());
+    newLayer.setAttribute("class", "uvv-assistant-additional-layer");
+    if (!dom.getElementById(layer.toString())) {
+        dom.appendChild(newLayer);
+    }
+}
+function removeLayerToShadowDom(dom, layer) {
+    const layerToRemove = dom.getElementById(layer.toString());
+    if (layerToRemove) {
+        dom.removeChild(layerToRemove);
+    }
+}

package/dist/src/helper/result-display-helper.d.ts

@@ -0,0 +1,2 @@
+import { Extension } from "@uiw/react-codemirror";
+export declare function buildUuvGutter(): Extension;

package/dist/src/helper/result-display-helper.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildUuvGutter = buildUuvGutter;
+const react_codemirror_1 = require("@uiw/react-codemirror");
+const uuvA11yWarningMarker = new class extends react_codemirror_1.GutterMarker {
+    toDOM() {
+        const marker = document.createElement("div");
+        marker.innerHTML = "<div class='uuv-gutter-warning'>⚠️</div>";
+        marker.setAttribute("title", "Accessibility role and name must be defined");
+        return marker;
+    }
+}();
+function buildUuvGutter() {
+    return (0, react_codemirror_1.gutter)({
+        lineMarker(view, line) {
+            const value = view.state.doc.lineAt(line.from).text;
+            return value.includes("selector") ? uuvA11yWarningMarker : null;
+        }
+    });
+}

package/dist/src/helper/result-script-helper.d.ts

@@ -0,0 +1 @@
+export declare function buildResultingScript(featureName: string, scenarioName: string, generatedScriptStep: string[], baseUrl: string): string;