I have a page where in there is form which has block of input fields. There is also a button provided to 'Add Another' which allows for the addition of more block of the same above as mentioned.

As long there is more than one block of input fields on the page, a 'Remove' link is visible for the user to allow them to remove a the corresponding block from the view.

My issue is that on pressing Tab key, the 'Remove' link never gets highlighted. The focus moves to the next block element.

I have tried using Tab index but it hasn't resolved the issue as Tab key then does not follows a sequence.

<fieldset class="fieldset" id="fieldset-${receiptDetails.id}" style="width: 100%">
    <legend style="display: none;">Receipt Detail Section - ${receiptDetails.id}</legend>
    <label for="id" class="visually-hidden">Id: </label>
    <input type="text" name="id" id="id" style="display: none" value="${receiptDetails.id}">

    <div class="form-group">
        <label class="claim-label" for="nameAddressOfSupplier" id="name-address-supplier-label">
            [@spring.message "receipts-upload.supplier.name.address.label.text"/]
        </label>
        <textarea class="govuk-textarea" id="nameAddressOfSupplier-${receiptDetails.id}" name="nameAddressOfSupplier">${receiptDetails.nameAddressOfSupplier}</textarea>
    </div>

    <div class="form-group">
        <label class="claim-label" for="purchaseDetails" id="purchase-details-label">
            [@spring.message "receipts-upload.purchase.details.label.text"/]
        </label>
        <textarea class="govuk-textarea" id="purchaseDetails" name="purchaseDetails">${receiptDetails.purchaseDetails}</textarea>
    </div>

    <div class="custom-form-group">
        <label class="claim-label" for="amount" id="amount-label">
            [@spring.message "receipts-upload.amount.label.text"/]
        </label>
        <div class="currency-input">
            <div class="currency-input__denomination">£</div>
            <input class="currency-input__field text-input" data-ponent="date-check-length" data-length="9" type="text" id="amount" value="${receiptDetails.amount}" name="amount" style="display: inline"> [#if numberOfReceiptDetails == 1]
            <p class="remove-link visually-hidden" id="remove-link_${receiptDetails.id}" name="remove-link">
                <span class='googleAnalyticsRemove'>
                        <a id="remove-receipt-detail_${receiptDetails.id}" name="remove-receipt-detail"
                           class="action--secondary remove-receipt-detail" style="float: right">
                               [@spring.message "receipts-upload.remove.text"/]
                        </a>
                    </span>
            </p>
            [#else]
            <p class="remove-link" id="remove-link_${receiptDetails.id}" name="remove-link">
                <span class='googleAnalyticsRemove'>
                        <a id="remove-receipt-detail_${receiptDetails.id}" name="remove-receipt-detail"
                            class="action--secondary remove-receipt-detail" style="float: right">
                                [@spring.message "receipts-upload.remove.text"/]
                        </a>
                    </span>
            </p>
            [/#if]
        </div>
    </div>
</fieldset>

<p class="add-another-link" id="add-another-link">
    <a href="" id="add-another" class="action--secondary">
               [@spring.message "receipts-upload.add.another.text"/]
        </a>
</p>

When the user clicks on 'add-another-link' then another fieldset is added to the view with a 'remove-link' visible for each fieldset.

I expect to reach 'remove-link' within each fieldset element from the 'input#amount' when Tab key is pressed but actually the Tab key press highlights the 'textarea[name=nameAddressOfSupplier]' contained within the next fieldset.

I will be grateful for any suggestions.

I have a page where in there is form which has block of input fields. There is also a button provided to 'Add Another' which allows for the addition of more block of the same above as mentioned.

As long there is more than one block of input fields on the page, a 'Remove' link is visible for the user to allow them to remove a the corresponding block from the view.

My issue is that on pressing Tab key, the 'Remove' link never gets highlighted. The focus moves to the next block element.

I have tried using Tab index but it hasn't resolved the issue as Tab key then does not follows a sequence.

<fieldset class="fieldset" id="fieldset-${receiptDetails.id}" style="width: 100%">
    <legend style="display: none;">Receipt Detail Section - ${receiptDetails.id}</legend>
    <label for="id" class="visually-hidden">Id: </label>
    <input type="text" name="id" id="id" style="display: none" value="${receiptDetails.id}">

    <div class="form-group">
        <label class="claim-label" for="nameAddressOfSupplier" id="name-address-supplier-label">
            [@spring.message "receipts-upload.supplier.name.address.label.text"/]
        </label>
        <textarea class="govuk-textarea" id="nameAddressOfSupplier-${receiptDetails.id}" name="nameAddressOfSupplier">${receiptDetails.nameAddressOfSupplier}</textarea>
    </div>

    <div class="form-group">
        <label class="claim-label" for="purchaseDetails" id="purchase-details-label">
            [@spring.message "receipts-upload.purchase.details.label.text"/]
        </label>
        <textarea class="govuk-textarea" id="purchaseDetails" name="purchaseDetails">${receiptDetails.purchaseDetails}</textarea>
    </div>

    <div class="custom-form-group">
        <label class="claim-label" for="amount" id="amount-label">
            [@spring.message "receipts-upload.amount.label.text"/]
        </label>
        <div class="currency-input">
            <div class="currency-input__denomination">£</div>
            <input class="currency-input__field text-input" data-ponent="date-check-length" data-length="9" type="text" id="amount" value="${receiptDetails.amount}" name="amount" style="display: inline"> [#if numberOfReceiptDetails == 1]
            <p class="remove-link visually-hidden" id="remove-link_${receiptDetails.id}" name="remove-link">
                <span class='googleAnalyticsRemove'>
                        <a id="remove-receipt-detail_${receiptDetails.id}" name="remove-receipt-detail"
                           class="action--secondary remove-receipt-detail" style="float: right">
                               [@spring.message "receipts-upload.remove.text"/]
                        </a>
                    </span>
            </p>
            [#else]
            <p class="remove-link" id="remove-link_${receiptDetails.id}" name="remove-link">
                <span class='googleAnalyticsRemove'>
                        <a id="remove-receipt-detail_${receiptDetails.id}" name="remove-receipt-detail"
                            class="action--secondary remove-receipt-detail" style="float: right">
                                [@spring.message "receipts-upload.remove.text"/]
                        </a>
                    </span>
            </p>
            [/#if]
        </div>
    </div>
</fieldset>

<p class="add-another-link" id="add-another-link">
    <a href="" id="add-another" class="action--secondary">
               [@spring.message "receipts-upload.add.another.text"/]
        </a>
</p>

When the user clicks on 'add-another-link' then another fieldset is added to the view with a 'remove-link' visible for each fieldset.

I expect to reach 'remove-link' within each fieldset element from the 'input#amount' when Tab key is pressed but actually the Tab key press highlights the 'textarea[name=nameAddressOfSupplier]' contained within the next fieldset.

I will be grateful for any suggestions.

• javascript
• html

1 Answer 1

If you are not using href in <a> tag, tab key (tabindex) will skip that a tag,

if you add tabindex="0", the tab key will reach the link.

Please refer the post: Why would an `a` tag need `tabindex=0`?