From b40f736ca3a3fed5690140124bc663c2bb5b7c53 Mon Sep 17 00:00:00 2001
From: swapnamol-abraham <swapnamol.abraham@nhs.net>
Date: Tue, 13 May 2025 10:55:20 +0100
Subject: [PATCH] TD-5143: issue reading twice with screen reader on contribute
 resource screens

---
 .../Scripts/vuesrc/ckeditorwithhint.vue         | 17 ++++++++++++++---
 .../Scripts/vuesrc/contribute/ContentCommon.vue |  2 +-
 .../vuesrc/globalcomponents/CharacterCount.vue  |  2 +-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/ckeditorwithhint.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/ckeditorwithhint.vue
index 80415a53d..e45ba54a2 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/ckeditorwithhint.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/ckeditorwithhint.vue
@@ -1,15 +1,26 @@
 <template>
     <div>
-        <ckeditor v-model="description" :config="editorConfig" @ready="onEditorReady" @blur="onBlur"></ckeditor>
-        <div :class="[`pt-2 footer-text${this.valid ? '' : ' text-danger'}`]">{{ hint }}</div>
+        <ckeditor v-model="description"
+                  :config="editorConfig"
+                  @ready="onEditorReady"
+                  @blur="onBlur"
+                  tabindex="0"
+                  :aria-describedby="'editor-hint'"
+                  role="textbox"></ckeditor>
+        <div :id="'editor-hint'"
+             :class="[`pt-2 footer-text${this.valid ? '' : ' text-danger'}`]"
+             aria-live="polite">
+            {{ hint }}
+        </div>
     </div>
 </template>
 
+
 <script lang="ts">
     import Vue, { PropOptions } from 'vue';
     import CKEditorToolbar from './models/ckeditorToolbar';
     import CKEditor from 'ckeditor4-vue/dist/legacy.js';
-    import {getRemainingCharacters, getRemainingCharactersFromHtml} from "./helpers/ckeditorValidationHelper";
+    import { getRemainingCharacters, getRemainingCharactersFromHtml } from "./helpers/ckeditorValidationHelper";
 
     const getCharactersText = (n: number) => n === 1 ? `${n} character` : `${n} characters`;
 
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
index 180b60b61..055815e26 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
@@ -62,7 +62,7 @@
                 Write a description that explains the resource and its benefits to learners.
             </div>
             <div class="col-12 my-3">
-                <ckeditorwithhint :initialValue="this.resourceDescription" :maxLength="1800" @blur="saveDescription" @change="changeDescription" />
+                <ckeditorwithhint :initialValue="this.resourceDescription" :maxLength="1800" @blur="saveDescription" @change="changeDescription"/>
             </div>
         </div>
 
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/globalcomponents/CharacterCount.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/globalcomponents/CharacterCount.vue
index 4d6982115..4c3d14d19 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/globalcomponents/CharacterCount.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/globalcomponents/CharacterCount.vue
@@ -77,7 +77,7 @@
         </div>
         <div id="character-count-component-status-message"
              class="character-count-component-status-message"
-             aria-live="polite">
+             >
             <span>
                 You have {{ charactersDiff }} character{{ charactersDiffPlural ? 's' : '' }} remaining
             </span>