Foundations
Built-in accessibility for every component.
Sillium components include ARIA attributes, focus management, keyboard navigation, and semantic HTML out of the box so your applications meet accessibility standards without extra effort.
Overview
Every Sillium component ships with built-in accessibility features. ARIA attributes are set automatically by helpers like ValidationHelper. Focus rings adapt to variant and color through ComponentStyleHelper. Keyboard navigation follows established patterns across inputs, pickers, and overlays. Semantic HTML elements are chosen by default so assistive technology can interpret the UI correctly.
ARIA attributes
The following ARIA attributes are automatically applied by Sillium components to communicate state and relationships to assistive technology.
| Attribute | Usage |
|---|---|
| aria-invalid | Set to "true" by ValidationHelper when the field has validation errors. |
| aria-describedby | Links the input to its error message or helper text element by ID. |
| aria-label | Applied to icon-only buttons (clear, increment, decrement, action buttons) to provide an accessible name. |
| aria-hidden="true" | Applied to decorative icons and the required indicator (*) so they are ignored by screen readers. |
| aria-disabled | Set on Container and wrapper elements when the component is in a disabled state. |
| aria-expanded | Toggled on collapsible triggers such as pickers and accordions to indicate open/closed state. |
| aria-haspopup | Set on picker triggers to indicate that activating the control will display a dialog or popup. |
Focus management
GetFocusClass(Variant, Color) in ComponentStyleHelper determines the visible focus ring for every interactive component. The style adapts to variant so focus remains clearly visible on any surface.
| Variant | Focus style | Notes |
|---|---|---|
| Text | Underline focus ring (FocusRingLine) | Uses the bottom border for a subtle underline effect. |
| Filled / Outlined | Rounded focus ring (FocusRingOutlined) | Full ring around the component boundary. |
Both styles are color-palette-aware. The focus ring color is resolved through ColorPaletteRegistry so it matches the component's active color theme.
GetFocusClass implementation
Focus ring selection based on variant and color palette.
Disabled state
When a component is disabled, the focus ring is suppressed and replaced with cursor-not-allowed and reduced opacity.
Show code
Copy code
// ComponentStyleHelper.cs — GetFocusClass
public static string GetFocusClass(Variant variant, Color color)
{
var p = ColorPaletteRegistry.Resolve(color);
return variant == Variant.Text
? p.FocusRingLine // underline focus ring
: p.FocusRingOutlined; // rounded focus ring
}
// Usage in BuildInputWrapperClass
disabled ? "cursor-not-allowed opacity-70"
: GetFocusClass(variant, color)Keyboard navigation
Sillium components follow consistent keyboard interaction patterns so users can navigate without a mouse.
| Pattern | Behavior |
|---|---|
| Clear buttons | Use tabindex="-1" so they are removed from the tab order, reducing cognitive load for keyboard users. |
| TextInput / NumberInput | Handle @onkeydown for Enter submission and Arrow key value stepping (NumberInput). |
| DateTimePicker | Supports @onkeydown for picker interaction and calendar navigation. |
| Modal / Drawer | Escape key closes the overlay. |
Semantic HTML
Components render semantically correct HTML elements by default so the document structure is meaningful to assistive technology.
| Component | Pattern |
|---|---|
| FormField | Uses <label for=""> to associate label text with the input element. |
| Text | Renders h1-h6 tags based on the Typo level for proper document outline. |
| Blockquote | Uses <footer> and <cite> elements for attribution. |
| Boolean HTML attributes | Conditionally rendered (only present when true) to avoid invalid markup. |
Color contrast
The palette contrast system ensures readable text on every background by providing dedicated text color tokens per variant.
| Token | Purpose |
|---|---|
| TextOnFilled | Light text used on dark or saturated filled backgrounds for maximum contrast. |
| TextOnOutlinedOrText | Dark text used on light outlined or text-variant backgrounds. |
The OKLCH shade system ensures perceptual contrast across all generated color palettes, maintaining readability regardless of hue or saturation.
File reference
| File | Responsibility |
|---|---|
| Utilities/ValidationHelper.cs | AriaInvalid, DescribedBy — resolves aria-invalid and aria-describedby based on validation state. |
| Helpers/ComponentStyleHelper.cs | GetFocusClass — resolves focus ring style based on variant and color palette. |