✨ Feature Request
Description
Improve the accessibility of the filter chips by enabling keyboard interaction. Users should be able to navigate to filter chips using the Tab key and toggle them using the Enter or Space keys.
Problem it Solves
Currently, the filter chips are primarily optimized for mouse users. Keyboard-only users or those using assistive technologies may struggle to select or deselect filters, which is a significant barrier to using the application effectively.
Proposed Solution
- HTML/Accessibility Attributes: Ensure all interactive filter chips are focusable. If they are not natively focusable elements (like
<button>), add tabindex="0" and appropriate ARIA roles (e.g., role="checkbox" or role="button").
- JavaScript Event Handling: Attach a
keydown listener to the filter chips to intercept keyboard input:
chip.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault(); // Prevents page jumping down on Spacebar
chip.click(); // Programmatically trigger the click logic
}
});
Visual Feedback: Update the CSS to ensure that :focus or :focus-visible states provide a clear visual indicator (like a high-contrast border or outline) so the user knows which filter is currently active/focused.
###Alternatives Considered
Wrapping in a form: While semantically correct, it would require a significant refactor of the existing JS logic. Keeping the current structure and enhancing it with ARIA/keyboard listeners is cleaner.
###Additional Context
This directly improves the project's compliance with WCAG (Web Content Accessibility Guidelines) and ensures that all students—regardless of how they browse the web—can effectively use the GSoC Org Finder.
✨ Feature Request
Description
Improve the accessibility of the filter chips by enabling keyboard interaction. Users should be able to navigate to filter chips using the
Tabkey and toggle them using theEnterorSpacekeys.Problem it Solves
Currently, the filter chips are primarily optimized for mouse users. Keyboard-only users or those using assistive technologies may struggle to select or deselect filters, which is a significant barrier to using the application effectively.
Proposed Solution
<button>), addtabindex="0"and appropriate ARIA roles (e.g.,role="checkbox"orrole="button").keydownlistener to the filter chips to intercept keyboard input:Visual Feedback: Update the CSS to ensure that :focus or :focus-visible states provide a clear visual indicator (like a high-contrast border or outline) so the user knows which filter is currently active/focused.
###Alternatives Considered
Wrapping in a form: While semantically correct, it would require a significant refactor of the existing JS logic. Keeping the current structure and enhancing it with ARIA/keyboard listeners is cleaner.
###Additional Context
This directly improves the project's compliance with WCAG (Web Content Accessibility Guidelines) and ensures that all students—regardless of how they browse the web—can effectively use the GSoC Org Finder.