TD-5143: issue reading twice with screen reader on contribute resource screens

Author: swapnamol-abraham

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`;
 

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>
 

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>