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

    export interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {
      /** @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: AsComponent = "span",
          className,
          phoneOnly,
          focusable,
          children,
          tabIndex,
          ...remaining
        } = props;

        // do some type-casting so ref works
        const Component = AsComponent as ElementType;

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