feat: add keyboard accessibility to toggle and rating fields

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Luca Oelfke 2026-02-13 14:54:49 +01:00
parent e2f5654277
commit ff6fecd39b

View file

@ -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 {