online
online copied to clipboard
A11y: Replace all <div role="button"> usages with semantic <button> elements
Body:
Across the codebase, we currently use <div role="button" in multiple places to simulate button behavior. This approach requires extra accessibility attributes and manual keyboard interaction handling.
Accessibility Issues:
- Non-semantic elements like
<div>require ARIA roles (role="button") andtabindexfor focus. - Keyboard users may face inconsistent behavior if
Enter/Spacekey handlers aren't fully implemented. - Screen readers may not always interpret them correctly, depending on platform and implementation.
Example place where currently we: https://github.com/CollaboraOnline/online/blob/32996e7405ad606c78a246528f6e26d23dac7dea/browser/src/canvas/sections/URLPopUpSection.ts#L66
Proposed Improvement:
- Replace all
<div role="button">(and similar) elements with native<button>elements. - Ensure CSS adjustments are made to preserve the original appearance (e.g., use a
.buttonResetutility class or similar). - Test for visual and functional parity.
Benefits:
- Improved accessibility out-of-the-box (keyboard navigation, focus, screen reader support).
- Cleaner, more maintainable code with reduced reliance on ARIA and manual event handling.
- Helps ensure WCAG compliance and better UX for all users.
can you please assign me ?
Potential mentor @rparth07