From dc2f1d6bd3a2f300065d2c73ea3bea36fb4cfbde Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Mon, 3 Jun 2019 08:30:24 -0400
Subject: [PATCH 1/2] Add global Javascript Element.matches polyfill

---
 view/js/main.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/view/js/main.js b/view/js/main.js
index cd09de014..a2e2698a8 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -1,4 +1,21 @@
 // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#Polyfill
+if (!Element.prototype.matches) {
+	Element.prototype.matches =
+		Element.prototype.matchesSelector ||
+		Element.prototype.mozMatchesSelector ||
+		Element.prototype.msMatchesSelector ||
+		Element.prototype.oMatchesSelector ||
+		Element.prototype.webkitMatchesSelector ||
+		function(s) {
+			var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+				i = matches.length;
+			while (--i >= 0 && matches.item(i) !== this) {}
+			return i > -1;
+		};
+}
+
 function resizeIframe(obj) {
 	_resizeIframe(obj, 0);
 }

From 9ac7d20df3916acf9f9d0042180601d51fe59857 Mon Sep 17 00:00:00 2001
From: Hypolite Petovan <hypolite@mrpetovan.com>
Date: Mon, 3 Jun 2019 08:31:43 -0400
Subject: [PATCH 2/2] [frio] Add .add-to-modal delegated event on anchors

- Improve hovercard button accessibility
---
 view/templates/hovercard.tpl |  4 ++--
 view/theme/frio/js/modal.js  | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/view/templates/hovercard.tpl b/view/templates/hovercard.tpl
index a688f57b2..017e096af 100644
--- a/view/templates/hovercard.tpl
+++ b/view/templates/hovercard.tpl
@@ -21,8 +21,8 @@
 				{{* here are the differnt actions like privat message, poke, delete and so on *}}
 				{{* @todo we have two different photo menus one for contacts and one for items at the network stream. We currently use the contact photo menu, so the items options are missing We need to move them *}}
 				<div class="hover-card-actions-social">
-					{{if $profile.actions.pm}}<a class="btn btn-labeled btn-primary btn-sm" onclick="addToModal('{{$profile.actions.pm.1}}')" aria-label="{{$profile.actions.pm.0}}" title="{{$profile.actions.pm.0}}"><i class="fa fa-envelope" aria-hidden="true"></i></a>{{/if}}
-					{{if $profile.actions.poke}}<a class="btn btn-labeled btn-primary btn-sm" onclick="addToModal('{{$profile.actions.poke.1}}')" aria-label="{{$profile.actions.poke.0}}" title="{{$profile.actions.poke.0}}"><i class="fa fa-heartbeat" aria-hidden="true"></i></a>{{/if}}
+					{{if $profile.actions.pm}}<a class="btn btn-labeled btn-primary btn-sm add-to-modal" href="{{$profile.actions.pm.1}}" aria-label="{{$profile.actions.pm.0}}"><i class="fa fa-envelope" aria-hidden="true" title="{{$profile.actions.pm.0}}"></i><span class="sr-only">{{$profile.actions.pm.0}}</span></a>{{/if}}
+					{{if $profile.actions.poke}}<a class="btn btn-labeled btn-primary btn-sm add-to-modal" href="{{$profile.actions.poke.1}}" aria-label="{{$profile.actions.poke.0}}"><i class="fa fa-heartbeat" aria-hidden="true" title="{{$profile.actions.poke.0}}"></i><span class="sr-only">{{$profile.actions.poke.0}}</span></a>{{/if}}
 				</div>
 				<div class="hover-card-actions-connection">
 					{{if $profile.actions.network}}<a class="btn btn-labeled btn-primary btn-sm" href="{{$profile.actions.network.1}}" aria-label="{{$profile.actions.network.0}}" title="{{$profile.actions.network.0}}"><i class="fa fa-cloud" aria-hidden="true"></i></a>{{/if}}
diff --git a/view/theme/frio/js/modal.js b/view/theme/frio/js/modal.js
index ab263bc2a..9bca42777 100644
--- a/view/theme/frio/js/modal.js
+++ b/view/theme/frio/js/modal.js
@@ -93,6 +93,21 @@ $(document).ready(function(){
 		input.val(img);
 		
 	});
+
+	// Generic delegated event to open an anchor URL in a modal.
+	// Used in the hovercard.
+	document.getElementsByTagName('body')[0].addEventListener('click', function(e) {
+		var target = e.target;
+		while (target) {
+			if (target.matches && target.matches('a.add-to-modal')) {
+				addToModal(target.href);
+				e.preventDefault();
+				return false;
+			}
+
+			target = target.parentNode || null;
+		}
+	});
 });
 
 // Overwrite Dialog.show from main js to load the filebrowser into a bs modal.