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

chrome/content/zotero/about.xhtml

@@ -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'));
 						};

chrome/content/zotero/elements/attachmentBox.js

@@ -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;
 			}

chrome/content/zotero/elements/textLink.js

@@ -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) {

chrome/content/zotero/itemTree.jsx

@@ -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'));

chrome/content/zotero/xpcom/progressWindow.js

@@ -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]);
 				}