Вкладки Vaadin с пользовательским содержимым

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

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

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

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

Вы ссылаетесь на пример Java, но ваши теги предполагают использование JavaScript. Это не случайно и вы очень хотите для JS, верно?

cfrick 22.05.2019 15:38

Да, пример вкладки с произвольным содержимым есть только в Java-примере. Вы можете переключиться на примеры HTML (веб-компонентов), нажав кнопку HTML в левой панели навигации.

xela84 22.05.2019 15:46

Моей первой идеей было установить для tabindex активной вкладки значение -1, если вкладка имеет дочернюю кнопку. Но не знаю, получится ли :-(

xela84 22.05.2019 15:49
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
3
262
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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();
            }
          }
        }

Другие вопросы по теме