accessible-dropdown
v1.1.1
Published
accessible dropdown
Downloads
19
Readme
accessible-dropdown
Why?
Till date, there is no way to style native <select>/<option>
.
I have tweeted to all the major browser vendors way back in 2013.
For example, there is no way to display a flag against the country name option. Something like the image below.
Why this library?
It's not difficult to create something with above image with HTML, CSS, and JavaScript.
So, whats the big deal with this library?
It takes care of the following just like native select/option, out of the box for you
- up/and down key press
page up
,page down
,home
andend
key press- respects
space
andenter
keypress along withclick
- typing option, for example, you can type
- 'India' (case-insensitive) to select 'India'
- 'Den' (case-insensitive) to select 'Denmark'
- 'Xyz' (case-insensitive) to select the first option that starts with 'Xyz' (case-insensitive)
- complete mouse interaction
- resolves race condition between mouse and key board interaction
- mouse over an option, followed by key press
- scroll the option list, followed by key press
- Manually tested with VoiceOver/Mac, JAWS/Windows, NVDA/Windows
- 100% code coverage against Chrome, Firefox and IE
Demo
Check out http://sarbbottam.github.io/accessible-dropdown/
Usage
npm i accessible-dropdown -S
var Dropdown = require('accessible-dropdown');
// refer the following files for sample templates
// https://github.com/sarbbottam/accessible-dropdown/blob/master/src/template.js
// https://github.com/sarbbottam/accessible-dropdown/blob/master/example/template-with-flag.js
// https://github.com/sarbbottam/accessible-dropdown/blob/master/example/template-with-flag-composite.js
var Template = require('./path/to/template');
var dropdown;
var selectNode = document.getElementById('select');
var optionNodeList = Array.prototype.slice.call(selectNode.options);
var optionList = [];
optionNodeList.forEach(function(optionNode) {
optionList.push(optionNode.innerHTML.toLowerCase().trim());
});
countryDropdown = new Dropdown({
selectNode: selectNode,
optionList: optionList,
css : {
hide : 'hide',
pseudoSelect: 'pseudo-select drop-down',
pseudoSelectFocus: 'pseudo-select-focus',
options: 'options'
}
});
countryDropdown.init();
selectNode.addEventListener('change', function(e) {
/*
* do what ever you want to do ...
*/
});
Refer example folder for working example.
Note
This works in mobile too, but don't use it if you care about your users, native option/picker is much more usable.
License
MIT © Sarbbottam Bandyopadhyay