bug: Disabled gcds-button Emits Event When Activated via Keyboard Navigation (Enter Key)

[Garry-08]

Prerequisites | Prérequis

• I have read the Contributing Guidelines. | J’ai lu les Lignes directrices sur les contributions.
• I agree to follow the Code of Conduct. | J’accepte de me conformer au Code de conduite.
• I have searched for existing issues that already report this problem, without success. | J’ai vérifié parmi les tickets (issues) existants que ce sujet n’avait pas déjà été soumis.

GC Design System Components Package and Version | Paquet et version des composants de Système de design GC

cdssnc/gcds-components-vue, version 0.26.2

Current Behavior | Comportement observé

Expected Accessibility Behavior: A disabled gcds-button is focusable for screen readers, which is correct.
But the Issue is in:
Despite the :disabled="region?.isUsed" condition being true, pressing the EnterKey while focusing the disabled button via keyboard navigation still triggers the @gcdsClick event.

Clicking the same button with a mouse does not emit the event, which is the correct behavior.

Expected Behavior | Comportement attendu

Event Behavior: A disabled button should not emit events regardless of how it is interacted with (Tab + Enter or mouse click).

System Info | Information sur le système

Browser: Chrome, Edge
Operating System: Windows 10
IDE: IntelliJ IDEA
Node.js Version: v20.12.2
npm Version: 10.5.0

Steps to Reproduce | Étapes pour reproduire le bogue

<gcds-button
  button-id="delete-button"
  button-role="danger"
  size="small"
  :disabled="region?.isUsed"
  @gcdsClick="openModal"
>
  Delete
</gcds-button>

Code Reproduction URL | URL de reproduction du code

No response

Additional Information | Informations supplémentaires

Improvement Suggestion: Visually differentiate the focused state of disabled buttons (e.g., different border color or opacity) as currently it is same as the enabled button.

[dfo-proto]

@ethanWallace following up on the improvement suggestion. Accessibility best practice is to remove disabled controls from the focus order, to align with the native web behavior of the disabled attribute. I'm wondering if your team encountered something different.

~Oyin

[daine]

@dfo-proto Hi Oyin, we will bring the feedback to the team as it is a design improvement, we'll see how we can iterate on it and provide a better accessible experience. We'll work on that item (i.e. different pull request/release) separate from the reported bug behaviour. Thanks for following up!

cc @SmartMouthWords @adorayi FYI