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
This commit is contained in:
Nolan Lawson 2018-12-02 21:12:58 -08:00 committed by GitHub
parent ee3dfd8e28
commit e894e031fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 3 deletions

View file

@ -122,7 +122,8 @@
export default { export default {
oncreate () { oncreate () {
let { delegateKey, isStatusInOwnThread, showContent } = this.get() let { delegateKey, isStatusInOwnThread, showContent } = this.get()
if (!isStatusInOwnThread) { let { disableTapOnStatus } = this.store.get()
if (!isStatusInOwnThread && !disableTapOnStatus) {
// the whole <article> is clickable in this case // the whole <article> is clickable in this case
registerClickDelegate(this, delegateKey, (e) => this.onClickOrKeydown(e)) registerClickDelegate(this, delegateKey, (e) => this.onClickOrKeydown(e))
} }
@ -268,4 +269,4 @@
}) })
} }
} }
</script> </script>

View file

@ -32,6 +32,11 @@
bind:checked="$reduceMotion" on:change="onChange(event)"> bind:checked="$reduceMotion" on:change="onChange(event)">
<label for="choice-reduce-motion">Reduce motion in UI animations</label> <label for="choice-reduce-motion">Reduce motion in UI animations</label>
</div> </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"> <div class="setting-group">
<input type="checkbox" id="choice-omit-emoji-in-display-names" <input type="checkbox" id="choice-omit-emoji-in-display-names"
bind:checked="$omitEmojiInDisplayNames" on:change="onChange(event)"> bind:checked="$omitEmojiInDisplayNames" on:change="onChange(event)">
@ -91,4 +96,4 @@
) )
} }
} }
</script> </script>

View file

@ -12,6 +12,7 @@ const persistedState = {
currentRegisteredInstance: undefined, currentRegisteredInstance: undefined,
disableCustomScrollbars: false, disableCustomScrollbars: false,
disableLongAriaLabels: false, disableLongAriaLabels: false,
disableTapOnStatus: false,
instanceNameInSearch: '', instanceNameInSearch: '',
instanceThemes: {}, instanceThemes: {},
loggedInInstances: {}, loggedInInstances: {},

View file

@ -14,6 +14,13 @@ function onEvent (e) {
// we're not interested in any non-click or non-Enter events // we're not interested in any non-click or non-Enter events
return 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') mark('delegate onEvent')
let key let key
let element = target let element = target