Skip to content

[BUG] Input error message is hidden when inside <fieldset role="group"> #41

Description

@anthony-robin

Please search for duplicate or closed issues first. ✔️

Describe the issue

Current Behavior

When an input field is inside a <fieldset role="group">, invalid error message with <small> tag is hidden behind the input.
Without role="group" it is properly displayed.

Expected Behavior

I expect to see the error message below the input field as equal as non fieldset inputs.

Reproduction URL

<form>
    <div>
        <label for="user_email">Email</label>
        <input type="email" id="user_email" aria-invalid="true">
        <small>Email error</small>
    </div>

    <fieldset class="grid">
        <div>
            <label for="user_first_name">First name</label>
            <input type="text" id="user_first_name">
        </div>

        <div>
            <label for="user_last_name">Last Name</label>
            <input aria-invalid="true" type="text" id="user_last_name">
            <small>Last name error</small>
        </div>
    </fieldset>

    <fieldset class="grid" role="group">
        <div>
            <label for="user_password">Password</label>
            <input type="password" id="user_password">
        </div>

        <div>
            <label for="user_password_confirmation">Password confirmation</label>
            <input aria-invalid="true" type="password" id="user_password_confirmation">
            <small>Password error</small>
        </div>
    </fieldset>
</form>

Capture d’écran du 2025-01-15 12-59-00

Environment

  • picocss 2.2.4

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions