Keyboard Click

A directive that adds unified click activation via mouse, Enter, and Space keys, improving keyboard accessibility for interactive elements

Import


                                                        
                                                        
                                                            import { KeyboardClickModule } from '@backbase/ui-ang/keyboard-click-directive'

Usage

Use the bbKeyboardClick directive to emit a single bbKeyboardClick event when the host is activated by mouse click, Enter, or Space. The default usage wraps a clickable element like a button or an element with a suitable role.


                                                        
                                                        
                                                            <!-- Default usage on a button -->
                                                        <button (bbKeyboardClick)="onActivate($event)">Click me</button>
                                                        
                                                        <!-- Usage on a non-button element with a role to aid accessibility -->
                                                        <div role="button" tabindex="0" (bbKeyboardClick)="onActivate($event)">Open details</div>

Outputs

Event	Type	Description
bbKeyboardClick	EventEmitter<Event>	Emitted on mouse click, Enter, or Space activation (throttled)

Accessibility

This directive facilitates keyboard interaction by emitting activation on Enter and Space and applying a pointer cursor via the .bb-keyboard-click-directive host class. When applied to non-interactive elements, ensure to provide proper semantics:

Add role="button" (or another appropriate role) and tabindex="0"

Ensure visible focus styles are present.