Skip to content

LIBWEB-6680. Fix chat widget accessibility issues #112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alfjrl wants to merge 1 commit into
base: www/main
Choose a base branch
from
Open

LIBWEB-6680. Fix chat widget accessibility issues #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
285 changes: 137 additions & 148 deletions web/themes/frozen/umd_terp/css/footer.css
View file
Open in desktop

Large diffs are not rendered by default.

205 changes: 109 additions & 96 deletions web/themes/frozen/umd_terp/js/chatwidget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,129 +1,142 @@
// open chat widown in a new tab for chat with us! button in the navigation bar
function openChatWindow() {
let serviceSrc = document.getElementById("cw-iframe-window");

if (serviceSrc) {
window.open(
serviceSrc.getAttribute("src"),
"pop-up",
"width=360, height=594",
);
} else {
// fallback to the chat widget without referer info
window.open(
"https://umd.libanswers.com/chat/widget/5cffd49b55d69387be9a6fa51e3c5fa59efa09ca025ffc7367db9b7d083f17ec",
"pop-up",
"width=360, height=594",
);
}

return false;
}

// chat widget w/ new design system
// expand/collapse the chatbox
function expand() {
let chatwidget = document.getElementById("chatwidget");
let chevron = document.getElementById("cw--chevron");
let button = document.getElementById("cw-service-status");

if (chatwidget.classList.contains("closed")) {
chatwidget.classList.remove("closed");
chevron.classList.remove("chevron-ver");
button.setAttribute("aria-expanded", "true");
} else {
chatwidget.classList.add("closed");
chevron.classList.add("chevron-ver");
button.setAttribute("aria-expanded", "false");
}
}

// connect to dept: library chat
const serviceURL =
"https://chat-us.libanswers.com/widget_status?iid=450&rules=%5B%7B%22u%22%3A0%2C%22d%22%3A%5B1198%5D%2C%22c%22%3A%22%22%2C%22fallbackSeconds%22%3A0%7D%5D";

const checkInterval = 30000; // 30 seconds in milliseconds
const checkInterval = 30000; // 30 seconds

// reload the iframe to show correct chatbox page
function reloadIframe() {
document.getElementById("cw-iframe").src += "";
console.log("iframe reload");
addRefererToIframe();
}

