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:
parent
ee3dfd8e28
commit
e894e031fb
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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: {},
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue