feat: add keyboard accessibility to toggle and rating fields
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
e2f5654277
commit
ff6fecd39b
1 changed files with 22 additions and 0 deletions
|
|
@ -135,6 +135,15 @@ function renderToggle(
|
|||
const toggle = controlEl.createDiv({ cls: 'checkbox-container' });
|
||||
if (enabled) toggle.addClass('is-enabled');
|
||||
|
||||
toggle.setAttribute('tabindex', '0');
|
||||
toggle.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||
if (e.key === ' ' || e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
enabled = !enabled;
|
||||
toggle.toggleClass('is-enabled', enabled);
|
||||
}
|
||||
});
|
||||
|
||||
toggle.addEventListener('click', () => {
|
||||
enabled = !enabled;
|
||||
toggle.toggleClass('is-enabled', enabled);
|
||||
|
|
@ -531,6 +540,19 @@ function renderRating(
|
|||
updateStars();
|
||||
});
|
||||
|
||||
ratingEl.setAttribute('tabindex', '0');
|
||||
ratingEl.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||
if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
rating = Math.min(5, rating + 1);
|
||||
updateStars();
|
||||
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
rating = Math.max(1, rating - 1);
|
||||
updateStars();
|
||||
}
|
||||
});
|
||||
|
||||
updateStars();
|
||||
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in a new issue