具有自定义内容的Vaadin选项卡

Question

我有一个Vaadin选项卡组件，其中包含自定义内容。在某些选项卡中是装有简单文本的按钮。使用键盘浏览选项卡组件时，可以使用箭头键浏览选项卡。

当我要激活选项卡中的按钮时，我需要再次按tab键以将tabindex从选项卡设置为按钮。

如何在不按两次Tab键的情况下通过键盘导航激活按钮？

在vaadin标签演示中，有一个example of a tab with custom content。选项卡中有一个复选框，而不是按钮，但是问题是相同的。

Answer 1

我已解决问题。现在，我可以使用键盘激活选项卡内的按钮。

我在标准vaadin-tab web component

中找到了问题的答案

在_onKeyup函数中，它们对选项卡中的锚元素所做的操作完全相同。

在我的Web组件中，我添加了_onKeyup函数，并修改了选择器以使用vaadin按钮而不是锚元素：

_onKeyup(event) {
          const willClick = this.hasAttribute('active');

          super._onKeyup(event);

          if (willClick) {
            const slottedButton = this.querySelector('vaadin-button');
            if (slottedButton) {
              slottedButton.click();
            }
          }
        }