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

Question

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

当我想激活标签内的按钮时，我需要再次按下标签键来设置从标签到按钮的标签索引。

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

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

Answer 1

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

我在标准 vaadin-tab web component

中找到了问题的答案

在 _onKeyup 函数中，他们对选项卡内的锚元素执行完全相同的操作。

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

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

          super._onKeyup(event);

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

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

Vaadin tabs with custom content

javascript

components

vaadin

web