Skip to content

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

@anthony-robin

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

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