fix: Hall of Chaos quality fixes -- timer cleanup, aria-live, reduced-motion
- onUnmounted clears blooperHoldTimer to prevent stale callback after component teardown - HallOfChaosView loading state gains aria-live="polite" so state transitions are announced to screen readers - CommunityFeedPanel reduced-motion block resets toast translateY offset to avoid flash-of-offset-position on slow paint cycles
This commit is contained in:
parent
9246935fd7
commit
d7bfc083e7
2 changed files with 14 additions and 2 deletions
|
|
@ -116,7 +116,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted, onUnmounted } from 'vue'
|
||||||
import { useCommunityStore } from '../stores/community'
|
import { useCommunityStore } from '../stores/community'
|
||||||
import CommunityPostCard from './CommunityPostCard.vue'
|
import CommunityPostCard from './CommunityPostCard.vue'
|
||||||
import PublishPlanModal from './PublishPlanModal.vue'
|
import PublishPlanModal from './PublishPlanModal.vue'
|
||||||
|
|
@ -217,6 +217,13 @@ onMounted(async () => {
|
||||||
await store.fetchPosts()
|
await store.fetchPosts()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (blooperHoldTimer !== null) {
|
||||||
|
clearTimeout(blooperHoldTimer)
|
||||||
|
blooperHoldTimer = null
|
||||||
|
}
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
@ -320,5 +327,10 @@ onMounted(async () => {
|
||||||
.toast-fade-leave-active {
|
.toast-fade-leave-active {
|
||||||
transition: none;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toast-fade-enter-from,
|
||||||
|
.toast-fade-leave-to {
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Loading -->
|
<!-- Loading -->
|
||||||
<div v-if="loading" class="chaos-loading text-center text-secondary" aria-busy="true">
|
<div v-if="loading" class="chaos-loading text-center text-secondary" aria-live="polite" aria-busy="true">
|
||||||
Assembling the chaos...
|
Assembling the chaos...
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue