igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
50 lines (49 loc) • 1.48 kB
TypeScript
import { LitElement } from 'lit';
/**
* A utility component that visually hides its content while keeping it
* accessible to screen readers and other assistive technologies.
*
* The content is only visible when it receives focus, making it ideal for
* skip navigation links and other focus-based accessibility patterns.
*
* @element igc-visually-hidden
*
* @slot - Default slot for the visually hidden content.
*
* @example
* ```html
* <!-- Hide a label visually while keeping it accessible -->
* <igc-visually-hidden>
* <label for="search">Search</label>
* </igc-visually-hidden>
* <input id="search" type="search" placeholder="Search..." />
* ```
*
* @example
* ```html
* <!-- Skip navigation link that becomes visible on focus -->
* <igc-visually-hidden>
* <a href="#main-content">Skip to main content</a>
* </igc-visually-hidden>
* ```
*
* @example
* ```html
* <!-- Provide additional context for icon-only buttons -->
* <button>
* <igc-icon name="close"></igc-icon>
* <igc-visually-hidden>Close dialog</igc-visually-hidden>
* </button>
* ```
*/
export default class IgcVisuallyHiddenComponent extends LitElement {
static readonly tagName = "igc-visually-hidden";
static styles: import("lit").CSSResult;
static register(): void;
protected render(): import("lit-html").TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
'igc-visually-hidden': IgcVisuallyHiddenComponent;
}
}