Вкладки Vaadin с пользовательским содержимым
У меня есть компонент вкладки Vaadin с настраиваемым содержимым. На некоторых вкладках есть кнопки с простым текстом. Когда я перемещаюсь по компоненту вкладки с помощью клавиатуры, я могу перемещаться по вкладкам с помощью клавиш со стрелками.
Когда я хочу активировать кнопку внутри вкладки, мне нужно снова нажать клавишу табуляции, чтобы установить tabindex с вкладки на кнопку.
Как я могу активировать кнопку с навигацией по клавиатуре, не нажимая дважды клавишу табуляции?
В демо-версии вкладки vaadin есть файл пример вкладки с произвольным содержимым. Вместо кнопки на вкладке есть флажок, но проблема та же.
Да, пример вкладки с произвольным содержимым есть только в Java-примере. Вы можете переключиться на примеры HTML (веб-компонентов), нажав кнопку HTML в левой панели навигации.
Моей первой идеей было установить для tabindex активной вкладки значение -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();
}
}
}
Вы ссылаетесь на пример Java, но ваши теги предполагают использование JavaScript. Это не случайно и вы очень хотите для JS, верно?