E-mail List Archives
Thread: [Web Component Development] How can I block the click event of the custom disabled elements?
Number of posts in this thread: 3 (In chronological order)
From:
Subject: [Web Component Development] How can I block the click event of the custom disabled elements?
No previous message | Next message →
Environment:
Testing environment
AT: NVDA 2020.4
OS: Windows 10 v2004
Development Tools and environment
Code Base: Javascript Basic, ES2015
Tools: Webpack 5, Babel 7
Hello, I'm working as an accessibility tester, in the accessibility consultant team of a social enterprise, For improving the web environment of my country.
We'll try to write the article for ways of making accessible web components and pattern libraries for web developers this year, at the Korean accessibility technology blog.
We've set the goal of making a component that easy to make for every developer because it's the first try.
The first goal is explaining to make the accessible custom buttons.
We made it almost successfully. But, one trouble holds us.
We tried to implement the disabled state on our custom button.
Style, Okay, it was easy, Manage keyboard Focus, that was easy too. But, the mouse click event trouble has been stopping us.
When the HTML native button is disabled, We can't activate it in any way.
We tried a few ways to make the disabled custom button unclickable. But, custom buttons would be clickable for web navigating mode of screen-reader such as NVDA Browse mode, and in the Internet Explorer, we can activate it even mouse button click :(
We tried the below ways.
1. added event callback that returning Boolean false
2. added the "none" value in the pointer-events CSS property.
3. added the cover element for blocking mouse click with absolute position and z-index.
Do you have any good ideas?
From: Patrick H. Lauke
Date: Tue, Mar 16 2021 4:42AM
Subject: Re: [Web Component Development] How can I block the click event of the custom disabled elements?
← Previous message | Next message →
On 16/03/2021 10:34, ë°ì
ì§ wrote:
> When the HTML native button is disabled, We can't activate it in any way.
> We tried a few ways to make the disabled custom button unclickable.
Presumably you have an actual function/handler hanging off of your
click? In that case, make the function itself check if the event target
that triggered the function is currently set to `aria-disabled`, and if
that's the case, bail out and don't execute whatever the function is
supposed to do?
function doIt(e) {
if (e.target.getAttribute('aria-disabled') == "true") {
return;
}
/* the actual thing that's supposed to happen on click */
}
P
--
Patrick H. Lauke
https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From:
Subject: Re: [Web Component Development] How can I block the click event of the custom disabled elements?
← Previous message | No next message
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.