vaadin-component-factory / vcf-toggle-button

Vaadin Component Factory Toggle Button.

<vcf-toggle-button>

Demo

https://vcf-toggle-button.netlify.com/

Installation

Install vcf-toggle-button:

npm i @vaadin-component-factory/vcf-toggle-button --save

Usage

Once installed, import it in your application:

import '@vaadin-component-factory/vcf-toggle-button';

And use it:

<vcf-toggle-button></vcf-toggle-button>

Attributes

• label: Provide a label for the toggle button.
• checked: Changes the state of toggle button to "on".
• disabled: Disables the toggle button.

Event

• change: Fires whenever the state of the toggle button is changed:

document.querySelector('vcf-toggle-button').addEventListener('change', e => {
  console.log(e.detail.checked);
});

Running demo

1. Fork the vcf-toggle-button repository and clone it locally.

2. Make sure you have npm installed.

3. When in the vcf-toggle-button directory, run npm install to install dependencies.

4. Run npm start to open the demo.

Contributing

To contribute to the component, please read the guideline first.

License

Apache License 2.0

vcf-toggle-button's Issues

Toggle slider looks off with V23

The slider looks a few pixels too big and is not centered within the slit:

Attached project with a single view containing the component.
basic.zip.

Versions:

• Vaadin 23.0.3
• vcf-toggle-button: 1.0.3

vcf-toggle-button

First version implementation.

Accessibility for screen readers

This component is (IMO) commonly used. We're using it (Vaadin 22) and it's great. After all, toggle is one of the important elements of the UI interface.
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.
We managed to somehow improve it, i.e. through javascript set 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')).

I think it would be very nice to add this component to the list of changes regarding accessibility, which were started with Vaadin 22 :)
https://vaadin.com/blog/upcoming-accessibility-improvements