prefs: fix text-link not clicking on space/enter (#4522)
Fix regression after 117197e11d
where space or enter would not trigger a click on
link outside of the main window.
".keyboard-clickable" is handled by listener in ZoteroPane,
so links outside of it (e.g. preferences) are not affected by it.
For now, just explicitly handle "keypress" event by the
zotero-text-link component.
Also, added a focus-ring around the link so it is visible
when it is focused.
Fixes: #4521
This commit is contained in:
parent
531f55120c
commit
35da1187b3
2 changed files with 7 additions and 1 deletions
|
@ -9,11 +9,16 @@
|
||||||
this.open(event);
|
this.open(event);
|
||||||
}
|
}
|
||||||
}, true);
|
}, true);
|
||||||
|
this.addEventListener('keypress', (event) => {
|
||||||
|
if (event.key == 'Enter' || event.key == ' ') {
|
||||||
|
event.preventDefault();
|
||||||
|
this.click();
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
this.classList.add('zotero-text-link');
|
this.classList.add('zotero-text-link');
|
||||||
this.classList.add('keyboard-clickable');
|
|
||||||
this.setAttribute('role', 'link');
|
this.setAttribute('role', 'link');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -4,4 +4,5 @@
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
border: var(--material-border-transparent);
|
border: var(--material-border-transparent);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@include focus-ring;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue