VisuallyHidden.VisuallyHidden

Import

import { VisuallyHidden } from "@typed/ui";

Access VisuallyHidden.VisuallyHidden through the imported VisuallyHidden export. Its declaration below describes the member.

This public exposure is a re-export. Its import path is supported; declaration documentation is shared with the other public exposures below.

Signatures

export declare function VisuallyHidden<const Options extends VisuallyHiddenOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, VisuallyHiddenInternalProps>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;

Examples

import { RefSubject } from "@typed/fx";
import { html } from "@typed/template";
import { Button } from "@typed/ui/Button";
import { component } from "@typed/ui/Component";
import { VisuallyHidden } from "@typed/ui/VisuallyHidden";

export const ResetCounter = component(function* () {
  const count = yield* RefSubject.make(3);
  return html`<div>
    <p>Selected items: ${count}</p>
    ${Button({
    content: html`
      <span aria-hidden="true">×</span>
      ${VisuallyHidden({ content: "Clear selection" })}
    `,
    props: { class: "icon-action" },
    onclick: RefSubject.set(count, 0),
    })}
  </div>`;
});

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

• VisuallyHidden from @typed/ui/VisuallyHidden
• VisuallyHidden.VisuallyHidden from @typed/ui/index

Source

• packages/ui/src/VisuallyHidden.ts:73