Accessibility: Keyboard navigation to open and close the chatbot

  • Resolved georgecourt

    (@georgecourt)


    2 weeks, 2 days ago

    Hello, the plugin works great, except that it doesn’t appear to pass accessibility standards. How can I make it so, only using my keyboard, I can open the chatbot, fill in the field, send, clear and close the chatbot? When inspecting the chatbot icon, I see Name “AI Engine Chatbot”, Role “Image”, but is not Keyboard-focusable. And when I inspect the close button div.mwai-close-button there is no Name, Role is “generic” and not Keyboard-focusable. I work in higher education, and accessibility is a must. Can you offer a solution? Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Val Meow

    (@valwa)

    Hey @georgecourt! ??

    This has already been reported, and we’ll work on it as soon as we can. Thanks for your patience and understanding!

    Thread Starter georgecourt

    (@georgecourt)

    Thank you, I hope this is a top priority.
    I have it mostly working, but your team should be able to write something more efficient.

    // JavaScript Document
    function toggleChatbot() {
    var chatbotWindow = document.getElementById(“mwai-chatbot-roary-chat”);
    if (!chatbotWindow) return;

    var isOpen = chatbotWindow.classList.contains("mwai-open");

if (!isOpen) {
    chatbotWindow.classList.add("mwai-open");
    chatbotWindow.setAttribute("aria-hidden", "false");

    // Wait for the chatbot to open, then move focus to the input
    setTimeout(function () {
        var chatbotInput = chatbotWindow.querySelector(".mwai-input textarea");
        if (chatbotInput) {
            chatbotInput.setAttribute("tabindex", "0");
            chatbotInput.focus();
        }
    }, 300);
} else {
    chatbotWindow.classList.remove("mwai-open");
    chatbotWindow.setAttribute("aria-hidden", "true");
}

    }

    function attachEventListeners() {
    var chatbotTrigger = document.querySelector(“.mwai-trigger”);
    if (!chatbotTrigger) return;

    chatbotTrigger.setAttribute("tabindex", "0");
chatbotTrigger.setAttribute("role", "button");
chatbotTrigger.setAttribute("aria-label", "Open AI Chatbot");

chatbotTrigger.addEventListener("keydown", function (event) {
    if (event.key === "Enter" || event.key === " ") {
        event.preventDefault(); // Prevent scrolling on space key
        toggleChatbot();
    }
});

chatbotTrigger.addEventListener("click", function () {
    toggleChatbot();
});

    }

    // Start checking for the chatbot trigger after the page has loaded
    document.addEventListener(“DOMContentLoaded”, function () {
    var checkInterval = setInterval(function () {
    var chatbotTrigger = document.querySelector(“.mwai-trigger”);
    if (chatbotTrigger) {
    attachEventListeners();
    clearInterval(checkInterval); // Stop checking once the trigger is found
    }
    }, 1000); // Check every second
    });

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.