Add labelAppend prop to EuiFormRow and allow EuiFormLabel to be a <legend>

[cchaos]

Add labelAppend prop to EuiFormRow

To help with instances where consumers need to add content to the form row's label (but really shouldn't live inside the label like a clickable element), they can now use labelAppend which accepts any node, and just displays it in a spaceBetween style flex group with the label.

Example:

<EuiFormRow
  label="Select (with no initial selection)"
  labelAppend={<EuiText size="xs"><EuiLink>Link to some help</EuiLink></EuiText>}
>
  <EuiSelect />
</EuiFormRow>

renders:

Note:

I purposefully didn't want to trap us into a situation where the prop only allowed links or other granular content, so I just allowed any node. This does make creating similarly font-sized links a little more tedious.

---

Allow EuiFormLabel to be a <legend>

Fixes #1136 so that situations (like checkbox groups) where the label should really be acting like a fieldset legend can. It just allows you to set the new type prop to either 'label' | 'legend'.

Subsequently, I added labelType which accepts the same possibilities to the EuiFormRow which will pass the prop correctly to the label but also use the fieldset element if using a legend type.

Example

<EuiFormRow
  label="Checkbox group labels should use a `legend` label type"
  labelType="legend"
>
  <EuiCheckboxGroup />
</EuiFormRow>

renders the same visually, but the html is

<fieldset class="euiFormRow" id="imrv5t33-row">
  <div>
    <legend class="euiFormLabel">Checkbox group labels should use a `legend` label type</legend>
  </div>
  <div id="imrv5t33">
    <div class="euiCheckbox euiCheckboxGroup__item"> </div>
    <div class="euiCheckbox euiCheckboxGroup__item"> </div>
    <div class="euiCheckbox euiCheckboxGroup__item"> </div>
  </div>
</fieldset>

---

Also

Did a quick style alignment between the table headers and form labels. The table headers are slightly less bold, while the form labels are darker.

cc @cristina-eleonora

---

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in Kibana
• This was checked in dark mode
• Any props added have proper autodocs
• Typescript definitions were added
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• [ ] This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• This was checked against keyboard-only and screenreader scenarios
• [ ] This required updates to Framer X components

[cchaos]

Having been interacting with the forms and especially combo boxes for a while now, it's been frustrating me that the white space to the right of form label text is also clickable. Like when I'm trying to close the combo box's dropdown by clicking outside of it, I think I'm click on a non-object, but really it's the form label that being block displayed.

I checked out the default display behavior of html label elements, and they're inline. I think we should lean on the default. So I set the .euiFormLabel to be inline-block (so it'd get margins) but because EuiFormRow is displayed as flex with direction of column that forces everything to be display block.

This wrapping <div> forces the div itself to be block but allowing it's contents to be whatever.

The other options to remove these lines, but I don't know the implication down the line...

eui/src/components/form/form_row/_form_row.scss

Lines 1 to 7 in dae4fe7

	/**
	* 1. Coerce inline form elements to behave as block-level elements.
	* 2. For inline forms, we need to add margin if the label doesn't exist.
	*/
	.euiFormRow {
	display: flex; /* 1 */
	flex-direction: column; /* 1 */

[cristina-eleonora]

This looks great, Caroline!

[cchaos]

This is ready for review.

[cchaos]

So I was astounded that when using fieldset and label, the screenreader didn't automatically announce the screenreader. Figured, I'd just add this aria-labelledby stuff and it works. I now realize that it's because the legend wasn't a direct descendent of fieldset. If I remove the wrapping div as mentioned above, it works without the aria stuff....

Just an FYI really...

[chandlerprall]

LGTM, one small change requested to help clarify label vs legend typing

[snide]

Tried pretty hard to find something here, but it all looks and works well. I spent most of my time testing accessibility, thinking this might have effected how the screen readers handled bits, but after scanning all the form types and their sibling pages I couldn't find anything.

The legend / label stuff is nice. This isn't tied to this PR, but we should likely use a described by on the checkboxes to read out the legend. I hacked this into my inspector and it seemed to work the way I expected.

[cchaos]

Yeah it's not really possible to do that right now at the EuiFormRow level since it doesn't know what it's form inputs are.

[snide]

@cchaos Yep, no worries. I figured as much.