Checkbox focus is not showing in IE and Firefox while pressing Tab keys

The checkbox is not getting focus while pressing the Tab keys for the IE and Firefox. But if I press enter or using mouse, the checkbox is working fine. For the Chrome, the focus are showing clearly.

When I'm Inspect (F12) the checkbox, I have find the Id name called "delete-for-reals"

So I have find the id names on my projects in

CSS file:

.delete-for-reals img,
.delete-for-reals input {
  vertical-align: middle;
}
.delete-for-reals .rsuite-message {
  vertical-align: -2px;
}

Hbr File:

        <p class="delete-for-reals">
            <label for="delete-for-reals">
                
                
                
                    
                
                    
                
            </label>
        </p>
    

Dialog.less file:

.delete-for-reals {
    img, input {
        vertical-align: top;
    }
    .rsuite-message {
        vertical-align: -2px;
    }
}

I'm really don't know there is having problem with either ember javascript or CSS or anything.

Please anybody help me on this. Thank You