Merge branch 'main' into search-docs-guide

cerner · Dec 5, 2023 · d2c75ba · d2c75ba
2 parents 14bac21 + c39f4e2
commit d2c75ba
Show file tree

Hide file tree

Showing 498 changed files with 132 additions and 65 deletions.
diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
@@ -4,12 +4,16 @@
 
 * Added
   * Added new Accessibility and Implementation guide for Terra Search Field
+  * Added aria-label to announce the visual label.
 
 ## 1.52.0 - (November 21, 2023)
 
 * Added
   * Added test to `terra-section-header` for the fixed section header title.
 
+* Added
+  * Added error message for `terra-form-search-select` invalid example.
+
 * Added
   * Added visual label and associated with input field using 'for' and 'id'.
   * Added 'ariaLabel' attribute for `terra-form-select` examples.

diff --git a/...erra-core-docs/src/terra-dev-site/doc/form-select/example/FormSelectDocCommon.module.scss b/...erra-core-docs/src/terra-dev-site/doc/form-select/example/FormSelectDocCommon.module.scss
@@ -1,3 +1,7 @@
+// import themes
+@import './clinical-lowlight-theme/FormSelectDocCommon.module';
+@import './orion-fusion-theme/FormSelectDocCommon.module';
+
 :local {
   .form-select {
     max-width: 300px;
@@ -6,4 +10,14 @@
   .controlled-button {
     margin: 5px;
   }
+
+  .error-text {
+    color: var(--terra-core-docs-form-select-error-text-color, #e50000);
+    font-size: 0.857rem;
+    font-weight: normal;
+    line-height: 1.25;
+    margin-top: 0.357em;
+    outline: 0;
+    text-align: left;
+  }
 }
diff --git a/...-dev-site/doc/form-select/example/clinical-lowlight-theme/FormSelectDocCommon.module.scss b/...-dev-site/doc/form-select/example/clinical-lowlight-theme/FormSelectDocCommon.module.scss
@@ -0,0 +1,3 @@
+.clinical-lowlight-theme {
+  --terra-core-docs-form-select-error-text-color: #fb4c4c;
+}
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/combobox/Invalid.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/combobox/Invalid.jsx
@@ -1,17 +1,28 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Combobox from 'terra-form-select/lib/Combobox';
 import classNames from 'classnames/bind';
 import styles from '../FormSelectDocCommon.module.scss';
 
 const cx = classNames.bind(styles);
 
-const InvalidExample = () => (
-  <Combobox placeholder="Select a color" isInvalid className={cx('form-select')}>
-    <Combobox.Option value="blue" display="Blue" />
-    <Combobox.Option value="green" display="Green" />
-    <Combobox.Option value="purple" display="Purple" />
-    <Combobox.Option value="red" display="Red" />
-    <Combobox.Option value="violet" display="Violet" />
-  </Combobox>
-);
+const InvalidExample = () => {
+  const [isInvalid, setInvalid] = useState(true);
+  const handleOnChange = (value) => {
+    const invalid = !!((!value || value === ''));
+    setInvalid(invalid);
+  };
+  return (
+    <>
+      <Combobox placeholder="Select a color" isInvalid={isInvalid} ariaLabel={(isInvalid) ? 'Please select a color' : undefined} className={cx('form-select')} onSearch={handleOnChange} onChange={handleOnChange}>
+        <Combobox.Option value="blue" display="Blue" />
+        <Combobox.Option value="green" display="Green" />
+        <Combobox.Option value="purple" display="Purple" />
+        <Combobox.Option value="red" display="Red" />
+        <Combobox.Option value="violet" display="Violet" />
+      </Combobox>
+      {isInvalid && <span className={cx('error-text')}>Please select a color</span>}
+    </>
+  );
+};
+
 export default InvalidExample;
diff --git a/...terra-dev-site/doc/form-select/example/orion-fusion-theme/FormSelectDocCommon.module.scss b/...terra-dev-site/doc/form-select/example/orion-fusion-theme/FormSelectDocCommon.module.scss
@@ -0,0 +1,4 @@
+.orion-fusion-theme {
+  --terra-core-docs-form-select-error-text-color: #e50000;
+}
+
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/search/Invalid.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/search/Invalid.jsx
@@ -1,18 +1,26 @@
-import React from 'react';
+import React, { useState } from 'react';
 import SearchSelect from 'terra-form-select/lib/SearchSelect';
 import classNames from 'classnames/bind';
 import styles from '../FormSelectDocCommon.module.scss';
 
 const cx = classNames.bind(styles);
-
-const InvalidExample = () => (
-  <SearchSelect placeholder="Select a color" isInvalid className={cx('form-select')}>
-    <SearchSelect.Option value="blue" display="Blue" />
-    <SearchSelect.Option value="green" display="Green" />
-    <SearchSelect.Option value="purple" display="Purple" />
-    <SearchSelect.Option value="red" display="Red" />
-    <SearchSelect.Option value="violet" display="Violet" />
-  </SearchSelect>
-);
-
+const InvalidExample = () => {
+  const [isInvalid, setInvalid] = useState(true);
+  const handleOnChange = (value) => {
+    const invalid = !!((!value || value === ''));
+    setInvalid(invalid);
+  };
+  return (
+    <>
+      <SearchSelect placeholder="Select a color" isInvalid={isInvalid} ariaLabel={(isInvalid) ? 'Please select a color' : undefined} className={cx('form-select')} onSearch={handleOnChange} onChange={handleOnChange}>
+        <SearchSelect.Option value="blue" display="Blue" />
+        <SearchSelect.Option value="green" display="Green" />
+        <SearchSelect.Option value="purple" display="Purple" />
+        <SearchSelect.Option value="red" display="Red" />
+        <SearchSelect.Option value="violet" display="Violet" />
+      </SearchSelect>
+      {isInvalid && <span className={cx('error-text')}>Please select a color</span>}
+    </>
+  );
+};
 export default InvalidExample;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/search/Search.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/form-select/example/search/Search.jsx
@@ -8,7 +8,7 @@ const cx = classNames.bind(styles);
 const SearchSelectExample = () => (
   <>
     <label htmlFor="color-field-1"><strong>Colors</strong></label>
-    <SearchSelect placeholder="Select a color" className={cx('form-select')} inputId="color-field-1">
+    <SearchSelect placeholder="Select a color" ariaLabel="Colors" className={cx('form-select')} inputId="color-field-1">
       <SearchSelect.Option value="blue" display="Blue" />
       <SearchSelect.Option value="green" display="Green" />
       <SearchSelect.Option value="purple" display="Purple" />

diff --git a/packages/terra-form-field/CHANGELOG.md b/packages/terra-form-field/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added `aria-invalid` for invalid entry.
+
 ## 4.31.0 - (November 13, 2023)
 
 * Changed

diff --git a/packages/terra-form-field/src/Field.jsx b/packages/terra-form-field/src/Field.jsx
@@ -170,7 +170,7 @@ const Field = (props) => {
     if ((required || isInvalid) && child && (child.type.isInput || child.type.isSelect || child.type.isTextarea)) {
       return React.cloneElement(child, {
         ...required && { required: true },
-        ...isInvalid && { isInvalid: true },
+        ...isInvalid && { isInvalid: true, 'aria-invalid': true },
       });
     }
     return child;

diff --git a/packages/terra-form-field/tests/jest/__snapshots__/Field.test.jsx.snap b/packages/terra-form-field/tests/jest/__snapshots__/Field.test.jsx.snap
@@ -1562,11 +1562,13 @@ exports[`should render an invalid and required field with a Select 1`] = `
       </label>
     </div>
     <Select
+      aria-invalid={true}
       isInvalid={true}
       key=".0"
       required={true}
     >
       <select
+        aria-invalid={true}
         invalid="true"
         required={true}
       />
@@ -1707,11 +1709,13 @@ exports[`should render an invalid and required field with a Textarea 1`] = `
       </label>
     </div>
     <Textarea
+      aria-invalid={true}
       isInvalid={true}
       key=".0"
       required={true}
     >
       <textarea
+        aria-invalid={true}
         invalid="true"
         required={true}
       />
@@ -1852,11 +1856,13 @@ exports[`should render an invalid and required field with an Input 1`] = `
       </label>
     </div>
     <Input
+      aria-invalid={true}
       isInvalid={true}
       key=".0"
       required={true}
     >
       <input
+        aria-invalid={true}
         invalid="true"
         required={true}
       />
@@ -1991,10 +1997,12 @@ exports[`should render an invalid field with a Select 1`] = `
       </label>
     </div>
     <Select
+      aria-invalid={true}
       isInvalid={true}
       key=".0"
     >
       <select
+        aria-invalid={true}
         invalid="true"
       />
     </Select>
@@ -2128,10 +2136,12 @@ exports[`should render an invalid field with an Input 1`] = `
       </label>
     </div>
     <Input
+      aria-invalid={true}
       isInvalid={true}
       key=".0"
     >
       <input
+        aria-invalid={true}
         invalid="true"
       />
     </Input>
@@ -2265,10 +2275,12 @@ exports[`should render an invalid field with an Textarea 1`] = `
       </label>
     </div>
     <Textarea
+      aria-invalid={true}
       isInvalid={true}
       key=".0"
     >
       <textarea
+        aria-invalid={true}
         invalid="true"
       />
     </Textarea>

diff --git a/packages/terra-form-select/CHANGELOG.md b/packages/terra-form-select/CHANGELOG.md
@@ -2,12 +2,15 @@
 
 ## Unreleased
 
+* Added
+  * Added condition to announce the placeholder across all browsers.
+  * Added visual focus dashed border for `terra-form-select` list options.
+
 * Fixed
   * Fixed screen reader response for `terra-form-select-combobox`.
 
 ## 6.51.0 - (November 21, 2023)
 
-* Added
   * Added 'aria-invalid' attribute for `terra-form-select-combobox`.
   * Updated auto assign placeholder text to `aria-label` in `terra-form-select-combobox` and `terra-form-search-select`.
   * Added 'aria-invalid' attribute for `terra-form-select-combobox`

diff --git a/packages/terra-form-select/src/Combobox.jsx b/packages/terra-form-select/src/Combobox.jsx
@@ -89,7 +89,8 @@ const propTypes = {
    */
   optionFilter: PropTypes.func,
   /**
-   * Placeholder text. defaults to 'Select or Enter'
+   * ![IMPORTANT](https://badgen.net/badge/prop/deprecated/red)
+   * Placeholder prop has been deprecated and will be Removed on next major version release, Visual label should be used instead for better Accessibility experience.
    */
   placeholder: PropTypes.string,
   /**

diff --git a/packages/terra-form-select/src/SearchSelect.jsx b/packages/terra-form-select/src/SearchSelect.jsx
@@ -89,7 +89,8 @@ const propTypes = {
    */
   optionFilter: PropTypes.func,
   /**
-   * Placeholder text.
+   * ![IMPORTANT](https://badgen.net/badge/prop/deprecated/red)
+   * Placeholder prop has been deprecated and will be Removed on next major version release, Visual label should be used instead for better Accessibility experience.
    */
   placeholder: PropTypes.string,
   /**

diff --git a/packages/terra-form-select/src/clinical-lowlight-theme/Frame.module.scss b/packages/terra-form-select/src/clinical-lowlight-theme/Frame.module.scss
@@ -15,17 +15,15 @@
     --terra-form-select-padding-top: 0;
     --terra-form-select-focus-background-image: none;
     --terra-form-select-focus-background-size: 0 0;
-    --terra-form-select-focus-border-color: #004c76;
-    --terra-form-select-focus-box-shadow: 0 0 1px 3px #004c76, 0 0 7px 4px #004c76;
     --terra-form-select-focus-transition-duration: 0s;
     --terra-form-select-focus-transition-timing-function: ease;
     --terra-form-select-open-border-top-left-radius: 3px;
     --terra-form-select-open-border-top-right-radius: 3px;
     --terra-form-select-above-border-bottom-left-radius: 3px;
     --terra-form-select-above-border-bottom-right-radius: 3px;
     --terra-form-select-hover-border-color: #004c76;
+    --terra-form-select-outline: 2px dashed #b2b5b6;
     --terra-form-select-hover-color: #b2b5b6;
-    --terra-form-select-focus-hover-border-color: #004c76;
     --terra-form-select-incomplete-background-color: #464232;
     --terra-form-select-incomplete-focus-background-color: #464232;
     --terra-form-select-incomplete-hover-background-color: #464232;

diff --git a/packages/terra-form-select/src/clinical-lowlight-theme/Option.module.scss b/packages/terra-form-select/src/clinical-lowlight-theme/Option.module.scss
@@ -18,6 +18,7 @@
     --terra-form-select-option-icon-width: 1.143rem;
     --terra-form-select-option-active-background-color: #1e3a49;
     --terra-form-select-option-disabled-color: #404344;
+    --terra-form-select-option-active-color-outline: 2px dashed #b2b5b6;
 
 
     @include terra-inline-svg-var('--terra-form-select-option-icon-add-background', '<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#0092e0" d="M48 21H27V0h-6v21H0v6h21v21h6V27h21z"/></svg>');

diff --git a/packages/terra-form-select/src/combobox/Frame.jsx b/packages/terra-form-select/src/combobox/Frame.jsx
@@ -100,7 +100,8 @@ const propTypes = {
    */
   optionFilter: PropTypes.func,
   /**
-   * Placeholder text.
+   * ![IMPORTANT](https://badgen.net/badge/prop/deprecated/red)
+   * Placeholder prop has been deprecated and will be Removed on next major version release, Visual label should be used instead for better Accessibility experience.
    */
   placeholder: PropTypes.string,
   /**
@@ -552,10 +553,10 @@ class Frame extends React.Component {
     // VO on iOS doesn't do a good job of announcing disabled stated. Here we append the phrase that
     // VO associates with disabled form controls.
     if ('ontouchstart' in window && disabled) {
-      return ariaLabel === undefined ? `${placeholder}, ${dimmed}` : `${ariaLabel}, ${placeholder}, ${dimmed}`;
+      return ariaLabel === undefined ? `${placeholder}, ${dimmed}` : `${ariaLabel}, ${dimmed}`;
     }
 
-    return ariaLabel === undefined ? placeholder : `${ariaLabel}, ${placeholder}`;
+    return ariaLabel === undefined ? placeholder : ariaLabel;
   }
 
   /**

diff --git a/packages/terra-form-select/src/orion-fusion-theme/Frame.module.scss b/packages/terra-form-select/src/orion-fusion-theme/Frame.module.scss
@@ -15,17 +15,15 @@
     --terra-form-select-padding-top: 0;
     --terra-form-select-focus-background-image: none;
     --terra-form-select-focus-background-size: 0 0;
-    --terra-form-select-focus-border-color: #4cb2e9;
-    --terra-form-select-focus-box-shadow: 0 0 4px #a6d9f4;
     --terra-form-select-focus-transition-duration: 0s;
     --terra-form-select-focus-transition-timing-function: ease;
     --terra-form-select-open-border-top-left-radius: 3px;
     --terra-form-select-open-border-top-right-radius: 3px;
     --terra-form-select-above-border-bottom-left-radius: 3px;
     --terra-form-select-above-border-bottom-right-radius: 3px;
     --terra-form-select-hover-border-color: #dedfe0;
+    --terra-form-select-outline: 2px dashed #000;
     --terra-form-select-hover-color: #1c1f21;
-    --terra-form-select-focus-hover-border-color: #4cb2e9;
     --terra-form-select-incomplete-background-color: #fefd9a;
     --terra-form-select-incomplete-focus-background-color: #fefd9a;
     --terra-form-select-incomplete-hover-background-color: #fefd9a;

diff --git a/packages/terra-form-select/src/orion-fusion-theme/Option.module.scss b/packages/terra-form-select/src/orion-fusion-theme/Option.module.scss
@@ -18,6 +18,8 @@
     --terra-form-select-option-icon-width: 1rem;
     --terra-form-select-option-active-background-color: #ebf6fd;
     --terra-form-select-option-disabled-color: rgba(28, 31, 33, 0.25);
+    --terra-form-select-option-active-color-outline: 2px dashed #000;
+
 
     @include terra-inline-svg-var('--terra-form-select-option-icon-active-background', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><rect width="48" height="48" rx="6" ry="6" fill="#a3dcfd" opacity="0.5"/><path d="M20,36.4,6.7,23.1l3.6-3.6L20,29.4,37.7,11.5l3.6,3.6Z" fill="#0079be"/></svg>');
     @include terra-inline-svg-var('--terra-form-select-option-checkable-active-icon-background', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><rect width="48" height="48" rx="6" ry="6" fill="#a3dcfd" opacity="0.8"/><path d="M20,36.4,6.7,23.1l3.6-3.6L20,29.4,37.7,11.5l3.6,3.6Z" fill="#0079be"/></svg>');

diff --git a/packages/terra-form-select/src/search/Frame.jsx b/packages/terra-form-select/src/search/Frame.jsx
@@ -100,7 +100,8 @@ const propTypes = {
    */
   optionFilter: PropTypes.func,
   /**
-   * Placeholder text.
+   * ![IMPORTANT](https://badgen.net/badge/prop/deprecated/red)
+   * Placeholder prop has been deprecated and will be Removed on next major version release, Visual label should be used instead for better Accessibility experience.
    */
   placeholder: PropTypes.string,
   /**
@@ -528,8 +529,9 @@ class Frame extends React.Component {
    * Falls back to the string 'Search' if no label is provided
    */
   ariaLabel() {
-    const { ariaLabel, disabled, intl } = this.props;
-
+    const {
+      ariaLabel, disabled, intl,
+    } = this.props;
     const defaultAriaLabel = intl.formatMessage({ id: 'Terra.form.select.ariaLabel' });
     const dimmed = intl.formatMessage({ id: 'Terra.form.select.dimmed' });
 
@@ -674,7 +676,6 @@ class Frame extends React.Component {
       customProps.className,
     );
 
-    const labelId = `terra-select-screen-reader-label-${uniqueid()}`;
     const descriptionId = `terra-select-screen-reader-description-${uniqueid()}`;
     const customAriaDescribedbyIds = customProps['aria-describedby'];
     const ariaDescribedBy = customAriaDescribedbyIds ? `${descriptionId} ${customAriaDescribedbyIds}` : descriptionId;
@@ -712,8 +713,6 @@ class Frame extends React.Component {
         ref={(select) => { this.select = select; }}
       >
         <div className={cx('visually-hidden-component')} hidden>
-          {/* Hidden attribute used to prevent VoiceOver on desktop from announcing this content twice */}
-          <span id={labelId}>{this.ariaLabel()}</span>
           <span id={descriptionId}>{this.renderDescriptionText()}</span>
         </div>
         <div className={cx('display')}>