Enter key and tab not working for focus class - html

Question

I am trying to tab the buttons for accessibility reasons in the header however I am not able to tab over them.
I have the following css
.nmcnav_clickable:focus {
background-color: yellow;
}
.nmcnav_clickable {
.noButton;
display: flex;
align-items: center;
height: var(--primary-height);
cursor: pointer;
// don't show an outline when not tabbing
&:focus:not(:focus-visible) {
outline: none;
}
&:focus {
outline: currentColor solid;
background-color: yellow;
}
&:hover {
.nmcnav_text {
color: #color-teal;
}
}
}
This is my HTML
{% macro navbutton(item) %}
<button tabindex="0"
class="nmcnav_clickable nmcnav_button"
aria-controls="nmcnav_dropdown-{{ item.id }}"
aria-expanded="false"
id="nmcnav_button-{{ item.id }}">
<span class="nmcnav_text">{{ item.title|raw }}</span>
</button>
{% endmacro %}
{% macro navlink(item) %}
<a
class="nmcnav_clickable {{ item.meta('button') ? 'nmcnav_btn' : '' }}"
href="{{ item.get_link }}"{% if item.target %} target="{{ item.target }}"{% endif %}>
<span class="nmcnav_text {{ item.meta('button') ? 'btn' : '' }}">{{ item.title|raw }}</span>
</a>
{% endmacro %}
There was a point where I was able to tab over the buttons but then I realized I was not able to press enter to actually access the links because tabindex only works with <a> or <button> tags. But when I try and change the tabindex to the buttons, nothing happens. I need to be able to tab over and enter for the buttons. I have also attached a ss of what the header should look like.
Thanks in advance.