javascript - HTML: Unable to reach a link using Tab key - Stack Overflow

admin管理员组

文章数量:1353289

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

Share Improve this question Follow edited Aug 9, 2019 at 9:15 user11748261 asked Aug 9, 2019 at 8:43 Abhinav MehrotraAbhinav Mehrotra 62322 gold badges99 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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`?

本文标签： javascriptHTML Unable to reach a link using Tab keyStack Overflow