[form-field] [form-input] Add accessibility hooks examples for terra-…

…form-field and terra-input (cerner#3697) * Add accessibility hooks examples for terra-form-field and terra-input * Use email label field and messages for more realistic examples * Update changelog * Add toggle error button for terra-form-input example, fix lint errors * Minor changelog update * Minor changelog update Co-authored-by: ns065186 <[email protected]>
saket2403 · Dec 5, 2022 · 9fbbdb8 · 9fbbdb8
1 parent 6432309
commit 9fbbdb8
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 0 deletions.
diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
@@ -12,6 +12,7 @@
   * Added Accordion Examples for `terra-section-header`.
   * Added accessibility guide for `terra-divider`.
   * Added tests and example for adding row header to `terra-html-table`.
+  * Added an accessibility hooks example for `terra-form-field` and `terra-input`.
 
 * Changed
   * Updated `terra-list` section guide to not use listbox role.

diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/form-field/example/FieldExamples.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/form-field/example/FieldExamples.jsx
@@ -55,6 +55,18 @@ const FieldExamples = () => {
       >
         <div className={cx('field-content')}>Control Placeholder</div>
       </Field>
+
+      <p> Accessibility Hooks Example Field Label </p>
+      <Field
+        label="E-mail Label"
+        htmlFor="input_id"
+        help="Please enter a valid e-mail address."
+        error="The e-mail address entered is invalid."
+        isInvalid={isInvalid}
+      >
+        <input id="input_id" aria-describedby="input_id-error input_id-help" />
+      </Field>
+
       <hr />
       <p>
         If a field is invalid, an error icon will be displayed.

diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/form-input/About.1.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/form-input/About.1.doc.mdx
@@ -2,6 +2,7 @@ import { Badge } from 'terra-form-input/package.json?dev-site-package';
 
 import BlankExample from './common/BlankExample?dev-site-example';
 import NumberInputExample from './common/NumberInputExample?dev-site-example';
+import AccessibilityHooksExample from './common/AccessibilityHooksExample?dev-site-example';
 import ControlledDefaultExample from './example/controlled/DefaultExample?dev-site-example';
 import ControlledDisabledExample from './example/controlled/DisabledExample?dev-site-example';
 import ControlledDefaultInvalidExample from './example/controlled/DefaultInvalidExample?dev-site-example';
@@ -57,6 +58,7 @@ import Input from 'terra-form-input';
 ## Examples
 <BlankExample title="Default Input" />
 <NumberInputExample title="Numeric Input" />
+<AccessibilityHooksExample title="Accessibilty Hooks Input" />
 <ControlledDefaultExample title="Controlled Example - Valid" />
 <ControlledDisabledExample title="Controlled Example - Valid Disabled" />
 <ControlledDefaultInvalidExample title="Controlled Example - Invalid" />

diff --git a/...es/terra-core-docs/src/terra-dev-site/doc/form-input/common/AccessibilityHooksExample.jsx b/...es/terra-core-docs/src/terra-dev-site/doc/form-input/common/AccessibilityHooksExample.jsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import Input from 'terra-form-input';
+
+const AccessibilityHooksExample = () => {
+  const [isInvalid, setIsInvalid] = useState(false);
+  const toggleErrorState = () => {
+    setIsInvalid(!isInvalid);
+  };
+
+  return (
+    <div>
+      <label htmlFor="input_id"> E-mail Label</label>
+      <Input name="accessible input" id="input_id" aria-describedby="input_id-error input_id-help" ariaLabel="Blank" />
+      {(isInvalid) && (
+      <p id="input_id-error">
+        <font color="red">
+          The e-mail address entered is invalid.
+        </font>
+      </p>
+      )}
+      <p id="input_id-help">Please enter a valid e-mail address.</p>
+      <button type="button" id="toggle-is-invalid" onClick={toggleErrorState}>Toggle Error State</button>
+    </div>
+  );
+};
+
+export default AccessibilityHooksExample;