我有一个页面,其中有一个表单,其中包含一组输入字段。还提供了一个“添加另一个”按钮,允许添加与上述相同的更多块。
只要页面上有多于一个输入字段块,用户就可以看到“删除”链接,以便他们将相应的块从视图中删除。
我的问题是,在按Tab键时,“删除”链接从未被突出显示。焦点移动到下一个块元素。
我尝试使用tabindex,但它没有解决问题,因为Tab键不遵循顺序。
用户点击“添加其他链接”时,视图中会添加另一个字段集,并为每个字段集显示“删除链接”。
我期望在按下Tab键时从“input#amount”中访问每个字段集元素中的“remove-link”,但实际上,Tab键按下后会突出显示下一个字段集中包含的“textarea [name = nameAddressOfSupplier]”。
如果您有任何建议,我将不胜感激。
只要页面上有多于一个输入字段块,用户就可以看到“删除”链接,以便他们将相应的块从视图中删除。
我的问题是,在按Tab键时,“删除”链接从未被突出显示。焦点移动到下一个块元素。
我尝试使用tabindex,但它没有解决问题,因为Tab键不遵循顺序。
<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-component="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>
用户点击“添加其他链接”时,视图中会添加另一个字段集,并为每个字段集显示“删除链接”。
我期望在按下Tab键时从“input#amount”中访问每个字段集元素中的“remove-link”,但实际上,Tab键按下后会突出显示下一个字段集中包含的“textarea [name = nameAddressOfSupplier]”。
如果您有任何建议,我将不胜感激。
<a>
标签中提供href
,还是提供tabindex="0"
? - Abhinav Mehrotra