The component is really great. We have been using it for some time. But it turns out (notifications from our blind users) that it is completely invisible to screen readers (eg. NVDA), and it is impossible to tick its value by the blind. There is of course a way to select this field via keyboard but screen readers say nothing about this field because the internal checkbox field takes this focus and there is no aria-label, no title on it. So the user doesn’t know when he is about to use the keyboard to tick the value. Setting aria-label on the root tag is not enough because the root tag takes no focus. We can set tabindex to it, but then user thinks he can set the value via keyboard, but no, because focus is not on the checkbox. And so on.
I’ve reported this to Vaadin, but they said “vcf-togglebutton is an add-on, not an official Vaadin component, and so not covered by our maintenance”. And it won’t be included in theirs a11y improvement initiative (accessibility improvements started in Vaadin 22).
We managed to somehow improve the ToggleButton, i.e. through javascript take the keyevent to the space key when focus is on the root tag and set the checkbox value on / off. And it works. But it is a hack way in javascript to take shadow element (this.shadowRoot.querySelector('vaadin-checkbox')).
So IMO the better way is not to use ToggleButton any more (unless Vaadin adjusts it ;), and use normal vaadin-checkbox field but with some theme styling proposed in this issue:
https://github.com/vaadin/web-components/issues/893
It works! And it is only checkbox so we get all its features out-of-the-box (its visible for screen readers, focusable, operated by the keyboard, etc.)