I have a form where users need to be able to delete and add items using the keyboard. Typically, users use the tab key to move focus from one element to another.
However, when pressing the tab key in this form, the focus only shifts to textboxes and not the add and delete buttons in the corner.
This form is built 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6964647f787f796a7b4b3e25392539">[email protected]</a>/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>