transition before-leave js-hook does not manipulate the DOM which will be transitioned #9573
Comments
|
I modified your code a little and the HTML now is: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Dev</title>
<link href="style.css" rel="stylesheet">
<script src="vue.js"></script>
<script src="script.js" defer></script>
</head>
<body>
<div id="app">
<button @click="handleClick">
toggle
</button>
<transition mode="out-in" name="fade" appear @before-leave="onBeforeLeave" @after-enter="role = 'alert'">
<p v-if="isActive" :role="role" id="test">{{ message }}</p>
</transition>
</div>
</body>
</html>The JS is: new Vue({
el: '#app',
data(){
return {
message: 'Hello Vue.js!',
role: null,
isActive: true,
}
},
methods: {
handleClick() {
document.getElementById('test').textContent = 'new message';
this.isActive = !this.isActive;
},
onBeforeLeave() {
this.message = 'new message'; // this does not affect the DOM which will fade out
this.role = 'document'; // this does not affect the DOM which will fade out ---> screenreaders will detect the class-changes and read out the content again :\
}
}
})I added an Actually I am not giving a solution to this situation but trying to figure out what is missed here. I also checked the devtool. I found that I will continue paying attention to this problem. I am not sure if I can work it out later, but I will try. |
|
UPDATE: If I use new Vue({
el: '#app',
data(){
return {
message: 'Hello Vue.js!',
role: null,
isActive: true,
}
},
methods: {
handleClick() {
this.message = 'new message';
this.$nextTick(() => {
this.isActive = !this.isActive;
});
},
onBeforeLeave() {
this.message = 'new message'; // this does not affect the DOM which will fade out
this.role = 'document'; // this does not affect the DOM which will fade out ---> screenreaders will detect the class-changes and read out the content again :\
}
}
}) |
|
This is indeed one of the limitations of current transition, I'm not sure if it's something that can be changed. |
Version
2.6.7
Reproduction link
https://jsfiddle.net/8zcdpkv0/
Steps to reproduce
Please see jsfiddle.
Any changes in the
before-leavehook won't affect the DOM which is transitioned.My actual problem is that I try to transition an element which has
aria-live="polite"orrule="alert", which will be read out by a screenreader.Apparently the change of classes from the transition are noticed by the screenreader and the message will be read out again.
I tried to fix this for accessibility purposes with the
before-leavehook, but that doesn't seem to work correctly.What is expected?
It would either be great if the transitioned DOM will remove all attributes which will cause the screenreader to read it out again, or to allow the javascript hook
"before-leave"to actually change the DOM before the transition happens.What is actually happening?
The old DOM will be transitioned (and the screenreader will read the content again).
The text was updated successfully, but these errors were encountered: