vaadin-component-factory / vcf-toggle-button Goto Github PK
View Code? Open in Web Editor NEWVaadin Component Factory Toggle Button.
Home Page: https://vcf-toggle-button.netlify.com/
License: Apache License 2.0
Vaadin Component Factory Toggle Button.
Home Page: https://vcf-toggle-button.netlify.com/
License: Apache License 2.0
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:
vcf-toggle-button
: 1.0.3First version implementation.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.