Helper texts does not display well in input groups

[azmeuk]

Describe the issue

Current Behavior

If one input in a group has helper texts, they are displayed on the right side of the input instead of the bottom.

<label>Enter your domain
    <fieldset role="group">
      <input aria-describedby="domain-helper" aria-invalid="true" type="text" value="yolo">
      <small id="domain-helper">
        This is not a valid domain<br>This domain is not registered
      </small>
      <input id="submit" name="submit" type="submit" value="Check">
    </fieldset>
</label>

Expected Behavior

I would except the helper to be displayed as usual at the bottom of the input.

Reproduction URL

https://codepen.io/azmeuk/pen/emJZLQy

[rokf]

There's another issue opened on the same topic, just FYI 🙂 - #540

Maybe styling <small> elements that are placed directly below elements with a role="group" attribute the same way could be a viable solution to this problem 🤔

[rokf]

Me an my colleague at work have experimented with this a bit today and found a working solution for our case (the way we consistently use these groups).

This is the CSS snippet using which we override PicoCSS's default styling for these texts:

:where(input, select, textarea, fieldset, .grid, [role=group]) + small {
  display: block;
  width: 100%;
  margin-top: calc(var(--pico-spacing) * -0.75);
  margin-bottom: var(--pico-spacing);
  color: var(--pico-muted-color);
}

[role=group]:has([aria-invalid=true]) + small {
  color: var(--pico-del-color);
}

[role=group]:has([aria-invalid=false]) + small {
  color: var(--pico-ins-color);
}

With this snippet <small> after a <div role="group"> will be coloured and positioned correctly if you have an element inside the element with the role="group" attribute.

See

pico/css/pico.css

Line 1563 in 1039a47

:where(input, select, textarea, fieldset, .grid) + small {

for the source.

[Amaury]

This issue is fixed in µCSS v1.4.1.