diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index c7c1f89d27e..5e7671e98e4 100644 --- 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 index 8680a9652fd..1b9b585627c 100644 --- 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 = () => { >
Control Placeholder
+ +

Accessibility Hooks Example Field Label

+ + + +

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 index 5913e87c13d..1447f51a2d8 100644 --- 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 + diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/form-input/common/AccessibilityHooksExample.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/form-input/common/AccessibilityHooksExample.jsx new file mode 100644 index 00000000000..5be63ce0aa8 --- /dev/null +++ b/packages/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 ( +

+ + + {(isInvalid) && ( +

+ + The e-mail address entered is invalid. + +

+ )} +

Please enter a valid e-mail address.

+ +
+ ); +}; + +export default AccessibilityHooksExample;