@reaktly-js/tone-accessibility
Version:
A vanilla JS Accessability Widget compliant with ADA and WCAG 2.2.
44 lines (43 loc) • 1.67 kB
TypeScript
import { ToneWebComponentLifecycle } from '../../utils/ToneWebComponentLifecycle';
/**
* @class FAB
* @extends HTMLElement
* @description A custom element for the floating action button (FAB) that opens the accessibility menu.
*
* @fires tone-fab-click - Dispatched when the button is clicked.
*
* @property {boolean} active - Reflects the active state of the button (e.g., when the menu is open).
* @property {string} position - Sets the position of the FAB ('bottomLeft', 'bottomRight', 'centerLeft', 'centerRight').
*/
export declare class FAB extends HTMLElement implements ToneWebComponentLifecycle {
private shadow;
private buttonElement;
private _active;
private _position;
constructor();
static get observedAttributes(): string[];
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
connectedCallback(): void;
disconnectedCallback(): void;
get active(): boolean;
set active(value: boolean);
get position(): 'bottomLeft' | 'bottomRight' | 'centerLeft' | 'centerRight';
set position(value: 'bottomLeft' | 'bottomRight' | 'centerLeft' | 'centerRight');
private applyPositionClass;
/**
* Toggles the active state of the FAB.
* This method might be called externally to open/close the menu.
*/
toggle(): void;
/**
* Handles the click event on the FAB itself.
* Dispatches an event to notify the main app to toggle the menu.
*/
private handleClick;
/**
*
* @param event The CustomEvent with detail.isOpen indicating the menu's new state.
*/
private handleMenuToggle;
private render;
}