forked from cybrespace/pinafore
		
	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
					
				
					 4 changed files with 17 additions and 3 deletions
				
			
		| 
						 | 
				
			
			@ -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))
 | 
			
		||||
      }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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)">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -12,6 +12,7 @@ const persistedState = {
 | 
			
		|||
  currentRegisteredInstance: undefined,
 | 
			
		||||
  disableCustomScrollbars: false,
 | 
			
		||||
  disableLongAriaLabels: false,
 | 
			
		||||
  disableTapOnStatus: false,
 | 
			
		||||
  instanceNameInSearch: '',
 | 
			
		||||
  instanceThemes: {},
 | 
			
		||||
  loggedInInstances: {},
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		
		Reference in a new issue