Accessible interaction by contract

Keyboard, focus, and form behavior built in.

Lyra components document accessible names, states, and event behavior. Cross-browser checks cover core interaction patterns; applications still need to supply meaningful labels, content, and end-to-end testing.

Example

Give an interactive control an explicit accessible name.

import '@aceshooting/lyra-ui/components/lr-icon-button.js';

const action = document.createElement('lr-icon-button');
action.icon = 'search';
action.setAttribute('aria-label', 'Search'); // Translate this label in your app.
document.body.append(action);

Browse components · Read guide (English)