Summary

This PR adds a teardown() method to remove the status message elements that are added to the DOM when .on() is called for the character count module.

Breaking change

This is not a breaking change.

Related issue

Closes #6386

Problem statement

The character count module adds two status elements (one for visual, one for screen reader) to the DOM via createStatusMessages() on init(). However, it does not remove these elements when .off() is called.

This prevents this module from being used properly in React's strict mode because rendering and callback refs run twice. Since .on() gets called twice, and .off() (in a cleanup function) does not remove the status elements, you end up having 4 total status elements in the DOM (instead of the intended 2 elements).

Solution

This PR adds a teardown() method to the character count module that matches on the CHARACTER_COUNT class at the specified root, and queries for the elements there were added by createStatusMessages() and removes them.

Let me know if you all think there is a better way!