Vaadin вкладки с пользовательским контентом

Question

У меня есть компонент вкладки Vaadin с пользовательским содержимым. В некоторых вкладках есть кнопки, вставленные из простого текста. Когда я перемещаюсь по вкладке с помощью клавиатуры, я могу перемещаться по вкладкам с помощью клавиш со стрелками.

Когда я хочу активировать кнопку внутри вкладки, мне нужно снова нажать клавишу табуляции, чтобы установить индекс табуляции от вкладки до кнопки.

Как активировать кнопку с помощью навигации по клавиатуре, не нажимая клавишу Tab дважды?

В демонстрационной вкладке vaadin приведен пример вкладки с пользовательским содержимым . Вместо кнопки есть флажок во вкладке, но проблема та же.

Answer 1

Я исправил проблему.Теперь я могу активировать кнопку внутри вкладки с помощью клавиатуры.

Я нашел ответ на мой вопрос в стандартном веб-компоненте vaadin-tab

В _onKeyup Они сделали то же самое с элементом привязки внутри вкладки.

В моем веб-компоненте я добавил функцию _onKeyup и изменил селектор, чтобы использовать кнопку vaadin вместо элемента привязки.:

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

          super._onKeyup(event);

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