输入键和标签不适用于焦点类

Question

我试图在标题中出于可访问性的原因来标记按钮，但是我无法对其进行标签。

我有以下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;
        }
    }
}

这是我的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 %}

我可以通过按钮 tab> tab> tab> ，但后来我意识到我无法按下 enter 实际访问链接是因为Tabindex仅适用于＆lt; a＆gt;或＆lt; button＆gt;标签。但是，当我尝试将Tabindex更改为按钮时，什么也不会发生。我需要能够标记并输入按钮。我还附上了标头的外观。

预先感谢。