ShouBo/web/src/views/accessibility.vue

<template>
  <header
    v-if="ariaSettings.isCompActive"
    class="accessibility"
  >
    <template
      v-if="ariaSettings.isCursorCrosshair"
    >
      <div
        class="crosshair-h aria-control-target aria-inverse-theme"
        :style="{top: crosshairPosition.y + 'px'}"
      />
      <div
        class="crosshair-v aria-control-target aria-inverse-theme"
        :style="{left: crosshairPosition.x + 'px'}"
      />
    </template>
    <div
      v-if="ariaSettings.isMagnifying"
      class="mignify-area"
    >
      <div class="text-wrapper">
        <p>
          {{ hoverElemDisc + hoverElemContent }}
        </p>
      </div>
      <button
        type="button"
        @click="onClickMagnifier"
      >
        <img
          :src="assetUrls.closeMagnifyArea"
          alt="close magnify area"
        >
      </button>
    </div>

    <menu
      v-show="ariaSettings.menuMode === 'old'"
      class="old-mode-menu"
    >
      <li>
        <button
          type="button"
          @click="onClickReset"
        >
          <img
            :src="assetUrls.reset"
            alt="reset"
          >
          <span>Reset</span>
        </button>
      </li>
      <li>
        <button
          type="button"
          @click="onClickMute"
        >
          <img
            :src="ariaSettings.isMuted ? assetUrls.muteActive : assetUrls.mute"
            alt="mute"
          >
          <span>Mute</span>
        </button>
      </li>
      <li>
        <button
          type="button"
          @click="onClickSpeechRate"
        >
          <img
            :src="(ariaSettings.speechRateLevel === 3) ? assetUrls.speechRate : assetUrls.speechRateActive"
            alt="speech rate"
          >
          <span>speech <br> rate</span>
        </button>
      </li>
      <li>
        <button
          type="button"
          @click="onClickScreenReaderMode"
        >
          <img
            :src="(ariaSettings.readMode === 'point') ? assetUrls.screenReaderMode : assetUrls.screenReaderModeActive"
            alt="screen reader"
          >
          <span>screen <br> reader</span>
        </button>
      </li>
      <li>
        <button
          type="button"
          @click="onClickColorModification"
        >
          <img
            :src="assetUrls.colorTheme"
            alt="color modification"
          >
          <span>color <br> modification</span>
        </button>
      </li>
      <li>
        <button
          type="button"
          @click="onClickZoomIn"
        >
          <img
            :src="assetUrls.zoomIn"
            alt="zoom in"
          >
          <span>zoom in</span>
        </button>
      </li>
      <li>
        <button
          type="button"
          @click="onClickZoomOut"
        >
          <img
            :src="assetUrls.zoomOut"
            alt="zoom out"
          >
          <span>zoom out</span>
        </button>
      </li>
      <li>
        <button
          type="button"
          @click="onClickCursorStyle"
        >
          <img
            :src="assetUrls.cursorStyle"
            alt="cursor style"
          >
          <span>cursor <br> style</span>
        </button>
      </li>
      <li>
        <button
          type="button"
          @click="onClickCrossCursor"
        >
          <img
            :src="assetUrls.crossCursor"
            alt="cross cursor"
          >
          <span>cross <br> cursor</span>
        </button>
      </li>
      <li>
        <button
          type="button"
          @click="onClickMagnifier"
        >
          <img
            :src="assetUrls.magnifier"
            alt="magnifier"
          >
          <span>magnifier</span>
        </button>
      </li>
      <li>
        <button
          type="button"
          @click="onClickHelp"
        >
          <img
            :src="assetUrls.help"
            alt="help"
          >
          <span>help</span>
        </button>
      </li>
      <li>
        <a
          ref="shortcutBtnRef"
          :href="shortcutFileText"
          download="首都博物馆.url"
        >
          <img
            :src="assetUrls.shotcut"
            alt="shotcut"
          >
          <span style="margin-top: 3px;">shortcut</span>
        </a>
      </li>
      <li>
        <button
          type="button"
          @click="onClickScreenReaderAreaEntry"
        >
          <img
            :src="assetUrls.screenReaderAreaEntry"
            alt="screen reading accessibility"
          >
          <span>Screen Reading <br> Accessibility</span>
        </button>
      </li>
      <li>
        <button
          type="button"
          @click="onClickQuit"
        >
          <img
            :src="assetUrls.quit"
            alt="quit"
          >
          <span>quit</span>
        </button>
      </li>
    </menu>

    <menu
      v-show="ariaSettings.menuMode === 'blind'"
      class="blind-mode-menu"
    >
      <div class="blind-mode-title">
        <h5>Intelligent blind guide</h5>
        <div class="splitter-line" />
        <h5>Regional guidelines</h5>
      </div>
      <li
        class="text-button"
      >
        <button
          type="button"
        >
          <div class="button-name">
            Navigation
            <br>
            area (1)
          </div>
          <div class="button-shortcut">
            Alt+1
          </div>
        </button>
      </li>
      <li
        class="text-button"
      >
        <button
          type="button"
        >
          <div class="button-name">
            Window
            <br>
            area (3)
          </div>
          <div class="button-shortcut">
            Alt+2
          </div>
        </button>
      </li>
      <li
        class="text-button"
      >
        <button
          type="button"
        >
          <div class="button-name">
            Interaction
            <br>
            area (1)
          </div>
          <div class="button-shortcut">
            Alt+3
          </div>
        </button>
      </li>
      <li
        class="image-button"
      >
        <button
          type="button"
          @click="onClickMute"
        >
          <img
            :src="ariaSettings.isMuted ? assetUrls.muteActive : assetUrls.mute"
            alt="mute"
          >
          <span>Mute</span>
        </button>
      </li>
      <li
        class="image-button"
      >
        <button
          type="button"
          @click="onClickHelp"
        >
          <img
            :src="assetUrls.help"
            alt="help"
          >
          <span>Help</span>
        </button>
      </li>
      <li
        class="image-button"
      >
        <button
          type="button"
          @click="onClickMagnifier"
        >
          <img
            :src="assetUrls.magnifier"
            alt="magnifier"
          >
          <span>Magnifier</span>
        </button>
      </li>
      <li
        class="image-button"
      >
        <button
          type="button"
          @click="onClickElderlyServicesAreaEntry"
        >
          <img
            :src="assetUrls.elderlyServicesAreaEntry"
            alt="elderly services"
          >
          <span>Elderly services</span>
        </button>
      </li>
      <li
        class="image-button"
      >
        <button
          type="button"
          @click="onClickQuit"
        >
          <img
            :src="assetUrls.quit"
            alt="quit"
          >
          <span>Quit</span>
        </button>
      </li>
    </menu>
  </header>
