[TextField] Improve TextField so that character count is only announced on focus.

[emarchak]

(Try 2 for CodeCov)

WHY are these changes introduced?

We're using the TextField component inside a very long form. When switching context (e.g. changing the form data but keeping the form), we need to update the values of the form..

When doing so, the aria-live state of the character counters is causing them to be read out one after another without any context. I'm setting the aria-live state to off unless the TextField has focus.

Feel free to slack @emarchak for more context on this. Related to the same problem as #1699.

WHAT is this pull request doing?

I'm piggy-backing off of the existing focus state in the TextField component to toggle between off and polite to the character count.

How to 🎩

1. Set up the playground with the following code. You'll get an input field with a character count and a button that says "Update textfield."
2. Boot up your screen reader, and edit the text in the textfield
   • You should hear the screen reader read out the character count as your typing.
3. Tab out of the text field and click the "Update textfield." button.
   • You should not hear the screen reader read out the new character count.

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {TextField, Button} from '../src';

interface State {
  value: string;
}

export default class Playground extends React.Component<State> {
  constructor(props) {
    super(props);
    this.state = {
      value: 'This is this original value.',
    };
  }

  handleTextChange = (value) => {
    this.setState({value});
  };

  updateTextField = () => {
    this.setState({value: 'This is a new value'});
  };

  render() {
    const {value} = this.state;

    return (
      <React.Fragment>
        <TextField
          label="Input Value name"
          value={value}
          showCharacterCount
          onChange={this.handleTextChange}
        />

        <Button onClick={this.updateTextField}>Update textfield</Button>
      </React.Fragment>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes (Nothing to update)
• Tophatted documentation changes in the style guide

cc @Shopify/accessibility

[dpersing]

🤞