Lion Button should not react to clicks when its disabled

[aghArdeshir]

This PR fixes: #2330 and is blocked by: #2353 (includes changes from this PR as well)

• exposed the wrong functionality described here: [LionButton] @click event listener is called when button has disabled and click is trigger programatically using JS .click() method #2330 in automated tests.
• Added static formAssociated = true to the LionButton which fixes the problem at hand. I don't know what is this and why it fixes the issue, but it works in both the automated test and in my manual tests. (and does not break any other test, so I assume it should be good). I first read about it here: https://webkit.org/blog/13711/elementinternals-and-form-associated-custom-elements/, and then I found some references to it in the @webcomponents/scoped-custom-element-registry from node_modules.

If I found any more information about the formAssociated, I'll share. If anyone knows what is this and why it fixes the issue, please knowledge-share 🙏

To see the diff only added in this branch in isolation, look at this commit: 4db7ab2

[changeset-bot]

⚠️ No Changeset found

Latest commit: 4db7ab2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[denilsonsa]

If I found any more information about the formAssociated, I'll share. If anyone knows what is this and why it fixes the issue, please knowledge-share 🙏

From this MDN article I got to the official HTML spec, and after navigating for a while I got to form-associated custom elements:

An autonomous custom element is called a form-associated custom element if the element is associated with a custom element definition whose form-associated field is set to true.

The name attribute represents the form-associated custom element's name. The disabled attribute is used to make the form-associated custom element non-interactive and to prevent its submission value from being submitted. The form attribute is used to explicitly associate the form-associated custom element with its form owner.

Or, in a nutshell, from my understanding of those paragraphs: the name, disabled, form and readonly attributes only have their special semantics for custom elements that are form-associated. (And the readonly attribute has a few caveats listed one paragraph later.)

---

I'd suggest you to please check all lion input fields and see if they all are form-associated. For your convenience (and your sanity), there is a list of form-associated elements