</template>

<script>
import utils from "/src/utils.js"
import bigCursor from '/src/assets/images/accessibility/big-cursor.cur'
import "/src/assets/css/ariaGlobalStyle.less"
import assetUrls from '/src/assets/images/accessibility/index.js'

const speechRateFactors = [
  0.75,
  1,
  1.25,
]

const themeList = [
  'default',
  'white',
  'blue',
  'yellow',
  'black',
]

const zoomFactors = [
  1,
  1.1,
  1.2,
  1.3,
  1.4,
  1.5,
  1.6,
  1.7,
  1.8,
  1.9,
  2,
]

const defaultAriaSettings = {
  isCompActive: false, //是否显示无障碍功能菜单
  menuMode: 'old', // 'old', 'blind'
  isMuted: false,
  speechRateLevel: 1,
  readMode: 'point', // 'point'指读, 'continue'连读
  themeIdx: 0,
  zoomLevel: 0,
  isBigCursor: false,
  isCursorCrosshair: false,
  isMagnifying: false,
}

export default {
  data() {
    return {
      assetUrls,
      ariaSettings: defaultAriaSettings,
      crosshairPosition: {
        x: -100,
        y: -100,
      },

      hoverElemDisc: '',
      hoverElemContent: '',

      continueReadTimeoutId: null,
      continueReadTaskId: null,
      continueReadIteratorStoper: null,

      shortcutFileText: 'data:text/plain;charset=utf-8,' + encodeURIComponent(`
        [{000214A0-0000-0000-C000-000000000046}]
        Prop3=19,2
        [InternetShortcut]
        IDList=
        URL=${this.$homePageUrl}
      `),

      audioPlayer: null,
    }
  },
  watch: {
    ariaSettings: {
      handler(v) {
        let storedSettings = localStorage.getItem('ariaSettings')
        if (storedSettings) {
          storedSettings = JSON.parse(storedSettings)
          if (utils.isSameObject(storedSettings, v)) {
            return
          }
        }
        localStorage.setItem('ariaSettings', JSON.stringify(v))
      },
      deep: true
    },
    'ariaSettings.isCompActive': {
      handler(v) {
        if (v) {
          document.body.classList.add('aria-active')
          document.documentElement.classList.add('aria-active')
          this.$emit('show')
        } else {
          this.onClickReset()
          for (const iterator of document.body.classList) {
            if (iterator === 'aria-active') {
              document.body.classList.remove(iterator)
            }
          }
          for (const iterator of document.documentElement.classList) {
            if (iterator === 'aria-active') {
              document.documentElement.classList.remove(iterator)
            }
          }
          this.$emit('hide')
        }
      },
      immediate: true,
    },
    'ariaSettings.readMode': {
      handler(v) {
        if (v === 'point') {
          document.removeEventListener('mouseover', this.onMouseOverForContinueRead, {
            passive: true,
          })
          document.addEventListener('mouseover', this.onMouseOverForPointRead, {
            passive: true,
          })
        } else if (v === 'continue') {
          document.removeEventListener('mouseover', this.onMouseOverForPointRead, {
            passive: true,
          })
          document.addEventListener('mouseover', this.onMouseOverForContinueRead, {
            passive: true,
          })
        }
      },
      immediate: true
    },
    'ariaSettings.themeIdx': {
      handler() {
        this.addThemeClassToNode()
      },
      immediate: true,
    },
    'ariaSettings.zoomLevel': {
      handler() {
        this.zoomPage()
      },
      immediate: true,
    },
    'ariaSettings.isBigCursor': {
      handler(v) {
        if (v) {
          const styleNode = document.createElement("style")
          styleNode.type = 'text/css'
          styleNode.id = 'aria-big-cursor-style-node'
          styleNode.innerHTML = `* {cursor: url(${bigCursor}), auto !important}`
          document.head.appendChild(styleNode)
        } else {
          const toRemove = document.getElementById('aria-big-cursor-style-node')
          if (toRemove) {
            document.head.removeChild(toRemove)
          }
        }
      },
      immediate: true,
    },
    'ariaSettings.isCursorCrosshair': {
      handler(v) {
        if (v) {
          document.addEventListener('mousemove', this.onMouseMoveForCrosshair, {
            passive: true,
          })
          this.$nextTick(() => {
            this.addThemeClassToNode()
          })
        } else {
          document.removeEventListener('mousemove', this.onMouseMoveForCrosshair, {
            passive: true,
          })
        }
      },
      immediate: true,
    },
    'ariaSettings.isMagnifying': {
      handler(v) {
        if (v) {
          document.body.classList.add('aria-magnifying')
        } else {
          for (const iterator of document.body.classList) {
            if (iterator === 'aria-magnifying') {
              document.body.classList.remove(iterator)
            }
          }
        }
      },
      immediate: true,
    },
  },
  created() {
    this.loadStoredSettings()
    // 在同一个域的多个页面间做同步
    window.addEventListener('storage', this.loadStoredSettings, {
      passive: true,
    })
    document.addEventListener('keydown', this.keyEventHandler, {
      passive: true,
    })
    document.addEventListener('focusin', this.onFocusIn, {
      passive: true,
    })

    this.$eventBus.$on('request-read', (text) => {
      console.log('无障碍组件收到request-read消息：', text);
      this.planToPlayAudio('', text)
    })
    
  },
  destroyed() {
    window.removeEventListener('storage', this.loadStoredSettings, {
      passive: true,
    }),
    document.removeEventListener('keydown', this.keyEventHandler, {
      passive: true,
    })
    document.removeEventListener('focusin', this.onFocusIn, {
      passive: true,
    })
    document.removeEventListener('mouseover', this.onMouseOverForContinueRead, {
      passive: true,
    })
    document.removeEventListener('mouseover', this.onMouseOverForPointRead, {
      passive: true,
    })
  },
  methods: {
    planToPlayAudio: utils.debounce(function(taskId, text = '') {
      let XHR = new XMLHttpRequest()
      const that = this
      XHR.onreadystatechange = function() {
        if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
          const res = JSON.parse(this.response)
          if (that.audioPlayer && !that.audioPlayer.ended) {
            that.audioPlayer.pause()
          }
          that.audioPlayer = new Audio('http://192.168.0.245:8008' + res.msg)
          that.audioPlayer.muted = that.ariaSettings.isMuted
          that.audioPlayer.playbackRate = speechRateFactors[that.ariaSettings.speechRateLevel]
          that.audioPlayer.oncanplaythrough = () => {
            that.audioPlayer.play()
          }
          that.audioPlayer.onended = () => {
            that.$emit('audio-end', taskId)
          }
          that.audioPlayer.onerror = (e) => {
            console.error('audio error!', e)
            that.$emit('audio-error', taskId)
          }
          that.audioPlayer.onabort = () => {
            that.$emit('audio-abort', taskId)
          }
        }
      }
      XHR.open("POST", "http://192.168.0.245:8008/api/tts/toMp3")
      XHR.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
      XHR.send(JSON.stringify({
        content: text || this.hoverElemDisc + this.hoverElemContent
      }))
    }, 500),
    keyEventHandler(e) {
      if (e.repeat) {
        return
      }
      if (e.key === "?" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickHelp()
        }
      } else if (e.key === "Q" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickQuit()
        }
      } else if (e.key === "!" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickReset()
        }
      } else if (e.key === "@" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickMute()
        }
      } else if (e.key === "#" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickSpeechRate()
        }
      } else if (e.key === "$" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickScreenReaderMode()
        }
      } else if (e.key === "%" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickColorModification()
        }
      } else if (e.key === "^" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickZoomIn()
        }
      } else if (e.key === "&" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickZoomOut()
        }
      } else if (e.key === "*" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickCursorStyle()
        }
      } else if (e.key === "(" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickCrossCursor()
        }
      } else if (e.key === ")" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          if (this.ariaSettings.menuMode === 'old') {
            this.onClickScreenReaderAreaEntry()
          } else if (this.ariaSettings.menuMode === 'blind') {
            this.onClickElderlyServicesAreaEntry()
          }
        }
      } else if (e.key === "D" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.$refs['shortcutBtnRef'].click()
        }
      } else if (e.key === "N" && !e.altKey && !e.ctrlKey && e.shiftKey) {
        if (this.ariaSettings.isCompActive) {
          this.onClickMagnifier()
        }
      } else if (e.key === "1" && e.altKey && !e.ctrlKey && !e.shiftKey) {
        const navigationArea = document.getElementById('navigation-area')
        if (navigationArea) {
          navigationArea.focus()
        }
      } else if (e.key === "2" && e.altKey && !e.ctrlKey && !e.shiftKey) {
        const viewportArea = document.getElementById('viewport-area')
        if (viewportArea) {
          viewportArea.focus()
        }
      } else if (e.key === "3" && e.altKey && !e.ctrlKey && !e.shiftKey) {
        const interactiveArea = document.getElementById('interactive-area')
        if (interactiveArea) {
          interactiveArea.focus()
        }
      }
    },
    loadStoredSettings() {
      const settings = localStorage.getItem('ariaSettings')
      if (settings) {
        this.ariaSettings = JSON.parse(settings)
      }
    },
    zoomPage() {
      let styleNode = document.getElementById('aria-zoom-style-node')
      if (!styleNode) {
        styleNode = document.createElement("style")
        styleNode.type = 'text/css'
        styleNode.id = 'aria-zoom-style-node'
        document.head.appendChild(styleNode)
      }
      styleNode.innerHTML = `
        .aria-control-target {
          transform: scale(${zoomFactors[this.ariaSettings.zoomLevel]});
          transform-origin: top left;
        }
        .aria-no-zoom {
          transform: scale(${1 / zoomFactors[this.ariaSettings.zoomLevel]});
          transform-origin: top left;
        }
      `
    },
    addThemeClassToNode() {
      this.$nextTick(() => {
        const controlTargetNodeList = [...document.getElementsByClassName('aria-control-target')]
        for (const node of controlTargetNodeList) {
          for (const iterator of node.classList) {
            if (iterator.indexOf('aria-theme-') > -1) {
              node.classList.remove(iterator)
            }
          }
          node.classList.add(`aria-theme-${themeList[this.ariaSettings.themeIdx]}`)
        }
      })
    },
    onMouseMoveForCrosshair(e) {
      this.crosshairPosition.x = e.clientX
      this.crosshairPosition.y = e.clientY
    },
    onMouseOverForPointRead(e) {
      if (!this.ariaSettings.isCompActive) {
        return
      }
      const extractedText = utils.extractTextForMagnify(e)
      if (extractedText) {
        this.hoverElemDisc = extractedText.elemDisc
        this.hoverElemContent = extractedText.elemContent

        this.planToPlayAudio()
      }
    },
    onMouseOverForContinueRead(e) {
      if (!this.ariaSettings.isCompActive) {
        return
      }
      const extractedText = utils.extractTextForMagnify(e)
      if (extractedText) {
        this.hoverElemDisc = extractedText.elemDisc
        this.hoverElemContent = extractedText.elemContent
        clearTimeout(this.continueReadTimeoutId)
        this.continueReadTimeoutId = setTimeout(() => {
          this.continueReadIteratorStoper && this.continueReadIteratorStoper()
          if (this.ariaSettings.readMode !== 'continue') {
            return
          }
          const continueReadTaskId = (new Date).getTime()
          this.continueReadTaskId = continueReadTaskId
          utils.iterateOnFocusableNode(e.path[0], (node) => {
            return new Promise((resolve, reject) => {
              this.continueReadIteratorStoper = reject
              this.$once('audio-end', (taskId) => {
                if (taskId === continueReadTaskId) {
                  resolve()
                }
              })
              this.$once('audio-error', (taskId) => {
                if (taskId === continueReadTaskId) {
                  resolve()
                }
              })
              this.$once('audio-abort', (taskId) => {
                if (taskId === continueReadTaskId) {
                  resolve()
                }
              })
            })
          })
        }, 1000)
      }
    },
    onFocusIn(e) {
      if (!this.ariaSettings.isCompActive) {
        return
      }
      const extractedText = utils.extractTextForMagnify(e)
      if (extractedText) {
        this.hoverElemDisc = extractedText.elemDisc
        this.hoverElemContent = extractedText.elemContent
        this.planToPlayAudio(this.continueReadTaskId)
      }
    },

    onClickReset() {
      const copy = { ...defaultAriaSettings }
      copy.isCompActive = this.ariaSettings.isCompActive
      this.ariaSettings = copy
    },
    onClickMute() {
      this.ariaSettings.isMuted = !this.ariaSettings.isMuted
      if (this.audioPlayer) {
        this.audioPlayer.muted = this.ariaSettings.isMuted
      }
    },
    onClickSpeechRate() {
      this.ariaSettings.speechRateLevel++
      if (this.ariaSettings.speechRateLevel === speechRateFactors.length) {
        this.ariaSettings.speechRateLevel = 0
      }
      if (this.audioPlayer) {
        this.audioPlayer.playbackRate = speechRateFactors[this.ariaSettings.speechRateLevel]
      }
    },
    onClickScreenReaderMode() {
      if (this.ariaSettings.readMode === 'point') {
        this.ariaSettings.readMode = 'continue'
      } else if (this.ariaSettings.readMode === 'continue') {
        this.ariaSettings.readMode = 'point'
      }
    },
    onClickColorModification() {
      this.ariaSettings.themeIdx++
      if (this.ariaSettings.themeIdx === themeList.length) {
        this.ariaSettings.themeIdx = 0
      }
    },
    onClickZoomIn() {
      if (this.ariaSettings.zoomLevel === zoomFactors.length - 1) {
        return
      }
      this.ariaSettings.zoomLevel++
    },
    onClickZoomOut() {
      if (this.ariaSettings.zoomLevel === 0) {
        return
      }
      this.ariaSettings.zoomLevel--
    },
    onClickCursorStyle() {
      this.ariaSettings.isBigCursor = !this.ariaSettings.isBigCursor
    },
    onClickCrossCursor() {
      this.ariaSettings.isCursorCrosshair = !this.ariaSettings.isCursorCrosshair
    },
    onClickMagnifier() {
      this.ariaSettings.isMagnifying = !this.ariaSettings.isMagnifying
    },
    onClickHelp() {
      window.open('../help')
    },
    onClickElderlyServicesAreaEntry() {
      this.ariaSettings.menuMode = 'old'
    },
    onClickScreenReaderAreaEntry() {
      this.ariaSettings.menuMode = 'blind'
    },
    onClickQuit() {
      this.ariaSettings.isCompActive = false
    },

    // 供外界调用
    requestToShowMenu() {
      !this.ariaSettings.isCompActive && (this.ariaSettings.isCompActive = true)
    },
    requestToHideMenu() {
      this.ariaSettings.isCompActive && (this.ariaSettings.isCompActive = false)
    },
    requestToSwitchMenuShowHide() {
      this.ariaSettings.isCompActive = !this.ariaSettings.isCompActive
    },
  }
}
</script>

