# All files / src/typography SrOnly.tsx

100% Statements 81/81
100% Branches 8/8
100% Functions 1/1
100% Lines 81/81

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
    821x
    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
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    32x
    1x
     import { forwardRef } from "react";
    import {
      Typography,
      type CustomTypographyComponent,
      type TypographyHTMLElement,
      type TypographyProps,
    } from "./Typography.js";
    import { cssUtils } from "../cssUtils.js";

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

      /**
       * Set this to `true` if the content should only be screen reader only text on
       * phones. This is useful for only displaying an icon on phones when there is
       * limited space and then displaying an icon and text on larger devices.
       *
       * @defaultValue `false`
       */
      phoneOnly?: boolean;

      /**
       * 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,
          phoneOnly,
          focusable,
          children,
          tabIndex,
          ...remaining
        } = props;

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