fix: prevent keyboard focus on disabled BdsButton

[Copilot]

Disabled buttons remained in the tab order, allowing keyboard focus despite click handlers being blocked. This created UX inconsistency where users could tab to visually disabled buttons.

Changes

• Component: Set focus div tabindex to conditional {this.disabled ? '-1' : '0'} instead of static "0"
• Tests: Added 12 tests covering keyboard navigation, form submission, and tabindex behavior for disabled state

// Before
<div tabindex="0" onKeyDown={(ev) => this.handleClick(ev)} class="focus"></div>

// After
<div tabindex={this.disabled ? '-1' : '0'} onKeyDown={(ev) => this.handleClick(ev)} class="focus"></div>

Disabled buttons now properly removed from tab order per WCAG guidelines.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>feat: do not execute the handleclick function when BdsButton is disabled.</issue_title>
<issue_description>Is your feature request related to a problem? Please describe. Atualmente, o componente BdsButton ainda dispara o evento handleClick mesmo quando a propriedade disabled está definida como true. Isso causa execuções indesejadas de lógica de negócio (como submissão de formulários ou chamadas de API) quando o botão deveria estar visualmente e funcionalmente inativo, gerando frustração e bugs de interface.

Describe the solution you'd like Gostaria que a função interna que gerencia o clique no componente verifique o estado da propriedade disabled. Se disabled for verdadeiro, a função handleClick não deve ser executada e o evento deve ser interrompido.

Describe alternatives you've considered A alternativa atual é adicionar uma verificação manual de if (disabled) return; em cada função de clique definida no projeto, mas isso fere o princípio de encapsulamento do Design System e aumenta a repetição de código desnecessário.

Design System Component BdsButton

Figma Link(s) [Inserir link do Figma aqui]

Is this about an existing component or a new one? - [x] Update to an existing component

[ ] New component creation

Additional context É importante garantir que o atributo HTML disabled também seja aplicado ao elemento nativo para acessibilidade (leitores de tela), além da trava na função de JavaScript/TypeScript.

🛠️ Implementation Notes (for developers and AI Agents) - DO NOT REMOVE
Use the provided Figma links with the Figma MCP tools to inspect and extract component details before starting implementation.

All implemented or updated components must include Storybook stories that demonstrate every possible state of the component.

Try to consolidate stories into a single story page when feasible, using controls or variants to show multiple states.</issue_description>

<agent_instructions>Contexto:
O componente BdsButton está disparando o onClick (ou handleClick) mesmo quando a prop disabled está como true. Preciso corrigir esse vazamento de execução.

Tarefa:
Refatore o componente funcional BdsButton em React para bloquear qualquer ação de clique quando desabilitado.

Requisitos Técnicos:

Interceptação do Evento: No handler de clique (ex: handleClick), adicione um check inicial: if (disabled) return;.

Referência ao DOM: Certifique-se de que a prop disabled seja repassada para o elemento HTML . Isso é vital para que o navegador desative interações nativas e seletores CSS como :disabled.

Tipagem (TypeScript): Garanta que a interface de Props inclua disabled?: boolean e que o tipo do evento seja React.MouseEvent.

Acessibilidade (A11y): Aplique aria-disabled={disabled} para suporte a tecnologias assistivas.

Teste Unitário (Vitest/Jest + RTL): * Crie um teste que renderize o botão com disabled={true}.

Passe uma função vi.fn() ou jest.fn() no onClick.

Simule o clique usando fireEvent.click ou userEvent.click.

Alerte o teste para falhar se a função for chamada (toHaveBeenCalled()).

Exemplo de estrutura esperada:

TypeScript
const BdsButton: React.FC = ({ onClick, disabled, children, ...props }) => {
const handleClick = (event: React.MouseEvent) => {
if (disabled) {
event.preventDefault();
return;
}
onClick?.(event);
};

return (
<button
{...props}
disabled={disabled}
aria-disabled={disabled}
onClick={handleClick}
>
{children}

);
};
Dica de ouro para o Copilot:
Se o seu BdsButton for um Wrapper de algum outro componente (como um button estilizado via Styled Components ou Tailwind), peça ao Copilot para:

"Certifique-se de que a propriedade pointer-events: none seja adicionada ao CSS do botão quando disabled for true, para evitar que estados de hover e cliques de mouse sejam registrados visualmente."</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes feat: do not execute the handleclick function when BdsButton is disabled. #1127

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.