structure — wyrd.component.visually-hidden
Utility primitive that hides content visually while preserving it for assistive technology.
Install @wyrd-company/react or the Flutter package and use it directly —
your DESIGN.md does the styling.
$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity: name: VisuallyHidden tag: wyrd-visually-hidden package: wyrd.component.visually-hidden title: Visually Hidden summary: Utility primitive that hides content visually while preserving it for assistive technology.relationships: related-to: - quality-parity-and-gatesclassification: category: structure composition: single-slot interactive: falsetarget-strategy: react: required flutter: requiredsurface: properties: [] slots: - name: content content: true required: true cardinality: one-or-many accepts: - content - component summary: Content hidden visually but preserved in the accessibility tree. events: [] states: - name: default source: platform summary: Content is visually hidden and remains available to assistive technology. parts: - name: root summary: Visually hidden content wrapper. slots: - contentmessages: []obligations: accessibility: role: none keyboard: [] semantics: - Content is hidden visually but fully exposed to assistive technology. - Does not use display none or visibility hidden. behavior: model: stateless interactions: [] hostEffects: [] conditions: - rtl - density-compact - text-expansion sdui: status: serializable serializableProperties: [] serializableSlots: - content eventBindings: [] notes: Visually Hidden serializes its content slot and no properties.examples: - name: default state: default properties: {} slots: content: Additional context for assistive technology.overrides: react: slots: content: children flutter: slots: content: child
Generated from the contract's examples block.
Previews are the published @wyrd-company/react component, themed by the
brand's role tokens — flip the site's light/dark toggle and they follow.
import { WyrdVisuallyHidden } from "@wyrd-company/react";
<WyrdVisuallyHidden>
Additional context for assistive technology.
</WyrdVisuallyHidden>import 'package:wyrd_flutter/wyrd_flutter.dart';
WyrdVisuallyHidden(
child: Text('Additional context for assistive technology.'),
)| Slot | Cardinality | Accepts | Summary |
|---|---|---|---|
content | one-or-many | content, component | Content hidden visually but preserved in the accessibility tree. |
| State | Source | Summary |
|---|---|---|
default | platform | Content is visually hidden and remains available to assistive technology. |
From the contract's accessibility obligations. Role none
Status: serializable. Visually Hidden serializes its content slot and no properties.
| Serializable | Members |
|---|---|
| Properties | — |
| Slots | content |
| Events | — |