Enable-8 create a better character counter widget

[ocjadan]

No description provided.

[alisonhall]

This page currently has the following text for the character count section:

The character counter uses a JavaScript library to implement it. Below is the HTML markup needed for it to work, as well as instructions on how to load the library in your own projects.

Are we still using a JavaScript library? If so, I think we should mention which library it is. If not, then this text needs to be changed.

[ocjadan]

Hi @zoltan-dulac , I've decided on going with adding/removing an exclamation to the end of the text to force Chrome to "see a difference" on each key press.

For example:

1. 1st key press = "Character Count: 10/100."
2. 2nd key press = "Character Count: 10/100.!"
3. 3rd key press = "Character Count: 10/100."

This approach works for Safari, Firefox and Chrome with VoiceOver on Mac.

[ocjadan]

If you were wondering, here are other methods I've tried:

Did not work ❌:

1. Adding or removing a whitespace at the end of the announcement text on each key press.
2. Doing everything in the KeyUp event (removal, timeout, populate).

aria-atomic

3. "true" without removing the <p> element.
4. "true" while also deleting the <p> element and appending a new <p> element to live region each time.

aria-relevant

5. Set to 'text'.
6. Set to 'additions'.
7. Set to 'additions removals' -> ⚠️ works but VoiceOver "double-speaks" — it tries to read out the removal and immediately is interrupted by the addition. Even with no timeout there is a noticeable interruption. As a result, don't think this is acceptable.

aria-live

8. Set to 'assertive'.

aria-busy

9. Setting to "true" on keydown and then "false" on key up (before or after .textContent).

Other Methods

10. Force re-building between <p> and <div>.
11. Force re-building between <p> and <span>.
12. Repeating 9 and 10 with 'aria-atomic' as well.
13. Using only <div> without the inner <p> element and changing .textContent for that single <div>.
14. Removing the element around the text on every other keypress.
15. Adding a brand-new <p> element within the ARIA live region on every key press.
16. Remove the inner <p> element, use .textContent for <div> and appending to it on every key press. This sort of works but VoiceOver will repeat the entire string, which has the previous counts as well. ❌ Not acceptable.

[zoltan-dulac]

Can we have a default style for the enable-character-counter and have it is part of the NPM package?

[ocjadan]

Hey @zoltan-dulac ,

Trying to understand your request a bit more, the <div< element that this style is applied to is programmatically added below the <textarea> — the <div> does not exist before the JavaScript is ran. As a result, I was wondering if you meant:

1. Programmatically and explicitly setting the style, e.g. div.setAttribute("style", "border-color:#FFFFFF;");?
2. enable-character-count.js should import less/textbox.less and apply the style programmatically?