Repository navigation
Disable social links after being clicked - #39031
Conversation
|
Rebased to run the CI again. |
|
Instead of extending the Because elements could be removed or added to the page at any point by JavaScript (our theme does not, but a custom theme could), the event listener for clicks should be added on the root of the document, all events will eventually bubble up there. I would also opt to use a more generic data attribute name to target the element, this allows the functionality to be used more generically, instead of being tied to a single context. We should also try to use data attributes to pass properties such as the disabled class, as this will make it easier to do CSP (Content Security Policy) later on. <a
href="..."
data-once-link
data-disabled-class="{properties.kcFormSocialAccountListButtonDisabledClass!}">
...
</a>
<script type="module">
document.addEventListener("click", (event) => {
const link = event.target.closest("a[data-once-link]");
if (!link || !link.hasAttribute("href")) {
return;
}
const { disabledClass } = link.dataset;
if (disabledClass) {
link.classList.add(disabledClass);
}
link.removeAttribute("href");
link.setAttribute("role", "link");
link.setAttribute("aria-disabled", "true");
});
</script> |
|
@jonkoops But if we remove the |
You are correct. I thought we could still navigate away in that case, but it seems not. If we don't remove the document.addEventListener("click", (event) => {
const link = event.target.closest("a[data-once-link]");
if (!link || link.getAttribute("aria-disabled") === "true") {
return;
}
const { disabledClass } = link.dataset;
if (disabledClass) {
link.classList.add(disabledClass);
}
link.setAttribute("aria-disabled", "true");
}); |
Closes keycloak#35278 Signed-off-by: rmartinc <rmartinc@redhat.com>
|
@jonkoops Done! Let's see the CI... |
Closes keycloak#35278 Signed-off-by: rmartinc <rmartinc@redhat.com> (cherry picked from commit 3969c40)
Closes keycloak#35278 Signed-off-by: rmartinc <rmartinc@redhat.com> (cherry picked from commit 3969c40)
Closes #35278
@jonkoops This is a try to disable double click in the social links. I used the
onclickto avoid the subsequent clicks and added a new property in the themes to add the patternfly disable class.