diff --git a/resources/vue/components/courseware/layouts/CoursewareCompanionOverlay.vue b/resources/vue/components/courseware/layouts/CoursewareCompanionOverlay.vue index 47bd5e2dfa351f5a7dbf0a7be8fd142a8e08e715..ff177f7e177d2c8961eca3113a28d6066864ffd9 100644 --- a/resources/vue/components/courseware/layouts/CoursewareCompanionOverlay.vue +++ b/resources/vue/components/courseware/layouts/CoursewareCompanionOverlay.vue @@ -1,11 +1,20 @@ <template> - <div - class="cw-companion-overlay" - :class="[showCompanion ? 'cw-companion-overlay-in' : '', showCompanion ? '' : 'cw-companion-overlay-out', styleCompanion]" - :aria-hidden="!showCompanion" - > - <div class="cw-companion-overlay-content" v-html="msgCompanion"></div> - <button class="cw-compantion-overlay-close" @click="hideCompanion"></button> + <div class="cw-companion-overlay-wrapper"> + <div + class="cw-companion-overlay" + :class="[showCompanion ? 'cw-companion-overlay-in' : '', showCompanion ? '' : 'cw-companion-overlay-out', styleCompanion]" + aria-hidden="true" + > + <div class="cw-companion-overlay-content" v-html="msgCompanion"></div> + <button class="cw-compantion-overlay-close" @click="hideCompanion"></button> + </div> + <div + class="sr-only" + aria-live="polite" + role="log" + > + <p>{{ msgCompanion }}</p> + </div> </div> </template>