online icon indicating copy to clipboard operation
online copied to clipboard

A11y: Replace all <div role="button"> usages with semantic <button> elements

Open Darshan-upadhyay1110 opened this issue 7 months ago • 2 comments

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") and tabindex for focus.
  • Keyboard users may face inconsistent behavior if Enter/Space key 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 .buttonReset utility 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.

Darshan-upadhyay1110 avatar May 23 '25 12:05 Darshan-upadhyay1110

can you please assign me ?

omkarhole avatar Nov 27 '25 07:11 omkarhole

Potential mentor @rparth07

Darshan-upadhyay1110 avatar Nov 30 '25 13:11 Darshan-upadhyay1110