display inline-block makes element focusable in Firefox - html

Question

Does anyone know why the following issue occurs only in Firefox browser? And how to fix that?
When the user wants to use the keyboard with the Firefox browser unexpected behavior occurs around . menu-button button.
If you press tab after the . menu-button button you don't come out on the next ‘test 2’ button as expected, but the focus seems to disappear. If you then press TAB two more times you do end up on ‘test 2’ button.
Our research showed that the span with the attribute data-email="long" has the css property display: inline-block and that makes this span focusable. The display inline-block on [data-email="long"] span is needed so that the long email hooks off behind the white gradient.
You can find a demo of the issue here (test it in Firefox):
/* base */
html, body {
padding: 20px;
}
ul {
display: flex;
list-style: none
}
li {
position: relative;
}
button {
margin: 10px;
}
.menu-button {
display: inline-block;
position: relative;
color: #003082;
cursor: pointer;
font-weight: 700;
line-height: 1.5625rem;
width: 85px;
text-align: left;
&:focus {
&::after {
content: '';
display: block;
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 4px;
border: 1px solid blue;
box-shadow: 0 0 0 1px #0063d3, 0 2px 28px rgba(#000, 0.1);
}
outline: none;
}
}
.menu-button-text {
margin-right: 0;
&::before {
content: "";
height: 2.1875rem;
width: 2.1875rem;
position: absolute;
left: -3px;
top: -4px;
}
}
[data-email=long] {
display: inline-block;
width: 68px;
overflow-x: hidden;
vertical-align: top;
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 3rem;
height: 100%;
z-index: 1;
opacity: 1;
background: linear-gradient(90deg,hsla(0,0%,100%,0),#fff 90%);
}
}
/* utils */
.unbutton {
border: none;
background: none;
padding: 0;
}
.alt {
position: absolute;
-webkit-clip-path: polygon(0 0,0 0,0 0,0 0);
clip-path: polygon(0 0,0 0,0 0,0 0);
width: 1px;
height: 1rem;
margin: 0;
overflow: hidden;
white-space: nowrap;
}
<ul>
<li>
<button>
test 1
</button>
</li>
<li>
<button class="unbutton menu-button">
<span class="alt">logged in with:</span>
<span class="menu-button-text menu-button-text--full">
<span class="h-acc-visible-l" data-email="long" >test#test.com</span>
</span>
</button>
</li>
<li>
<button>
test 2
</button>
</li>
</ul>
Only the button must be focusable and not the span(s)

Answer 1

Dirty, but: Set your buttons with attribute "tabindex" and positive values (1 to 3), while all your spans inside button #2 get tabindex="-1"; just tried your fiddle with this mod and works at least in FF85.