React Aria Visually Hidden

import { VisuallyHidden, useVisuallyHidden } from "@react-aria/visually-hidden";
import type { VisuallyHiddenProps, VisuallyHiddenAria } from "@react-aria/visually-hidden";

const { VisuallyHidden, useVisuallyHidden } = require("@react-aria/visually-hidden");

import React from "react";
import { VisuallyHidden, useVisuallyHidden } from "@react-aria/visually-hidden";

// Using the component
function SkipLink() {
  return (
    <VisuallyHidden isFocusable>
      <a href="#main">Skip to main content</a>
    </VisuallyHidden>
  );
}

// Using the hook
function CustomHiddenElement() {
  const { visuallyHiddenProps } = useVisuallyHidden({
    isFocusable: true
  });
  
  return (
    <div {...visuallyHiddenProps}>
      Screen reader only content
    </div>
  );
}

/**
 * VisuallyHidden hides its children visually, while keeping content visible
 * to screen readers.
 */
function VisuallyHidden(props: VisuallyHiddenProps): JSX.Element;

import { VisuallyHidden } from "@react-aria/visually-hidden";

// Basic hidden content
<VisuallyHidden>
  <span>This text is hidden visually but available to screen readers</span>
</VisuallyHidden>

// Focusable hidden content (like skip links)
<VisuallyHidden isFocusable>
  <a href="#main">Skip to main content</a>
</VisuallyHidden>

// Custom element type
<VisuallyHidden elementType="span">
  <input type="checkbox" />
</VisuallyHidden>

/**
 * Provides props for an element that hides its children visually
 * but keeps content visible to assistive technology.
 */
function useVisuallyHidden(props: VisuallyHiddenProps = {}): VisuallyHiddenAria;

import { useVisuallyHidden } from "@react-aria/visually-hidden";

function CustomComponent() {
  const { visuallyHiddenProps } = useVisuallyHidden({
    isFocusable: true,
    style: { backgroundColor: 'red' } // Custom styles when focused
  });
  
  return (
    <div {...visuallyHiddenProps}>
      Hidden content with custom styling
    </div>
  );
}

// Base types from React and @react-types/shared
import type { ReactNode, JSXElementConstructor } from 'react';
import type { DOMAttributes } from '@react-types/shared';

interface VisuallyHiddenProps extends DOMAttributes {
  /** The content to visually hide. */
  children?: ReactNode;
  
  /**
   * The element type for the container.
   * @default 'div'
   */
  elementType?: string | JSXElementConstructor<any>;
  
  /** Whether the element should become visible on focus, for example skip links. */
  isFocusable?: boolean;
}

interface VisuallyHiddenAria {
  /** Props to spread onto the element that should be hidden */
  visuallyHiddenProps: DOMAttributes;
}