fix(gcds-button): Prevent gcdsClick event if button is disabled

[ethanWallace]

Summary | Résumé

As mentioned in #720, the gcdsClick event will still fire even after the button has been disabled. Previous work has been made that will prevent HTML form submissions if the button is disabled but preventing the gcdsClick event from emitting when disabled will allow easier use in applications.

[melaniebmn]

LGTM

[daine]

Is it possible to add a test for the fix?

[melaniebmn]

LGTM

[daine]

While testing, I'm able to confirm that it does not fire gcdsClick anymore, however I think I'm still able to click on a disabled button?

Tested by adding this script on the index.html page in src/index.html:

    const button = document.getElementById('myButton');
    button.addEventListener('click', () => {
      console.log("Button was clicked!");
    });

similar to how I verify that gcdsClick doesn't get emitted

    const container = document.querySelector('body'); // or any specific container

    container.addEventListener('gcdsClick', (e) => {
      console.log(`Event gcdsClick was emitted by`, e.target, 'with details:', e.detail);
    });

here is my html:

      <gcds-heading tag="h2">Buttons</gcds-heading>
      <gcds-button button-role="primary">Primary</gcds-button>
      <gcds-button button-role="secondary">Secondary</gcds-button>
      <gcds-button button-role="danger">Danger</gcds-button>
      <gcds-button id="myButton" disabled>Click me!</gcds-button>

🤔 any ideas why?

[ethanWallace]

@daine With the HTML that is rendered in the gcds-button component, we chose to use aria-disabled instead of the disabled attribute to allow users to still focus the button and not have the button disappear from the document flow completely. We do some additional logic on our side to make the button behave as it would if it was just using the disabled attribute but that does mean the native HTML events will still happen because the button is still kind of recognized as active by the browser.