refactor(button): update click handling and aria attributes for better accessibility
This commit is contained in:
@@ -17,7 +17,9 @@ export type ButtonVariant =
|
||||
styleUrl: './button.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
host: {
|
||||
'[class]': 'hostClass()'
|
||||
'[class]': 'hostClasses()',
|
||||
'[attr.aria-disabled]': 'disabled()',
|
||||
'(click)': 'onHostClick($event)'
|
||||
}
|
||||
})
|
||||
export class ButtonComponent {
|
||||
@@ -26,6 +28,9 @@ export class ButtonComponent {
|
||||
readonly disabled = input(false);
|
||||
readonly hostClass = input<string>('');
|
||||
readonly buttonClass = input<string>('');
|
||||
protected readonly hostClasses = computed(() =>
|
||||
[this.hostClass(), this.disabled() ? 'app-button--disabled' : ''].filter(Boolean).join(' ')
|
||||
);
|
||||
|
||||
protected readonly buttonClasses = computed(() => {
|
||||
const variants: Record<ButtonVariant, string> = {
|
||||
@@ -40,4 +45,14 @@ export class ButtonComponent {
|
||||
|
||||
return ['btn', variants[this.variant()], this.buttonClass()];
|
||||
});
|
||||
|
||||
protected onHostClick(event: Event): void {
|
||||
if (!this.disabled()) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user