<style lang="less" scoped>
@import '/src/assets/css/common.less';

li {
  list-style: none;
}
button {
  border: none;
  background: transparent;
  padding: 0;
  &:focus {
    outline: 3px solid red;
  }
}
a {
  color: inherit;
  text-decoration: none;
  &:focus {
    outline: 3px solid red;
  }
}

.accessibility {
  color: #fff;
  font-size: 16px;
  font-family: SourceHanSansCN-Bold-GBpc-EUC-H;
  line-height: 19px;
  background-color: #36584C;
  height: @accessibility-menu-height;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  .crosshair-h {
    position: fixed;
    width: 100%;
    height: 3px;
    background: blue;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;
  }
  .crosshair-v {
    position: fixed;
    height: 100vh;
    width: 3px;
    background: blue;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 10;
  }
  .mignify-area {
    position: fixed;
    height: @magnify-area-height;
    width: 100%;
    bottom: 0;
    background: #fff;
    z-index: 1;
    display: flex;
    .text-wrapper {
      height: @magnify-area-height;
      line-height: @magnify-area-height;
      width: 1px;
      flex: 1 0 auto;
      overflow: auto;
      text-align: center;
      p {
        vertical-align: middle;
        display: inline-block;
        color: #000;
        font-size: 72px;
        font-family: Source Han Sans CN;
        font-weight: 800;
        line-height: 86px;
      }
    }
    button {
      width: 199px;
      height: 100%;
      flex: 0 0 auto;
    }
  }

  .old-mode-menu {
    display: flex;
    justify-content: center;
    height: 100%;
    li {
      button, a {
        box-sizing: border-box;
        color: white;
        height: 100%;
        padding-top: 10px;
        width: @accessibility-menu-height;
        display: flex;
        flex-direction: column;
        align-items: center;
        &:hover {
          background-color: #4D2128;
        }
        img {
          width: 50px;
          height: 50px;
        }
        span {
          display: block;
          margin-top: 5px;
        }
      }
    }
  }
  .blind-mode-menu {
    display: flex;
    justify-content: center;
    height: 100%;
    .blind-mode-title {
      width: 231px;
      height: 80px;
      background: #753641;
      border-radius: 20px;
      border: 2px solid rgb(136, 67, 79);
      text-align: center;
      margin-top: 12px;
      margin-right: 30px;
      h5 {
        font-size: 18px;
        line-height: 36px;
      }
      .splitter-line {
        width: 208px;
        height: 0px;
        border: 1px solid rgb(136, 67, 79);
        margin: 0 auto;
      }
    }
    li.text-button:nth-of-type(3) {
      margin-right: 100px;
    }
    li.text-button {
      button {
        width: 125px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
        &:hover {
          background-color: #4D2128;
        }
        .button-name {
          font-size: 14px;
          line-height: 21px;
          margin-bottom: 6px;
        }
        .button-shortcut {
          font-size: 16px;
        }
      }
    }
    li.image-button {
      button {
        color: white;
        height: 100%;
        padding-top: 10px;
        width: @accessibility-menu-height;
        display: flex;
        flex-direction: column;
        align-items: center;
        &:hover {
          background-color: #4D2128;
        }
        img {
          width: 50px;
          height: 50px;
        }
        span {
          display: block;
          margin-top: 5px;
        }
      }
    }
  }
}
</style>