I have a form where I need to allow users to click delete and add using keyboard. The genral rule is that users use tab key to shift focus from one control to other.
When tab is pressed for the form the active control will move only to textboxes and not to add and delete corner buttons.
I am using bootstrap 5.2
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/somethinggoodone/cdn/AniketPradhan_bootstrap.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</head>
<body>
<div class="input-group">
<span class="input-group-text">🗑</span>
<input type="text" aria-label="First name" class="form-control">
<input type="text" aria-label="Last name" class="form-control">
<span class="input-group-text">+</span>
</div>
<div class="input-group">
<span class="input-group-text">🗑</span>
<input type="text" aria-label="First name" class="form-control">
<input type="text" aria-label="Last name" class="form-control">
<span class="input-group-text">+</span>
</div>
</body>>Solution :
Spans aren’t tabbable controls by default. You can make them tabbable by setting the tabindex attribute on them:
<span class="input-group-text" tabindex="0">🗑</span>
Alternatively, you can use an anchor tag with an href:
<a class="input-group-text" href="#">🗑</a>