remove confirmation for share button (see note)

Windows browsers return Web Share API JS promise immediately -- before/without user making an actual sharing choice – which makes the confirmation potentially misleading/pointless.
CPHDH · Feb 18, 2025 · 461939a · 461939a
1 parent 764cde2
commit 461939a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/curatescape-echo/css/screen.css b/curatescape-echo/css/screen.css
@@ -2075,7 +2075,7 @@ aside#social-actions [data-loading="false"]{
 aside#social-actions .button.social{
   position: relative;
 }
-aside#social-actions .button[data-tooltip]::before{
+aside#social-actions .button[data-confirmation][data-tooltip]::before{
   content: attr(data-confirmation);
   position: absolute;
   z-index: 9;
@@ -2101,7 +2101,7 @@ aside#social-actions .button[data-tooltip]::before{
   transition-duration: 0.5s;
   transition-property: display, opacity;
 }
-aside#social-actions .button[data-tooltip="true"]::before{
+aside#social-actions .button[data-confirmation][data-tooltip="true"]::before{
   opacity: 1;
   display: block;
 }

diff --git a/curatescape-echo/custom.php b/curatescape-echo/custom.php
@@ -2210,7 +2210,7 @@ function rl_find_us($class=null, $max=5)
 function rl_article_actions($title=null, $typeLabel=null, $containerClass='transparent-on-light')
 {
    $actions = array(
-     '<a title="'.__('Share').'" role="button" href="javascript:void(0)" class="button social share-js" data-confirmation="'.__('%s share complete!', $typeLabel).'" data-title="'.$title.'"><span class="default">'.rl_icon("arrow-redo").'</span><span hidden class="confirmation">'.rl_icon("checkmark-circle").'</span>'.__('Share').'</a>',
+     '<a title="'.__('Share').'" role="button" href="javascript:void(0)" class="button social share-js" data-title="'.$title.'">'.rl_icon("arrow-redo").__('Share').'</a>',
 
      '<a title="'.__('Copy Link').'" role="button" href="javascript:void(0)" class="button social copy-js" data-confirmation="'.__('%s link copied!', $typeLabel).'"><span class="default">'.rl_icon("link").'</span><span hidden class="confirmation">'.rl_icon("checkmark-circle").'</span>'.__('Copy Link').'</a>',
 

diff --git a/curatescape-echo/javascripts/global.js b/curatescape-echo/javascripts/global.js
@@ -15,6 +15,7 @@ liveRegion.setAttribute('aria-live','polite');
 body.appendChild(liveRegion);
 // SCREEN READER ANNOUNCE
 const liveRegionAnnounce = (text, region = liveRegion)=>{
+  if(!text) return;
   region.textContent = text;
 }
 // GLOBAL HELPERS
@@ -234,15 +235,23 @@ if (dark_browsercompatible) {
 }
 // VISUAL CONFIRMATION
 const visualConfirmation = (buttonobj, icon, icon_alt, duration = 2000)=>{
-  // momentary icon swap
-  icon.hidden=true;
-  icon_alt.hidden=false;
+  // icon swap
+  if(icon && icon_alt){
+    icon.hidden=true;
+    icon_alt.hidden=false;
+  }
   // display tooltip
-  buttonobj.setAttribute('data-tooltip',true);
+  if(buttonobj.dataset.confirmation){
+    buttonobj.setAttribute('data-tooltip',true);
+  }
   setTimeout(()=>{
-    icon.hidden=false;
-    icon_alt.hidden=true;
-    buttonobj.setAttribute('data-tooltip',false);
+    if(icon && icon_alt){
+      icon.hidden=false;
+      icon_alt.hidden=true;
+    }
+    if(buttonobj.dataset.confirmation){
+      buttonobj.setAttribute('data-tooltip',false);
+    }
     buttonobj.blur();
   }, duration);
 }