github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/SrOnly.tsx (about)

     1  import { Typography, TypographyTypeMap } from "@material-ui/core"
     2  import {
     3    DefaultComponentProps,
     4    OverrideProps,
     5  } from "@material-ui/core/OverridableComponent"
     6  import React, { ElementType, PropsWithChildren } from "react"
     7  
     8  /**
     9   * A lightweight wrapper for content that should only be available
    10   * to assistive technology, using Material UI's Typography component
    11   * with `srOnly` class. Screen-reader-only classes are a common pattern
    12   * that allows useful content to be present in the DOM (and therefore
    13   * available to screen-readers), but not visible to sighted users.
    14   * https://material-ui.com/api/typography/
    15   *
    16   * Using this may cause layout problems, see discussion here:
    17   * https://github.com/tilt-dev/tilt/pull/5504
    18   * Prefer aria-label when possible.
    19   */
    20  
    21  // Note: types are copy-pasta'd and adapted from Typography.d.ts
    22  type SrOnlyProps<C extends ElementType> =
    23    | ({ component: C } & OverrideProps<TypographyTypeMap, C> &
    24        DefaultComponentProps<TypographyTypeMap>)
    25    | DefaultComponentProps<TypographyTypeMap>
    26  
    27  export default function SrOnly<C extends ElementType = "span">(
    28    props: PropsWithChildren<SrOnlyProps<C>>
    29  ) {
    30    return (
    31      <Typography {...props} variant="srOnly">
    32        {props.children}
    33      </Typography>
    34    )
    35  }