From 9601a34a6cd556f63d6772710dea948b34e7372a Mon Sep 17 00:00:00 2001
From: Julian Prieber <julian.prieber@llc.ovh>
Date: Wed, 10 May 2023 17:10:53 +0200
Subject: [PATCH] Made share button focusable

For improved accessibility
https://github.com/LinkStackOrg/LinkStack/issues/410
---
 resources/views/littlelink.blade.php | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/resources/views/littlelink.blade.php b/resources/views/littlelink.blade.php
index d244eb1..817825a 100644
--- a/resources/views/littlelink.blade.php
+++ b/resources/views/littlelink.blade.php
@@ -248,12 +248,26 @@ function get_operating_system() {
 
 @if($user_browser === 'Chrome' or get_operating_system() == 'mobile')
 <script>{!! file_get_contents(base_path("assets/linkstack/js/jquery.min.js")) !!}</script>
-<div align="right" class="sharediv"><div><span class="sharebutton button-hover icon-hover" id='share-share-button'><i style="color: black;" class="fa-solid fa-share sharebutton-img share-icon hvr-icon"></i><span class="sharebutton-mb">Share</span></span></div></div>
-<span class="copy-icon" role="button" aria-label="Share this page">
+<div align="right" class="sharediv">
+  <div>
+    <span class="sharebutton button-hover icon-hover" id='share-share-button' tabindex="0" role="button" aria-label="Share this page">
+      <i style="color: black;" class="fa-solid fa-share sharebutton-img share-icon hvr-icon"></i>
+      <span class="sharebutton-mb">Share</span>
+    </span>
+  </div>
+</div>
+<span class="copy-icon" tabindex="0" role="button" aria-label="Copy URL to clipboard">
 </span>
 @else
-<span class="copy-icon" role="button" aria-label="Share this page">
-<div onclick="alert('URL has been copied to your clipboard!')" align="right" class="sharediv"><div><a class="sharebutton button-hover icon-hover"><i style="color: black;" class="fa-solid fa-share sharebutton-img share-icon hvr-icon"></i><span class="sharebutton-mb">Share</span></a></div></div>
+<span class="copy-icon" tabindex="0" role="button" aria-label="Copy URL to clipboard">
+  <div onclick="alert('URL has been copied to your clipboard!')" align="right" class="sharediv">
+    <div>
+      <a class="sharebutton button-hover icon-hover" tabindex="0" role="button" aria-label="Share this page">
+        <i style="color: black;" class="fa-solid fa-share sharebutton-img share-icon hvr-icon"></i>
+        <span class="sharebutton-mb">Share</span>
+      </a>
+    </div>
+  </div>
 </span>
 @endif
 <script>{!! file_get_contents(base_path("assets/linkstack/js/share.button.js")) !!}</script>