Accessibility

Plain Elements supplies component behavior, but accessible names, content, styling, and application-level testing remain your responsibility.

What the library does

• Synchronizes ARIA attributes, such as aria-expanded, aria-controls, and aria-labelledby, as state changes.
• Implements the keyboard interaction each component needs — arrow keys, Escape, Enter / Space, and so on.
• Manages focus: moving it when content opens or closes, and restoring it to the trigger once content closes. Modal Dialog relies on the native <dialog> element’s built-in focus trapping rather than a custom implementation.

What you are responsible for

Use the documented markup

Follow the markup shown in the component examples:

• Use <dialog> for dialogs and <details> / <summary> for native accordions.
• Triggers use <button type="button"> unless another native interactive element is appropriate.
• Tabs add the ARIA tab pattern because HTML does not provide a native tab element.

Labels and descriptions

Every control needs an accessible name. Prefer visible text, and use aria-label or aria-labelledby only when a visible label is not practical.

Attributes such as data-dialog-title and data-dialog-description connect the corresponding elements automatically via aria-labelledby / aria-describedby:

<pe-dialog id="delete-project">
  <dialog>
    <h2 data-dialog-title>Delete project?</h2>
    <p data-dialog-description>This action cannot be undone.</p>
    <button type="button" data-dialog-close>Cancel</button>
    <button type="button">Delete project</button>
  </dialog>
</pe-dialog>

Tooltip content must not be required to understand or complete an action.

Keyboard and focus

Keep focus visible. Verify keyboard order and focus after content opens, closes, becomes disabled, or changes dynamically.

Application testing

• Test the complete interface with only a keyboard.
• Check names, roles, states, and relationships in the accessibility tree.
• Test the screen readers and browsers in your support matrix.
• Verify focus, zoom, contrast, reduced motion, and high-contrast modes with final CSS.