CRLF causes mismatch between JS and form maxlength validation

Problem/Motivation

On Windows adding a new line in a textarea element that has a #maxlength property will cause a mismatch between the JavaScript maxlength validation and the server-side form validation. This is due to Windows using CR+LF (\r\n) as new line characters. JavaScript truncates this to only LF (\n) for the purposes of determining the length of the input. But the raw character data gets sent to the server for PHP to validate, which can subsequently cause it to fail. You may fill a textarea to its maximum allowed length with a string that includes new lines and everything appears to be fine before submission. But then after submitting the form you're presented with a form validation error that says:

Textarea with maxlength cannot be longer than X characters but is currently X+N characters long.

This is a frequently reported problem between JavaScript and server-side validation across many libraries and frameworks for decades, not just Drupal.

Steps to reproduce

1. Use an OS that uses CRLF for new lines.
2. Create a form with a textarea that has a #maxlength property in its render array.
3. View the form.
4. Enter as many characters as the textarea will allow. One or more of the characters should be new lines.
5. Optional: You can verify the number of characters that the browser thinks is in the textarea value by inspecting it in the dev tools, then entering
   

   $0.value.length

   in the console.

6. Submit the form

Expected result

The form should be submitted without validation errors.

Actual result

The form reloads with a validation error stating that the maxlength was exceeded by the #maxlength + (number of new lines in the text).

Proposed resolution

Normalize \r\n to \n in text before validation. This may be considered data loss. I'm not certain.

OR

Force the JavaScript length validation to account for carriage return characters. This may be undesirable behavior for UX because the number of characters that are visible in the text will not match the maximum that a user thinks they've entered. But this is probably only an issue for a small set of users.

Remaining tasks

• Decide on a fix.
• Create an MR.
• Write a test.
• Review.

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet