# All files / typography SrOnly.tsx

100% Statements 89/89
100% Branches 5/5
100% Functions 2/2
100% Lines 89/89

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    901x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    7x
    7x
    7x
    7x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    5x
    1x
     import { cnb } from "cnbuilder";
    import { forwardRef } from "react";

    import { bem } from "../utils";
    import type {
      CustomTypographyComponent,
      TypographyHTMLElement,
      TypographyProps,
    } from "./Typography";
    import { Typography } from "./Typography";

    const styles = bem("rmd-sr-only");

    /** @remarks \@since 6.0.0 */
    export interface SrOnlyClassNameOptions {
      className?: string;

      /** @defaultValue `false` */
      focusable?: boolean;
    }

    /**
     * @remarks \@since 6.0.0
     */
    export function srOnly(options: SrOnlyClassNameOptions = {}): string {
      const { className, focusable = false } = options;

      return cnb(styles({ focusable }), className);
    }

    export interface SrOnlyProps extends TypographyProps {
      /** @defaultValue `"span"` */
      as?: CustomTypographyComponent;

      /**
       * Set this to `true` if the element should be keyboard focusable.
       *
       * @defaultValue `false`
       */
      focusable?: boolean;
    }

    /**
     * **Server Component**
     *
     * @example
     * Simple Example
     * ```tsx
     * import { SrOnly } from "@react-md/core";
     * import type { ReactElement } from "react";
     *
     * function Example(): ReactElement {
     *   return (
     *     <>
     *       <SrOnly>
     *         I am only visible to screen readers.
     *       </SrOnly>
     *       <SrOnly focusable>
     *         I am only visible to screen readers but can be focused.
     *       </SrOnly>
     *     </>
     *   );
     * }
     * ```
     */
    export const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(
      function SrOnly(props, ref) {
        const {
          as = "span",
          className,
          focusable,
          children,
          tabIndex,
          ...remaining
        } = props;

        return (
          <Typography
            {...remaining}
            as={as}
            ref={ref}
            tabIndex={tabIndex ?? (focusable ? 0 : undefined)}
            className={srOnly({ focusable, className })}
          >
            {children}
          </Typography>
        );
      }
    );