lustre_stylish - v1.0.0

lustre/stylish/region

Accessibility landmarks for screen readers and assistive technologies.

This module provides attributes that mark regions of your page with semantic meaning, helping users of assistive technology navigate your app.

Landmarks

Headings

Live Regions

Example

import lustre_stylish as el
import lustre/stylish/region

el.column([region.main_content], [
  el.el([region.heading(1)], el.text("Welcome")),
  el.paragraph([], [el.text("Main content here...")]),
])

Values

announce

</> 
pub const announce: @internal Attribute(i, j)

Screen readers will announce changes to this element.

Useful for status messages that update dynamically.

el.el([region.announce], el.text(status_message))

announce_urgently

</> 
pub const announce_urgently: @internal Attribute(k, l)

Screen readers will interrupt and announce changes urgently.

Use sparingly for critical alerts.

el.el([region.announce_urgently], el.text(error_message))

aside

</> 
pub const aside: @internal Attribute(e, f)

Mark this element as complementary/aside content.

el.column([region.aside], sidebar_content)

description

</> 
pub fn description(
  label: String,
) -> @internal Attribute(@internal Aligned, msg)

Add an aria-label description to this element.

import lustre/attribute

el.el([region.description("Close dialog")], close_button)
</> 
pub const footer: @internal Attribute(g, h)

Mark this element as footer content.

el.row([region.footer], footer_links)

heading

</> 
pub fn heading(
  level: Int,
) -> @internal Attribute(@internal Aligned, msg)

Mark this element as a heading at the specified level (1-6).

This will wrap the content in an appropriate heading tag when possible.

el.el([region.heading(1)], el.text("Page Title"))
el.el([region.heading(2)], el.text("Section"))

main_content

</> 
pub const main_content: @internal Attribute(a, b)

Mark this element as the main content of the page.

el.column([region.main_content], main_page_content)
</> 
pub const navigation: @internal Attribute(c, d)

Mark this element as a navigation region.

el.row([region.navigation], navigation_links)
✨ Search Document