OTP component accessibility

[miken32]

Documentation for this new component says 'Each input should have an aria-label describing its position (e.g., "Digit 1")'. I'm not at all an expert on assistive technology from an end-user perspective, but wouldn't this get really annoying if each label is read out for the user? It's probably too late to re-engineer this thing now, but thought I'd ask the question anyway.

Our home-grown OTP component ends up looking something like this, so assistive technology users are dealing with a typical form input. Scripting puts the input from the big boxes into the standard input for submission and jumps the focus from item to item.

<input
    type="text"
    class="visually-hidden"
    name="otp"
    id="otp"
    autocomplete="off"
    inputmode="numeric"
    maxlength="6"
    aria-label="some explanatory text"
/>
<div class="row">
    <div class="col">
        <div class="d-flex justify-content-center gap-3" aria-hidden="true">
            <input
                type="text"
                id="otp_1"
                class="text-center text-bold split-value-field form-control focus-ring"
                style="width: 3rem; height: 4rem; font-size: 2.5rem;"
                inputmode="numeric"
            />
            <!-- repeat x6 -->
        </div>
    </div>
</div>

[coliff]

The OTP component was recently reworked to have improved accessibility - check out the PR #42500 and the updated docs/examples - https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/forms/otp-input/

[miken32]

Nice! I guess it wasn't too late for a full redo of the thing.