Improve EuiDescribedFormGroup accessiblity

[jen-huang]

Context: #707 (comment)

In its current implementation, EuiDescribedFormGroup behaves like a fieldset and generates something like this (simplified):

<div role="group" aria-labelledby="generatedId-title" aria-describedby="generatedId">
  <EuiTitle id="generatedId-title" />
  <EuiText id="generatedId" />
  <EuiFormRow>
      <input />
  </EuiFormRow>
  <EuiFormRow>
      <input />
  </EuiFormRow>
  ...
</div>

If it only wraps around one form row, and the user specifies idAria and passes it to the form row, it becomes:

<div role="group" aria-labelledby="userId-title">
  <EuiTitle id="userId-title" />
  <EuiText id="userId" />
  <EuiFormRow>
      <input aria-describedby="userId" />
  </EuiFormRow>
</div>

Action items:

• EuiText (description prop) is repeated twice by screen readers in the second example with one form row. Once when user is reading the page normally and again when user is inside the input field. Is this preventable?
• EuiTitle (title prop) takes any type of node. Should this be restricted to only heading elements (h2, h3, etc)?
• Review to make sure the aria props are correct.

References:
https://www.w3.org/WAI/tutorials/forms/grouping/#associating-related-controls-with-fieldset
https://www.w3.org/TR/wai-aria/#aria-describedby