Character count component reads status twice after a user has modified existing value (VoiceOver/Safari)

[querkmachine]

Description of the issue

The character count component will start to read out the current status of the component (the "You have n characters remaining" text) twice in VoiceOver/Safari, but only after the user has deleted or modified content that has already been typed previously.

This issue was introduced in #2577, but was deemed to be non-blocking as it doesn't prevent a user from completing the journey (it's just annoying).

Steps to reproduce the issue

There are a few ways to reproduce this.

By deleting text input:

1. With VoiceOver turned on, open a page with a character counter in Safari.
2. Enter some text (e.g. "hello"). The "characters remaining" message should be read out once.
3. Enter more text (e.g. "world"). The "characters remaining" message should be read out once.
4. Delete some of the characters you've just typed. The "characters remaining" message is now read out twice.
5. Re-type some characters. The "characters remaining" message is still read out twice.

By amending input:

1. With VoiceOver turned on, open a page with a character counter in Safari.
2. Enter some text (e.g. "hello"). The "characters remaining" message should be read out once.
3. Navigate back and highlight some part of the text you have just typed (either with the arrow keys or by using the mouse).
4. Amend the input in a way that changes the length of the value (e.g. to "allo"). The "characters remaining" message will be read out twice.
5. Any further changes (adding or deleting) will read the "characters remaining" message twice.

By accepting an autocorrect suggestion:

1. Make sure that "Correct spelling automatically" is turned on in the macOS preferences (this is under Keyboard → Text).
2. With VoiceOver turned on, open a page with a character counter in Safari.
3. Enter some misspelled text (e.g. "henlo") without pressing space afterwards. The "characters remaining" message should be read out once, followed by information about the misspelling and the suggested correction.
4. Press the Enter or Space key to accept the correction. The "characters remaining" message is read out twice.
5. Any further changes (adding or deleting) will read the "characters remaining" message twice.

In all situations, navigating away from the textarea and back to it resolves the duplication, up until one of the reproduction methods is repeated. The issue is also occassionally resolved if the textarea's value is entirely deleted before typing again.

Actual vs expected behaviour

Expected behaviour: The "characters remaining" message is only read out once in all situations.

Environment (where applicable)

• Operating system: macOS 12.3.1
• Browser: Apple Safari
• Browser version: 15.4 (17613.1.17.1.13)
• GOV.UK Frontend Version: [not yet released]

This does not occur in VoiceOver/Safari in iOS.

[querkmachine]

Closing this as this no longer occurs in the most recent version of PR #2577.