Prefer user.keyboard() for JSDOM text entry

Author: colinrotherham

packages/nhsuk-frontend/src/nhsuk/components/character-count/character-count.jsdom.test.mjs

@@ -1,11 +1,14 @@
 import { getByRole } from '@testing-library/dom'
+import { userEvent } from '@testing-library/user-event'
 import { outdent } from 'outdent'
 
 import { CharacterCount, initCharacterCounts } from './character-count.mjs'
 import { examples } from './fixtures.mjs'
 
 import { components } from '#lib'
 
+const user = userEvent.setup()
+
 describe('Character count', () => {
   /** @type {HTMLElement} */
   let $root
@@ -350,12 +353,13 @@ describe('Character count', () => {
         expect(component.getCountMessage()).toBe('You have 98 words remaining')
       })
 
-      it('uses current textarea value for `maxlength` limit via back/forward navigation', () => {
+      it('uses current textarea value for `maxlength` limit via back/forward navigation', async () => {
         const component = new CharacterCount($root, {
           maxlength: 100
         })
 
-        $textarea.value = 'Newly updated value'
+        $textarea.focus()
+        await user.keyboard('Newly updated value')
 
         // Trigger back/forward navigation
         window.dispatchEvent(
@@ -369,12 +373,13 @@ describe('Character count', () => {
         )
       })
 
-      it('uses current textarea value for `maxwords` limit via back/forward navigation', () => {
+      it('uses current textarea value for `maxwords` limit via back/forward navigation', async () => {
         const component = new CharacterCount($root, {
           maxwords: 100
         })
 
-        $textarea.value = 'Newly updated value'
+        $textarea.focus()
+        await user.keyboard('Newly updated value')
 
         // Trigger back/forward navigation
         window.dispatchEvent(