Kevin Powell - CommunityKP-C
Kevin Powell - Community•7mo ago
diesieben07

Correct tab order in login form

Hi everyone, I am implementing the following log-in form. I want to improve the tab-order, because currently it goes email field, forgot password link, password field. My markub looks like this (don't mind the Angular nonsense):

<div class="my-app-form-row">
    <div class="my-app-form-row-label-with-hint">
        <label class="my-app-large-label" for="password">{{ t("labelPassword") }}</label>
        <a class="my-app-form-row-hint" routerLink="/forgot-password">
            {{ t("forgotPassword") }}
        </a>
    </div>
    <input
        class="my-app-form-control"
        type="password"
        id="password"
        [formControl]="formGroup.controls.password"
    />
</div>

For my-app-form-row-label-with-hint I am just putting the label and the hint next to each other using Grid.

Should I try to move the hint beyond the input field in the HTML and try to shuffle it around using CSS? Use the tabindex attribute somehow? Something entirely different?

Thanks!
image.png
Was this page helpful?