We are proud to say we have developed a scanning tool that is open to the community and free to use. We called this as
react-scannable and is available to be downloaded from npm as a package.
What is react-scannable?
React-scannable provides a scanner, that means a React Component that explores their scannable children (buttons, divs, other components), and allows the app to interact with them in a new way.
What does react-scannable do?
Once a scanner is active, it iterates over those elements that have been identified as scannable and lets them execute actions when they get focused on the screen.
The objective is to extend the relationship between the user and the application, allowing another way of interaction.
By the moment this post was written,
react-scannable has two interaction methods: automatic and manual.
Automatic method iterates over scannable elements in sequence periodically. Once you press any key (or click on the screen) the focused scannable element is selected and scanner will iterate over scannable elements within it or delegate the event to the element if it doesn’t have any scannable children.
Manual method behavior is quite different. It iterates over scannable elements when the user presses space/tab keys and selects them if the user presses enter/backspace keys.
Even if you are in automatic or manual method, the user can deactivate scanner by pressing Escape four times.
Cboard and react-scannable
Cboard uses react-scannable to implement scanner feature just to scan the entire board.
Users that use a switch to interact with applications can communicate as any other user does.
This is very important because it allows handicapped people to interact with the board as usual.
Why a npm package?
We want people to be involved in this, using react-scannable in their apps, extending the way their applications interacts with users.
We also encourage people to report the issues they have (and promote fixes to them if its possible), and of course, to develop new features (why not a new strategy/method).