Index: desktop-options.html
===================================================================
--- a/desktop-options.html
+++ b/desktop-options.html
@@ -87,7 +87,7 @@
-
+
@@ -205,17 +205,17 @@
-
+
-
+
-
+
Index: desktop-options.js
===================================================================
--- a/desktop-options.js
+++ b/desktop-options.js
@@ -1295,7 +1295,7 @@
updateSubscription(subscription);
break;
case "added":
- let {url, recommended} = subscription;
+ let {url} = subscription;
// Handle custom subscription
if (/^~user/.test(url))
{
@@ -1401,30 +1401,42 @@
function updateTooltips()
{
- let anchors = document.querySelectorAll(":not(.tooltip) > [data-tooltip]");
- for (let anchor of anchors)
+ const anchors = document.querySelectorAll("[data-tooltip]");
+ for (const anchor of anchors)
{
let id = anchor.getAttribute("data-tooltip");
- let wrapper = document.createElement("div");
- wrapper.setAttribute("aria-describedby", id);
- wrapper.setAttribute("tabindex", "0");
- wrapper.className = "icon tooltip";
- anchor.parentNode.replaceChild(wrapper, anchor);
- wrapper.appendChild(anchor);
+ // instead of replacing the whole node
+ // just make it non discoverable for
+ // the next updateTooltips call
+ anchor.removeAttribute("data-tooltip");
+ anchor.classList.add("icon", "tooltip");
- let tooltip = document.createElement("div");
- tooltip.id = id;
+ const tooltip = document.createElement("div");
tooltip.setAttribute("role", "tooltip");
+ // needed by aria-describedby
+ tooltip.id = id;
- let paragraph = document.createElement("p");
+ const paragraph = document.createElement("p");
paragraph.textContent = getMessage(id);
tooltip.appendChild(paragraph);
- wrapper.appendChild(tooltip);
+ anchor.appendChild(tooltip);
+ anchor.setAttribute("aria-describedby", id);
+
+ // if focused and the mouse reaches another (?)
+ // blur the active element to drop previous tooltip
+ anchor.addEventListener("mouseover", dropActiveElement);
}
}
+ function dropActiveElement(event)
+ {
+ const active = event.target.ownerDocument.activeElement;
+ if (active)
+ active.blur();
+ }
+
ext.onMessage.addListener((message) =>
{
switch (message.type)
Index: skin/desktop-options.css
===================================================================
--- a/skin/desktop-options.css
+++ b/skin/desktop-options.css
@@ -660,7 +660,6 @@
bottom: 0px;
position: absolute;
}
-
}
/*
@@ -1058,6 +1057,13 @@
line-height: 1.5rem;
text-decoration: none;
cursor: help;
+ /* reset minimal button style */
+ color: inherit;
+ font: inherit;
+ text-transform: initial;
+ text-align: initial;
+ font-weight: initial;
+ font-size: initial;
}
/*