vpat: 1 add role="link" to links components (#3952)
- added role="link" to "zotero-text-link" custom component, using that instead of directly setting the class wherever possible - in all other cases, added role="link" directly to links - added tooltiptext and "noClick" option to zotero-text-link so that this component could be used in attachmentBox.js - use "keyboard-clickable" class in zotero-text-link instead of a separate listener to handle keypresses for brevity
This commit is contained in:
parent
5263c79ea8
commit
117197e11d
5 changed files with 21 additions and 23 deletions
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
<hbox>
|
||||
<label id="version"/>
|
||||
<label id="changelog" class="zotero-text-link" value="&zotero.whatsNew;"/>
|
||||
<label id="changelog" is="zotero-text-link" value="&zotero.whatsNew;"/>
|
||||
</hbox>
|
||||
<script>
|
||||
var version = Zotero.version;
|
||||
|
@ -44,8 +44,7 @@
|
|||
<script><![CDATA[
|
||||
Components.utils.import("resource://zotero/config.js");
|
||||
|
||||
document.getElementById('changelog').onclick =
|
||||
() => Zotero.launchURL(ZOTERO_CONFIG.CHANGELOG_URL);
|
||||
document.getElementById('changelog').href = ZOTERO_CONFIG.CHANGELOG_URL;
|
||||
|
||||
// Replace [links] in localized strings with spans with onclick handlers
|
||||
//
|
||||
|
@ -85,6 +84,7 @@
|
|||
// Activate text links
|
||||
for (let span of document.getElementById('about-text').getElementsByTagName('span')) {
|
||||
span.className = 'text-link';
|
||||
span.setAttribute('role', 'link');
|
||||
span.onclick = function () {
|
||||
Zotero.launchURL(this.getAttribute('data-href'));
|
||||
};
|
||||
|
|
|
@ -34,7 +34,7 @@
|
|||
<html:div class="body">
|
||||
<attachment-preview id="attachment-preview" tabindex="0"/>
|
||||
<html:div style="display: grid;">
|
||||
<label id="url" crop="end" tabindex="0"
|
||||
<label id="url" is="zotero-text-link" crop="end" tabindex="0"
|
||||
ondragstart="let dt = event.dataTransfer; dt.setData('text/x-moz-url', this.value); dt.setData('text/uri-list', this.value); dt.setData('text/plain', this.value);"/>
|
||||
</html:div>
|
||||
<html:div class="metadata-table">
|
||||
|
@ -334,18 +334,9 @@
|
|||
if (this.displayURL && (isImportedURL || isLinkedURL)) {
|
||||
let urlSpec = this.item.getField('url');
|
||||
urlField.setAttribute('value', urlSpec);
|
||||
urlField.setAttribute('tooltiptext', urlSpec);
|
||||
urlField.setAttribute('hidden', false);
|
||||
if (this.clickableLink) {
|
||||
urlField.onclick = function (event) {
|
||||
if (event.button == 0) {
|
||||
ZoteroPane_Local.loadURI(this.value, event);
|
||||
}
|
||||
};
|
||||
urlField.className = 'zotero-text-link keyboard-clickable';
|
||||
}
|
||||
else {
|
||||
urlField.className = '';
|
||||
urlField.href = urlSpec;
|
||||
if (!this.clickableLink) {
|
||||
urlField.noClick = true;
|
||||
}
|
||||
urlField.hidden = false;
|
||||
}
|
||||
|
|
|
@ -5,20 +5,16 @@
|
|||
constructor() {
|
||||
super();
|
||||
this.addEventListener('click', (event) => {
|
||||
if (event.button == 0) {
|
||||
if (event.button == 0 && !this.noClick) {
|
||||
this.open(event);
|
||||
}
|
||||
}, true);
|
||||
this.addEventListener('keypress', (event) => {
|
||||
if (event.key == 'Enter' || event.key == 'Return') {
|
||||
event.preventDefault();
|
||||
this.click();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.classList.add('zotero-text-link');
|
||||
this.classList.add('keyboard-clickable');
|
||||
this.setAttribute('role', 'link');
|
||||
}
|
||||
|
||||
get href() {
|
||||
|
@ -27,6 +23,15 @@
|
|||
|
||||
set href(href) {
|
||||
this.setAttribute('href', href);
|
||||
this.setAttribute('tooltiptext', href);
|
||||
}
|
||||
|
||||
get noClick() {
|
||||
return this.getAttribute('no-click');
|
||||
}
|
||||
|
||||
set noClick(val) {
|
||||
this.setAttribute('no-click', !!val);
|
||||
}
|
||||
|
||||
open(event) {
|
||||
|
|
|
@ -3247,6 +3247,7 @@ var ItemTree = class ItemTree extends LibraryTree {
|
|||
// Activate text links
|
||||
for (let span of div.getElementsByTagName('span')) {
|
||||
if (span.classList.contains('text-link')) {
|
||||
span.setAttribute('role', 'link');
|
||||
if (span.hasAttribute('data-href')) {
|
||||
span.onclick = function () {
|
||||
doc.defaultView.ZoteroPane.loadURI(this.getAttribute('data-href'));
|
||||
|
|
|
@ -215,6 +215,7 @@ Zotero.ProgressWindow = function(options = {}) {
|
|||
var elem = _progressWindow.document.createXULElement('label');
|
||||
elem.setAttribute('value', part.text);
|
||||
elem.setAttribute('class', 'zotero-text-link');
|
||||
elem.setAttribute('role', 'link');
|
||||
for (var i in part.attributes) {
|
||||
elem.setAttribute(i, part.attributes[i]);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue