3.0.0 • Published 4 years ago
@19h47/radios
Usage
HTML
<div class="js-radios" role="radiogroup">
<div class="js-radio" aria-checked="true" tabindex="0" role="radio">
<span>Option 1</span>
<input type="radio" id="option_1" name="option" value="option_1" checked style="display: none;">
</div>
<div class="js-radio" aria-checked="false" tabindex="-1" role="radio">
<span>Option 2</span>
<input type="radio" id="option_2" name="option" value="option_2" style="display: none;">
</div>
</div>
JavaScript
const element = document.querySelector('.js-radios');
const radios = new Radios(element);
radios.init();
With events
import Radios from '@19h47/radios';
const element = document.querySelector('.js-radios');
const radios = new Radios(element);
radios.inputs.map(input => {
input.addEventListener('Radio.activate', event => {
const { detail: { element } } = event;
console.log(item);
});
});
Keyboard Support
Key | Function |
---|
Tab | Moves keyboard focus to radiogroup. |
Arrow | Moves up and down radio options. |
Home | Move to first input. |
End | Move to last input. |
ARIA Roles, Properties and States
Role | Property/State | Usage |
---|
Radiogroup | | Identify div as a container for radios |
Radio | aria-checked | Indicate state of radio:- Checked (e.g. aria-checked=true)- Unchecked (e.g. aria-checked=false) |
aria-labelledby | | Used to identify radio group |
Events
Event | Arguments | Description |
---|
Radio.activate | event | |