Most probably when you are working with Dialog box/Modal popup you might be caught this issue and now you are trying to get resolve this issue as soon as possible.

Some people won't use mouse when they working in computer instead of the mouse they were more depend on keyboard. This problem is stating for the such peoples. It is checking at least one tabble control from the given screen, if did not found any interactive element then you will get this error.

*Your focus-trap must have at least one container with at least one tabbable node in it at all times*


E.g :- consider you are a user who accessing a website, when working with that you are getting one dialog box and it does not have any button to close or any tabbable control. So after this you cannot go further and this webpage become unusable.

This is what the error is saying all about.

*Then how to fix this because developer who do not want this any of button in the dialogue box / Modal popup ?*

I can suggest two methods but this is just an trick.
<ul>
<ol>
1. You can set tabindex attribute to the any of element. 
    

```html
   <div tabindex="-1"></div>
```
but this is not a recommended way of fixing the issue, I  just explain you how we get ride of this problem.
</ol>
<ol>
2. Fix through CSS, this is most recommended way than first option.
I  just wrote a sample code, which contain button but we don't want to display the button in the screen, So just hide the button from the screen.

```html
<div>
<button class="btnclose">close</button>
</div>
```

```css
.btnclose
{
  position: absolute;
  left: -9999px;
  width: 20px;
}
```
</ol>

Hope this help for you.


Your focus-trap must have at least one container with at least one tabbable node in it at all times, when using dialog or modal in ReactJS or other front-end framework

More Stories related to 'focus-trap'

Also read the similar topics