Enter key and tab not working for focus class

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.