WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [Web Component Development] How can I block the click event of the custom disabled elements?

for

From: Date: Mar 16, 2021 8:12PM

Thank you for replying to my question, Patrick.
I can't assure you I understood your question enough because I'm not good at English.

Well, your question is correct almost with my intention if I understood correctly.

We want to make nobody can't click when the custom button's "aria-disabled" attribute value is true even if elements are listening to any click events, like just the native button and Input tags of HTML.

I've been designed a button object instance for reusable based on the ES6 class. it has the "disabled" setter and getter property.

Getter checks the "aria-disabled" attribute value equals "true" and returns boolean.

Setter receives the boolean value. If it received "true" boolean, it set aria-disabled="true" and removes "tabindex", if it false, add the tabindex="0" and set aria-disabled="false".

The "disabled" state is initialized using the "disabled" setter when the instance is created by checking the "disabled" getter property.

We want to block all click events at all created buttons using this instance if has the aria-disabled="true" attribute.

I intend to prevent unexpected bugs and unintended user interactions.