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

[Darshan-upadhyay1110]

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:

online/browser/src/canvas/sections/URLPopUpSection.ts

Line 66 in 32996e7

const copyBtn = L.DomUtil.createWithId('div', this.copyButtonId, parent);

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.

[omkarhole]

can you please assign me ?

[Darshan-upadhyay1110]

Potential mentor @rparth07