// update chat widget's button style
function setStyleProperty(status) {
const root = document.documentElement;
let name = status;

root.style.setProperty("--cw-color-main", `var(--${name}-primary-color)`);
root.style.setProperty("--cw-color-sematic", `var(--${name}-sematic-color)`);
root.style.setProperty("--cw-color-text", `var(--${name}-text-color)`);
root.style.setProperty(
"--cw-color-background",
`var(--${name}-background-color)`
);
root.style.setProperty("--cw-icon-default", `var(--${name}-icon-default)`);
root.style.setProperty("--cw-icon-hover", `var(--${name}-icon-hover)`);
root.style.setProperty("--cw-chevron-default", `var(--chevron-${name})`);
// add referer to the chat widget iframe
function addRefererToIframe() {
const iframe = document.getElementById("cw-iframe-window");
if (!iframe) {
return;
}
const referer = window.location.href;

try {
const url = new URL(iframe.src, window.location.href);
if (url.searchParams.get("referer") !== referer) {
url.searchParams.set("referer", referer);
iframe.src = url.toString();
}
} catch (e) {
if (!/[?&]referer=/.test(iframe.src)) {
iframe.src =
iframe.src +
(iframe.src.indexOf("?") === -1 ? "?" : "&") +
"referer=" +
encodeURIComponent(referer);
}
}
}

// initiate style update based on the service status
function updateStatusStyle(status) {
let widgetStatus = document.getElementById("cw-status");
// update the chat widget UI
function updateChatWidgetStatus(status) {
let widget = document.getElementById("chatwidget");
let widgetStatus = document.getElementById("cw--status");
let button = document.getElementById("cw-service-status");

if (!widget || !widgetStatus) {
return;
}

if (status === true) {
setStyleProperty("live");
widgetStatus.innerText = "live";
widget.classList.remove("offline");
button.setAttribute(
"aria-label",
"Chat With Us! is online. Click to expand the chat widget.",
);
reloadIframe();
} else {
setStyleProperty("offline");
widgetStatus.innerText = "offline";
widget.classList.add("offline");
button.setAttribute(
"aria-label",
"Chat With Us! is offline. Click to expand the chat widget.",
);
reloadIframe();
}
}

// check the service status
function checkServiceStatus() {
fetch(serviceURL)
// check the server status and get the service status
return fetch(serviceURL) // RETURN the promise
.then((response) => {
if (response.status === 200) {
let data = response.json();
return data;
} else {
console.log("server is down");
if (!response.ok) {
throw new Error(`Server returned status ${response.status}`);
}
return response.json();
})
// update the chat widget based on the service status
.then((data) => {
const awayValue = data.away;
if (typeof awayValue !== "undefined") {
updateStatusStyle(true);
} else {
updateStatusStyle(false);
// reload the iframe to show correct chat widget page, only if the widget is already offline
reloadIframe();
}
const isLive = data.away === false;
updateChatWidgetStatus(isLive);
})
.catch((error) => {
console.log("Chat Service Error:", error);
updateChatWidgetStatus(false);
});
}

// update chat service url to provide referer info
function updateIframeUrl(elementId) {
let serviceSrc = document.getElementById(elementId);

if (serviceSrc) {
let currentUrl = document.URL;
serviceSrc.setAttribute(
"src",
serviceSrc.getAttribute("src") + "?referer=" + currentUrl
);
}
// Initialize on DOM ready
function initChatWidget() {
// Initial check
checkServiceStatus().then(() => {
reloadIframe();
});

// Set up recurring check
const intervalId = setInterval(() => {
checkServiceStatus();
}, checkInterval);
}

// expand/collapse the chatbox
function expand() {
let chatwidget = document.getElementById("chatwidget");
let chevron = document.getElementById("cw-chevron");

if (chatwidget.classList.contains("closed")) {
chatwidget.classList.remove("closed");
chevron.classList.remove("chevron-ver");
} else {
chatwidget.classList.add("closed");
chevron.classList.add("chevron-ver");
}
// Run initialization
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initChatWidget);
} else {
initChatWidget();
}

// open chat widown in a new tab for chat with us! button in the navigation bar
function openChatWindow() {
let serviceSrc = document.getElementById("cw-iframe-window");

if (serviceSrc) {
window.open(
serviceSrc.getAttribute("src"),
"pop-up",
"width=360, height=594"
);
} else {
// fallback to the chat widget without referer info
window.open(
"https://umd.libanswers.com/chat/widget/5cffd49b55d69387be9a6fa51e3c5fa59efa09ca025ffc7367db9b7d083f17ec",
"pop-up",
"width=360, height=594"
);
}

return false;
}

// initial check
checkServiceStatus();

// set up a recurring check
setInterval(checkServiceStatus, checkInterval);

// update chat service url to provide referer info
document.addEventListener("DOMContentLoaded", function () {
updateIframeUrl("cw-iframe-window");
});
32 changes: 15 additions & 17 deletions web/themes/frozen/umd_terp/templates/_includes/global/umdlib-footer.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,22 +79,20 @@
</footer>
<a href="#" class="back-to-top">Back to Top</a>
{% if umd_terp_libchat_url %}
<div class="cw closed" id="chatwidget">
<button class="cw-header" id="cw-service-status" onclick="expand()" type="button" aria-label="Open chat with us chat widget">
<div class="cw-header-info">
<div class="cw-icon" id="cw-icon" aria-hidden="true"></div>
<div class="cw-text"><p>Chat With Us!</p></div>
<div class="cw-status" id="cw-status">offline</div>
</div>
<div class="cw-chevron chevron-ver" id="cw-chevron"></div>
</button>
<div class="cw-iframe">
<iframe
src="{{ umd_terp_libchat_url }}"
frameborder="0"
id="cw-iframe-window"
></iframe>
</div>
</div>
<div class="umd-lib chat-widget offline closed" id="chatwidget">
<button class="cw--header c-bg-primary" id="cw-service-status" onclick="expand()" type="button" aria-label="chat with us!" aria-expanded="false" aria-controls="cw--iframe">
<div class="cw--header-info">
<div class="cw--icon" id="cw--icon" aria-hidden="true"></div>
<div class="cw--text">Chat With Us!</div>
</div>
<div class="cw--header-sub" aria-hidden="true">
<div class="cw--status" id="cw--status">offline</div>
<div class="cw--chevron i-chevron-down chevron-ver" id="cw--chevron"></div>
</div>
</button>
<div class="cw--iframe" id="cw--iframe">
<iframe title="Chat with us!" src="{{ umd_terp_libchat_url }}" frameborder="0" id="cw-iframe-window"></iframe>
</div>
</div>
{% endif %}