From e894e031fb49a458e662de5bac18813d75c422d4 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 2 Dec 2018 21:12:58 -0800
Subject: [PATCH] feat(a11y): add option to disable tappable toots (#716)

fixes #163. also fixed the issue where selecting text would cause the toot to be tapped
---
 routes/_components/status/Status.html | 5 +++--
 routes/_pages/settings/general.html   | 7 ++++++-
 routes/_store/store.js                | 1 +
 routes/_utils/delegate.js             | 7 +++++++
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/routes/_components/status/Status.html b/routes/_components/status/Status.html
index cd5e5c3e..848472c6 100644
--- a/routes/_components/status/Status.html
+++ b/routes/_components/status/Status.html
@@ -122,7 +122,8 @@
   export default {
     oncreate () {
       let { delegateKey, isStatusInOwnThread, showContent } = this.get()
-      if (!isStatusInOwnThread) {
+      let { disableTapOnStatus } = this.store.get()
+      if (!isStatusInOwnThread && !disableTapOnStatus) {
         // the whole <article> is clickable in this case
         registerClickDelegate(this, delegateKey, (e) => this.onClickOrKeydown(e))
       }
@@ -268,4 +269,4 @@
       })
     }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/routes/_pages/settings/general.html b/routes/_pages/settings/general.html
index 0aad1469..9b759035 100644
--- a/routes/_pages/settings/general.html
+++ b/routes/_pages/settings/general.html
@@ -32,6 +32,11 @@
              bind:checked="$reduceMotion" on:change="onChange(event)">
       <label for="choice-reduce-motion">Reduce motion in UI animations</label>
     </div>
+    <div class="setting-group">
+      <input type="checkbox" id="choice-disable-tap-on-status"
+             bind:checked="$disableTapOnStatus" on:change="onChange(event)">
+      <label for="choice-disable-tap-on-status">Disable tappable area on entire toot</label>
+    </div>
     <div class="setting-group">
       <input type="checkbox" id="choice-omit-emoji-in-display-names"
              bind:checked="$omitEmojiInDisplayNames" on:change="onChange(event)">
@@ -91,4 +96,4 @@
       )
     }
   }
-</script>
\ No newline at end of file
+</script>
diff --git a/routes/_store/store.js b/routes/_store/store.js
index 7cbb037b..3de63a8a 100644
--- a/routes/_store/store.js
+++ b/routes/_store/store.js
@@ -12,6 +12,7 @@ const persistedState = {
   currentRegisteredInstance: undefined,
   disableCustomScrollbars: false,
   disableLongAriaLabels: false,
+  disableTapOnStatus: false,
   instanceNameInSearch: '',
   instanceThemes: {},
   loggedInInstances: {},
diff --git a/routes/_utils/delegate.js b/routes/_utils/delegate.js
index 10436753..032aa46c 100644
--- a/routes/_utils/delegate.js
+++ b/routes/_utils/delegate.js
@@ -14,6 +14,13 @@ function onEvent (e) {
     // we're not interested in any non-click or non-Enter events
     return
   }
+  if (type === 'click') {
+    let selection = window.getSelection()
+    let selectionStr = selection && selection.toString()
+    if (selectionStr && selection.toString().length && target.contains(selection.anchorNode)) {
+      return // ignore if the user is selecting text inside the clickable area
+    }
+  }
   mark('delegate onEvent')
   let key
   let element = target