|
|
@@ -28,7 +28,7 @@
|
|
|
tabindex="0"
|
|
|
aria-description="Close"
|
|
|
type="button"
|
|
|
- @click="onClickMagnifier"
|
|
|
+ @click="ariaSettings.isMagnifying = !ariaSettings.isMagnifying"
|
|
|
>
|
|
|
<img
|
|
|
:src="assetUrls.closeMagnifyArea"
|
|
|
@@ -58,7 +58,7 @@
|
|
|
<li>
|
|
|
<button
|
|
|
tabindex="0"
|
|
|
- aria-description="Mute"
|
|
|
+ aria-description="Sound"
|
|
|
type="button"
|
|
|
@click="onClickMute"
|
|
|
>
|
|
|
@@ -100,7 +100,7 @@
|
|
|
<li>
|
|
|
<button
|
|
|
tabindex="0"
|
|
|
- aria-description="Coor Modification"
|
|
|
+ aria-description="Color Modification"
|
|
|
type="button"
|
|
|
@click="onClickColorModification"
|
|
|
>
|
|
|
@@ -203,6 +203,7 @@
|
|
|
ref="shortcutBtnRef"
|
|
|
:href="shortcutFileText"
|
|
|
download="CapitalMuseum.url"
|
|
|
+ @click="onClickDownloadShortcut"
|
|
|
>
|
|
|
<img
|
|
|
:src="assetUrls.shotcut"
|
|
|
@@ -213,6 +214,7 @@
|
|
|
</li>
|
|
|
<li>
|
|
|
<button
|
|
|
+ class="special-color"
|
|
|
tabindex="0"
|
|
|
aria-description="Screen Reading Accessibility"
|
|
|
type="button"
|
|
|
@@ -255,7 +257,7 @@
|
|
|
>
|
|
|
<button
|
|
|
tabindex="0"
|
|
|
- aria-description="Navigation area"
|
|
|
+ aria-description="Navigation area. Please use the shortcut key to select the area."
|
|
|
@mousedown="onMouseDownNavigationArea"
|
|
|
@click="onClickNavigationArea"
|
|
|
type="button"
|
|
|
@@ -275,7 +277,7 @@
|
|
|
>
|
|
|
<button
|
|
|
tabindex="0"
|
|
|
- aria-description="Window area"
|
|
|
+ aria-description="Window area. Please use the shortcut key to select the area."
|
|
|
@mousedown="onMouseDownWindowArea"
|
|
|
@click="onClickWindowArea"
|
|
|
type="button"
|
|
|
@@ -295,7 +297,7 @@
|
|
|
>
|
|
|
<button
|
|
|
tabindex="0"
|
|
|
- aria-description="Interaction area"
|
|
|
+ aria-description="Interaction area. Please use the shortcut key to select the area."
|
|
|
@mousedown="onMouseDownInteractionArea"
|
|
|
@click="onClickInteractionArea"
|
|
|
type="button"
|
|
|
@@ -362,6 +364,7 @@
|
|
|
class="image-button"
|
|
|
>
|
|
|
<button
|
|
|
+ class="special-color"
|
|
|
tabindex="0"
|
|
|
aria-description="Elerly services"
|
|
|
type="button"
|
|
|
@@ -399,6 +402,7 @@ 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 config = require('/src/config.js')
|
|
|
|
|
|
const speechRateFactors = [
|
|
|
0.75,
|
|
|
@@ -471,6 +475,9 @@ export default {
|
|
|
navigationAreaNum: null,
|
|
|
viewportAreaNum: null,
|
|
|
interactionAreaNum: null,
|
|
|
+
|
|
|
+ focusedNode: null,
|
|
|
+ focudedNodeTimeoutId: null,
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -505,7 +512,7 @@ export default {
|
|
|
this.$emit('show')
|
|
|
this.$eventBus.$emit('aria-show')
|
|
|
} else {
|
|
|
- this.onClickReset()
|
|
|
+ this.reset()
|
|
|
for (const iterator of document.body.classList) {
|
|
|
if (iterator === 'aria-active') {
|
|
|
document.body.classList.remove(iterator)
|
|
|
@@ -525,6 +532,7 @@ export default {
|
|
|
'ariaSettings.readMode': {
|
|
|
handler(v) {
|
|
|
if (v === 'point') {
|
|
|
+ this.continueReadTaskId = null
|
|
|
document.removeEventListener('mouseover', this.onMouseOverForContinueRead, {
|
|
|
passive: true,
|
|
|
})
|
|
|
@@ -646,6 +654,8 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
destroyed() {
|
|
|
window.removeEventListener('storage', this.loadStoredSettings, {
|
|
|
passive: true,
|
|
|
@@ -767,11 +777,11 @@ export default {
|
|
|
this.onClickMagnifier()
|
|
|
}
|
|
|
} else if (e.key === "1" && e.altKey && !e.ctrlKey && !e.shiftKey) {
|
|
|
- utils.getAndFocusNextNodeWithCustomAttribute('ariaNavigationArea')
|
|
|
+ this.onClickNavigationArea()
|
|
|
} else if (e.key === "2" && e.altKey && !e.ctrlKey && !e.shiftKey) {
|
|
|
- utils.getAndFocusNextNodeWithCustomAttribute('ariaViewportArea')
|
|
|
+ this.onClickWindowArea()
|
|
|
} else if (e.key === "3" && e.altKey && !e.ctrlKey && !e.shiftKey) {
|
|
|
- utils.getAndFocusNextNodeWithCustomAttribute('ariaInteractionArea')
|
|
|
+ this.onClickInteractionArea()
|
|
|
}
|
|
|
},
|
|
|
loadStoredSettings() {
|
|
|
@@ -829,7 +839,12 @@ export default {
|
|
|
this.elemType = extractedText.elemType
|
|
|
this.elemDisc = extractedText.elemDisc
|
|
|
|
|
|
- this.planToPlayAudio()
|
|
|
+ if (extractedText.ariaNode === this.focusedNode) {
|
|
|
+ console.log('已经由于（可能是点击导致的）focus而朗读了，不用再因为hover而朗读了');
|
|
|
+ return
|
|
|
+ } else {
|
|
|
+ this.planToPlayAudio()
|
|
|
+ }
|
|
|
}
|
|
|
}, 500),
|
|
|
onMouseOverForContinueRead(e) {
|
|
|
@@ -879,17 +894,33 @@ export default {
|
|
|
if (extractedText) {
|
|
|
this.elemType = extractedText.elemType
|
|
|
this.elemDisc = extractedText.elemDisc
|
|
|
+
|
|
|
+ this.focusedNode = extractedText.ariaNode
|
|
|
+ clearTimeout(this.focusedNodeTimeoutId)
|
|
|
+ this.focusedNodeTimeoutId = setTimeout(() => {
|
|
|
+ this.focusedNode = null
|
|
|
+ this.focudedNodeTimeoutId = null
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
this.planToPlayAudio(this.continueReadTaskId)
|
|
|
}
|
|
|
},
|
|
|
-
|
|
|
- onClickReset() {
|
|
|
+ reset() {
|
|
|
const copy = { ...defaultAriaSettings }
|
|
|
copy.isCompActive = this.ariaSettings.isCompActive
|
|
|
this.ariaSettings = copy
|
|
|
},
|
|
|
+ onClickReset() {
|
|
|
+ this.planToPlayAudio('', "You've reset the feature settings")
|
|
|
+ this.reset()
|
|
|
+ },
|
|
|
onClickMute() {
|
|
|
this.ariaSettings.isMuted = !this.ariaSettings.isMuted
|
|
|
+ if (this.ariaSettings.isMuted) {
|
|
|
+ // this.planToPlayAudio('', 'Sound off')
|
|
|
+ } else {
|
|
|
+ this.planToPlayAudio('', 'Sound on')
|
|
|
+ }
|
|
|
if (this.audioPlayer) {
|
|
|
this.audioPlayer.muted = this.ariaSettings.isMuted
|
|
|
}
|
|
|
@@ -899,14 +930,23 @@ export default {
|
|
|
if (this.ariaSettings.speechRateLevel === speechRateFactors.length) {
|
|
|
this.ariaSettings.speechRateLevel = 0
|
|
|
}
|
|
|
+ if (this.ariaSettings.speechRateLevel === 0) {
|
|
|
+ this.planToPlayAudio('', 'Speak slowly')
|
|
|
+ } else if (this.ariaSettings.speechRateLevel === 1) {
|
|
|
+ this.planToPlayAudio('', 'Speak normally')
|
|
|
+ } else if (this.ariaSettings.speechRateLevel === 2) {
|
|
|
+ this.planToPlayAudio('', 'Speak fast')
|
|
|
+ }
|
|
|
if (this.audioPlayer) {
|
|
|
this.audioPlayer.playbackRate = speechRateFactors[this.ariaSettings.speechRateLevel]
|
|
|
}
|
|
|
},
|
|
|
onClickScreenReaderMode() {
|
|
|
if (this.ariaSettings.readMode === 'point') {
|
|
|
+ this.planToPlayAudio('', "You've enabled continuous reading mode.Please move the mouse over on the text you need to read，it'll start reading the screen in 1 second. When reading the link, tap the Enter key to enter the corresponding page.")
|
|
|
this.ariaSettings.readMode = 'continue'
|
|
|
} else if (this.ariaSettings.readMode === 'continue') {
|
|
|
+ this.planToPlayAudio('', "You've enabled read-only mode.Please move the mouse over on the text you need to read，Blind users can operate the keyboard directly.")
|
|
|
this.ariaSettings.readMode = 'point'
|
|
|
}
|
|
|
},
|
|
|
@@ -915,36 +955,69 @@ export default {
|
|
|
if (this.ariaSettings.themeIdx === themeList.length) {
|
|
|
this.ariaSettings.themeIdx = 0
|
|
|
}
|
|
|
+ if (this.ariaSettings.themeIdx === 0) {
|
|
|
+ this.planToPlayAudio('', "Ajust to standard color.")
|
|
|
+ } else if (this.ariaSettings.themeIdx === 1) {
|
|
|
+ this.planToPlayAudio('', "Adjust to black lettering on white background.")
|
|
|
+ } else if (this.ariaSettings.themeIdx === 2) {
|
|
|
+ this.planToPlayAudio('', "Adjust to yellow lettering on blue background.")
|
|
|
+ } else if (this.ariaSettings.themeIdx === 3) {
|
|
|
+ this.planToPlayAudio('', "Adjust to black lettering on yellow background.")
|
|
|
+ } else if (this.ariaSettings.themeIdx === 4) {
|
|
|
+ this.planToPlayAudio('', "Adjust to yellow lettering on black background.")
|
|
|
+ }
|
|
|
},
|
|
|
onClickZoomIn() {
|
|
|
if (this.ariaSettings.zoomLevel === zoomFactors.length - 1) {
|
|
|
return
|
|
|
}
|
|
|
+ this.planToPlayAudio('', "Zooming in on page")
|
|
|
this.ariaSettings.zoomLevel++
|
|
|
},
|
|
|
onClickZoomOut() {
|
|
|
if (this.ariaSettings.zoomLevel === 0) {
|
|
|
return
|
|
|
}
|
|
|
+ this.planToPlayAudio('', "Zooming out on page")
|
|
|
this.ariaSettings.zoomLevel--
|
|
|
},
|
|
|
onClickCursorStyle() {
|
|
|
this.ariaSettings.isBigCursor = !this.ariaSettings.isBigCursor
|
|
|
+ if (this.ariaSettings.isBigCursor) {
|
|
|
+ this.planToPlayAudio('', "You've enabled the large cursor")
|
|
|
+ } else {
|
|
|
+ this.planToPlayAudio('', "You've disabled the large cursor")
|
|
|
+ }
|
|
|
},
|
|
|
onClickCrossCursor() {
|
|
|
this.ariaSettings.isCursorCrosshair = !this.ariaSettings.isCursorCrosshair
|
|
|
+ if (this.ariaSettings.isCursorCrosshair) {
|
|
|
+ this.planToPlayAudio('', "You've enabled the cross cursor")
|
|
|
+ } else {
|
|
|
+ this.planToPlayAudio('', "You've disabled the cross cursor")
|
|
|
+ }
|
|
|
},
|
|
|
onClickMagnifier() {
|
|
|
this.ariaSettings.isMagnifying = !this.ariaSettings.isMagnifying
|
|
|
+ if (this.ariaSettings.isMagnifying) {
|
|
|
+ this.planToPlayAudio('', "You've enabled the magnifier")
|
|
|
+ } else {
|
|
|
+ this.planToPlayAudio('', "You've disabled the magnifier")
|
|
|
+ }
|
|
|
},
|
|
|
onClickHelp() {
|
|
|
- window.open('./help.html')
|
|
|
+ window.open(config.publicPath + 'help.html')
|
|
|
+ },
|
|
|
+ onClickDownloadShortcut() {
|
|
|
+ this.planToPlayAudio('', "You are downloading the shortcut. Double click the shortcut to reach the website.")
|
|
|
},
|
|
|
onClickElderlyServicesAreaEntry() {
|
|
|
this.ariaSettings.menuMode = 'old'
|
|
|
+ this.planToPlayAudio('', "You've switched to the elderly services mode.")
|
|
|
},
|
|
|
onClickScreenReaderAreaEntry() {
|
|
|
this.ariaSettings.menuMode = 'blind'
|
|
|
+ this.planToPlayAudio('', "You've switched to screen the reading accessibility mode.")
|
|
|
},
|
|
|
onMouseDownNavigationArea(e) {
|
|
|
e.preventDefault()
|
|
|
@@ -1083,6 +1156,9 @@ a {
|
|
|
&:hover {
|
|
|
background-color: #4D2128;
|
|
|
}
|
|
|
+ &.special-color {
|
|
|
+ background-color: #701c12;
|
|
|
+ }
|
|
|
img {
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
@@ -1155,6 +1231,9 @@ a {
|
|
|
&:hover {
|
|
|
background-color: #4D2128;
|
|
|
}
|
|
|
+ &.special-color {
|
|
|
+ background-color: #701c12;
|
|
|
+ }
|
|
|
img {
|
|
|
width: 50px;
|
|
|
height: 50px;
|
