Hi Team,
I am unable to remove the focus ring from a checkbox in my application. When I click the checkbox using the spacebar, I find that I cannot navigate left or right or up and down using the keyboard keys afterward. This behavior occurs specifically after the checkbox is activated with the spacebar.
Could you please help me resolve this issue?
Which version are you using?
Tested locally, docs and demo apps, keyboard navigation works as expected when a checkbox is focused and/or checked.
Hi Joacim,
I am using Vaadin version 23.3.35, and I am facing an issue. After selecting a checkbox, I am unable to navigate left, right, up, or down using the keyboard arrow keys. The spacebar selects the checkbox, but the keyboard navigation does not work as expected.
Attached the screenshot.
Is the checkbox in a grid?
yes, this is in grid.
It appears that you have focused the checkbox within a Grid cell. This happens when you hit Enter key while a focused cell contains interactive elements. Focus can be moved back to cell level by hitting Esc key. After that you can use arrow keys to navigate the grid contents again.
This behavior follows the ARIA guidelines for interactive elements within cells.
This is a typical situation where a faulty behavior in our older version of framework has become established and fixed behavior can be seen as regression depending on from which angle you look into it. If the accessibility is not a strict requirement, the Vaadin 14 behavior can be achieved in Vaadin 23/24 be repelling the focus in checkbox and pushing the focus back to Grid.
grid.setSelectionMode(SelectionMode.SINGLE);
grid.addComponentColumn(item -> {
var checkbox = new Checkbox();
checkbox.setValue(grid.getSelectedItems().contains(item));
checkbox.addValueChangeListener(e -> {
grid.select(item);
});
checkbox.addFocusListener(e -> {
grid.getElement().executeJs(
"""
setTimeout(() => {
const result = Array.from($0.$.table.getElementsByTagName('td'))
.filter(el => el.children[0].name === $1.parentElement.slot);
if (result.length > 0) result[0].focus();
}, 0);
""",
grid.getElement(), checkbox.getElement());
});
return checkbox;
}).setHeader("Select");
grid.addSelectionListener(e -> {
grid.getDataProvider().refreshAll();
});