import { Badge } from 'terra-signature/package.json?dev-site-package';

import SignatureExample from './example/SignatureExample?dev-site-example';

import SignaturePropsTable from 'terra-signature/lib/Signature?dev-site-props-table';

<Badge />

# Terra Signature

The terra-signature component is used to digitally validate or acknowledge files or documents such as PDF documents, online forms, or specialized e-signature software.
- For mouse usage, only left-click drawing is enabled, and can continue the drawing with a series of line segments as long as the pointer does not exit the confines of the browser. 
- The Terra Signature component has the ability to define line width, and line color, and optionally display a signature if the line segments used in the signature have already been recorded.
- For keyboard usage, consumers can provide their signature by typing, drawing, or inserting an image file with their name. Ensuring the keyboard navigation follows a logical tab order, provides the instructions and cues necessary to complete the same action, for both keyboard and screen reader users.
- The Terra Signature component supports resizing to 400% and supports reflow when the viewport is resized to 320x256 px without loss of information or function.

## Getting Started

- Install with [npmjs](https://www.npmjs.com):
  - `npm install terra-signature`

<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
## Peer Dependencies

This component requires the following peer dependencies be installed in your app for the component to properly function.

| Peer Dependency | Version |
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |

<!-- AUTO-GENERATED-CONTENT:END -->

## Usage

```jsx
import Signature from 'terra-signature';
```

## Consuming teams are responsible for
- **Providing Descriptive Labels**: Ensure that the terra-signature component is labeled clearly and descriptively for screen reader users. This includes providing labels for form fields and instructions for signing.

- **Implementing Keyboard Accessibility**: Ensure that all functionality of terra-signature can be accessed and operated using only a keyboard, without any mouse interactions.

- **Using ARIA Attributes**: Use ARIA (Accessible Rich Internet Applications) [attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) to enhance the accessibility of terra-signature, such as [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) and [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby), to provide additional context for screen reader users.

- **Testing with Assistive Technologies**: Test terra-signature with a variety of assistive technologies, such as screen readers, to ensure that it is fully accessible and usable by all users.

- **Providing Alternative Text for Images**: If terra-signature includes any images or icons, provide alternative text that describes the content or function of the image for users who cannot see it.

- **Ensuring Sufficient Color Contrast**: Ensure that there is sufficient color contrast between text and background colors to make terra-signature readable for users with low vision or color blindness.

- **Documenting Accessibility Features**: Document the accessibility features of terra-signature for end users, including instructions on how to use it with assistive technologies.

By following these guidelines, consumers can ensure that the Terra Signature component is accessible to all users, including those with disabilities.

## Component Features
* [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)

## Examples
<SignatureExample title="Default Signature" />

## Signature Props
<SignaturePropsTable />