Disable Non-Interactive Mouse Listeners for Accessibility (NVDA and Screen Readers Issue)

Need help
1

:triangular_flag: Problem: Accessibility Barrier for Screen Readers Users (NVDA)

Currently, the Bubble framework applies mousedown, mouseup, and mousemove event listeners to all elements by default, even when they are not interactive.

This behavior causes a critical issue for users of screen readers like NVDA (NonVisual Desktop Access):
:collision: The screen reader incorrectly announces non-interactive elements (such as headings, paragraphs, and plain text) as “Clickable”.

:magnifying_glass_tilted_left: Root Cause Analysis:

  • Bubble’s run.js attaches mouse-related listeners globally to the main container (.bubble-element.Page...) and to internal elements (h1, p, div, span, etc.).
  • These listeners exist regardless of whether the elements have workflows or actions associated with them.
  • Screen readers like NVDA detect the presence of mouse event listeners and assume the element is interactive, leading to incorrect semantic interpretation.

:black_flag: Impact:

  • :warning: This violates key WCAG (Web Content Accessibility Guidelines) principles.
  • :warning: Severely impacts the user experience for blind or visually impaired users relying on screen readers.
  • :warning: Even if a Bubble developer explicitly marks an element as non-clickable (without workflows), the issue persists because the event listeners are still present at the framework level.

:stop_sign: Workarounds Attempted (All Failed):

  • :white_check_mark: CSS (pointer-events: none) — does not prevent the NVDA from announcing “clickable”.
  • :white_check_mark: JavaScript (stopPropagation, removeEventListener) — ineffective due to anonymous listeners attached by the Bubble framework in run.js.
  • :white_check_mark: Monkey patching addEventListener globally — works partially but introduces risks and side effects to the app’s functionality.

:white_check_mark: Proposed Solution:

:wrench: Add a Page-Level Setting (or Element-Level Setting):

“Disable Non-Interactive Mouse Listeners for Accessibility”
When enabled, this option should prevent Bubble from attaching mousedown, mouseup, and mousemove listeners to elements that do not have workflows or interactive actions attached.

:bullseye: This feature would:

  • :white_check_mark: Significantly improve screen reader behavior (NVDA stops announcing “clickable” on non-interactive content).
  • :white_check_mark: Align Bubble apps with WCAG standards.
  • :white_check_mark: Provide better user experiences for visually impaired users.
  • :white_check_mark: Reduce the need for risky JavaScript hacks to force accessibility compliance.

:rocket: Suggested Implementation Options:

  1. Global toggle at the page level:

[ ] Disable non-interactive mouse listeners for accessibility

  1. Or smarter internal detection:

Only apply mouse listeners if the element has workflows, conditionals, or dynamic actions attached.

:sparkling_heart: Call to Action:

This feature would be a huge step towards making Bubble apps more accessible by design, supporting inclusivity and adherence to accessibility best practices.

I encourage the Bubble team to prioritize this, as it affects not only developer experience but also the experience of thousands of end-users who rely on assistive technologies.

:folded_hands: If you are a community member who agrees with this request, please comment below or like this post to give it visibility. Let’s push accessibility forward together!