Terra signature doc update (#4088)

packages/terra-core-docs/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+* Changed
+  * Updated documentation for `terra-signature`.
 * Added
   * Added note regarding search field examples.
 

packages/terra-core-docs/src/terra-dev-site/doc/signature/About.1.doc.mdx

@@ -11,7 +11,7 @@ import SignaturePropsTable from 'terra-signature/lib/Signature?dev-site-props-ta
 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, and provides the instructions and cues necessary to complete the same action.
+- 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

packages/terra-core-docs/src/terra-dev-site/doc/signature/example/ImageSignature.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import classNames from 'classnames/bind';
 import Signature from 'terra-signature';
+import Button from 'terra-button';
+import Input from 'terra-form-input';
 import PropTypes from 'prop-types';
 import styles from './SignatureExample.module.scss';
 
@@ -39,8 +41,8 @@ const ImageSignature = (props) => {
         <Signature id="upload" />
       </div>
       <br />
-      <button type="button" onClick={handleClear}>Clear</button>
-      <input className={cx('input-image')} id="file-select" type="file" accept="image/*" onChange={handleFileSelect} />
+      <Button className={cx('button')} text="Clear" onClick={handleClear} />
+      <Input className={cx('input-image')} id="file-select" type="file" accept="image/*" onChange={handleFileSelect} />
     </div>
   );
 };

packages/terra-core-docs/src/terra-dev-site/doc/signature/example/SignatureExample.jsx

@@ -3,6 +3,8 @@ import Signature from 'terra-signature';
 import classNames from 'classnames/bind';
 import Tabs from 'terra-tabs';
 import VisuallyHiddenText from 'terra-visually-hidden-text';
+import Button from 'terra-button';
+import { SingleSelect } from 'terra-form-select';
 import TextSignature from './TextSignature';
 import ImageSignature from './ImageSignature';
 import styles from './SignatureExample.module.scss';
@@ -26,8 +28,8 @@ class SignatureExample extends React.Component {
     this.handleLiveRegion();
   }
 
-  handleLineWidth(event) {
-    this.setState({ [event.target.name]: event.target.value });
+  handleLineWidth(value) {
+    this.setState({ lineWidth: value });
   }
 
   handleLiveRegion(value) {
@@ -40,7 +42,7 @@ class SignatureExample extends React.Component {
   render() {
     return (
       <div>
-        <Tabs setFocusOnContent defaultActiveKey={`${this.tabKey}DrawTab`} id={this.tabKey}>
+        <Tabs defaultActiveKey={`${this.tabKey}DrawTab`} id={this.tabKey}>
           <Tabs.Pane label="Draw" key={`${this.tabKey}DrawTab`} id={`${this.tabKey}DrawTab`}>
             <br />
             <>
@@ -50,15 +52,15 @@ class SignatureExample extends React.Component {
             </>
             <br />
             <div>
-              <button type="button" onClick={this.handleClear}>Clear </button>
+              <Button className={cx('button')} text="Clear" onClick={this.handleClear} />
               <div>
-                <p><label htmlFor="lineWidth">Select a line width:</label></p>
-                <select id="lineWidth" name="lineWidth" value={this.state.lineWidth} onChange={this.handleLineWidth}>
-                  <option value="1">EXTRAFINE</option>
-                  <option value="2">FINE</option>
-                  <option value="4">MEDIUM</option>
-                  <option value="6">HEAVY</option>
-                </select>
+                <p><label htmlFor="lineWidth">Select a line width</label></p>
+                <SingleSelect className={cx('form-select')} id="lineWidth" name="lineWidth" value={this.state.lineWidth} placeholder="Select lineWidth" onSelect={this.handleLineWidth}>
+                  <SingleSelect.Option value="1" display="EXTRAFINE" />
+                  <SingleSelect.Option value="2" display="FINE" />
+                  <SingleSelect.Option value="4" display="MEDIUM" />
+                  <SingleSelect.Option value="6" display="HEAVY" />
+                </SingleSelect>
               </div>
             </div>
           </Tabs.Pane>

packages/terra-core-docs/src/terra-dev-site/doc/signature/example/SignatureExample.module.scss

@@ -28,5 +28,19 @@
 
   .input-image {
     margin: 5px;
+
+    &:focus {
+      outline: 2px solid #4cb2e9;
+      outline-offset: 1px;
+    }
+  }
+
+  .button {
+    margin: 5px;
+  }
+
+  .form-select {
+    margin: 3px;
+    max-width: 300px;
   }
 }

packages/terra-core-docs/src/terra-dev-site/doc/signature/example/TextSignature.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames/bind';
 import Signature from 'terra-signature';
+import Button from 'terra-button';
 import PropTypes from 'prop-types';
 import styles from './SignatureExample.module.scss';
 
@@ -50,8 +51,8 @@ const TextSignature = (props) => {
       </div>
       <br />
       <div className={cx('clear-button')}>
-        <button type="button" onClick={handleClear}>Clear</button>
-        <button className={cx('add-button')} type="button" onClick={handleAdd}>Add</button>
+        <Button className={cx('button')} text="Clear" onClick={handleClear} />
+        <Button className={cx('button')} text="Add" onClick={handleAdd} />
       </div>
     </div>
   );