WCAG - Accessibility integration

[Noirtam]

Describe

We want integrate embed module in website with french accessibility constraints (RGAA). The module is not accessibility compliance.

Code adaptation

We want integrate embed module in website with french accessibility constraints (RGAA). The module is not accessibility compliance

Add html block

We have added an HTML <div> block (not visible) to receive the chatbot's responses.

<div id="chatbot-info" role="alert" style="position: absolute; top:-50000px; left:-50000px"></div>

Use observersConfig

Use observersConfig to send chatbot's response in previous block.

Chatbot.init({
 	    observersConfig: {
            // The bot message stack has changed
            observeMessages: (messages) => {
                console.log("observeMessages",{ messages });
                document.getElementById("chatbot-info").innerHTML = messages[messages.length - 1].message;
            },
    	},
}

French translate & Tab ordering

document.addEventListener('DOMContentLoaded', function() {
        // Code to execute when the DOM is fully loaded
        console.log("DOM fully loaded and parsed");
        const shadowFlowiseChatbot = document.querySelector("flowise-chatbot").shadowRoot;
        const btnToggleChatbot = shadowFlowiseChatbot.querySelector("button");
        btnToggleChatbot.setAttribute("aria-label", "Ouvrir le chatbot");
        btnToggleChatbot.setAttribute("aria-expanded", "false");
        btnToggleChatbot.setAttribute("aria-controls", "flowise-chatbot");
        btnToggleChatbot.addEventListener("click", function() {
            btnToggleChatbot.setAttribute("aria-expanded", btnToggleChatbot.getAttribute("aria-expanded") === "true" ? "false" : "true");
            btnToggleChatbot.setAttribute("aria-label", btnToggleChatbot.getAttribute("aria-expanded") === "true" ? "Fermer le chatbot" : "Ouvrir le chatbot");
        });

        const divContentBotDialog = shadowFlowiseChatbot.querySelector("div[part=bot]");
        let firstLoadingChatbot = true
        const observer = new MutationObserver((mutations) => {
            if(!firstLoadingChatbot){
                return
            }
            firstLoadingChatbot = false
            const btnSendMessage = shadowFlowiseChatbot.querySelector("button.chatbot-button:has(svg.send-icon)");
            const btnRefresh = shadowFlowiseChatbot.querySelector("button.chatbot-button:has(svg.icon-tabler-refresh)");
            const btnClose = shadowFlowiseChatbot.querySelector("button[title=Close\\ Chat]");

            //On mets en français avec un libellé clair le bouton d'envoie du message
            if (btnSendMessage) {
                btnSendMessage.setAttribute("aria-label", "Envoyer le message");
            }
            //On mets en français avec un libellé clair le bouton de réinitialisation de la discussion
            if (btnRefresh) {
                btnRefresh.setAttribute("title", "Réinitialiser la discussion");
            }
            //On mets en français le bouton de fermeture du chatbot
            if (btnClose) {
                btnClose.setAttribute("title", "Fermer le chatbot");
            }

            //On déplace le bouton de fermeture après le bouton de réinitialisation pour une logique de tabulation
            if(btnRefresh && btnClose){
                btnRefresh.after(btnClose)
            };
        });

        observer.observe(divContentBotDialog, {
            childList: true,
            subtree: true
        });
    });