@lumx/react 3.2.1 → 3.3.0

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.2.1",
-        "@lumx/icons": "^3.2.1",
+        "@lumx/core": "^3.3.0",
+        "@lumx/icons": "^3.3.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -113,5 +113,5 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "3.2.1"
+    "version": "3.3.0"
 }

package/src/components/text-field/TextField.stories.tsx

@@ -12,6 +12,7 @@ export default {
         clearButtonProps: { control: false },
         chips: { control: false },
         afterElement: { control: false },
+        onClear: { action: true },
     },
     decorators: [withValueOnChange({})],
 };

package/src/components/text-field/TextField.test.tsx

@@ -5,8 +5,14 @@ import camelCase from 'lodash/camelCase';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getBasicClass } from '@lumx/react/utils/className';
 
-import { render } from '@testing-library/react';
-import { getByClassName, getByTagName, queryAllByClassName, queryByTagName } from '@lumx/react/testing/utils/queries';
+import { render, screen } from '@testing-library/react';
+import {
+    getByClassName,
+    getByTagName,
+    queryAllByClassName,
+    queryByClassName,
+    queryByTagName,
+} from '@lumx/react/testing/utils/queries';
 import partition from 'lodash/partition';
 import userEvent from '@testing-library/user-event';
 
@@ -27,9 +33,11 @@ const setup = (propsOverride: Partial<TextFieldProps> = {}) => {
         | HTMLInputElement;
     const helpers = queryAllByClassName(container, 'lumx-text-field__helper');
     const [[helper], [error]] = partition(helpers, (h) => !h.className.includes('lumx-input-helper--color-red'));
+    const clearButton = queryByClassName(container, 'lumx-text-field__input-clear');
 
     return {
         props,
+        clearButton,
         container,
         element,
         inputNative,
@@ -106,22 +114,27 @@ describe(`<${TextField.displayName}>`, () => {
         });
 
         it('should have helper text', () => {
-            const { helper } = setup({
+            const { helper, inputNative } = setup({
                 helper: 'helper',
                 label: 'test',
                 placeholder: 'test',
             });
+
             expect(helper).toHaveTextContent('helper');
+            expect(inputNative).toHaveAttribute('aria-describedby');
         });
 
         it('should have error text', () => {
-            const { error } = setup({
+            const { error, inputNative } = setup({
                 error: 'error',
                 hasError: true,
                 label: 'test',
                 placeholder: 'test',
             });
+
             expect(error).toHaveTextContent('error');
+            expect(inputNative).toHaveAttribute('aria-invalid', 'true');
+            expect(inputNative).toHaveAttribute('aria-describedby');
         });
 
         it('should not have error text', () => {
@@ -160,6 +173,41 @@ describe(`<${TextField.displayName}>`, () => {
 
             expect(onChange).toHaveBeenCalledWith('a', 'name', expect.objectContaining({}));
         });
+
+        it('should trigger `onChange` with empty value when text field is cleared', async () => {
+            const onChange = jest.fn();
+            const { clearButton } = setup({
+                value: 'initial value',
+                name: 'name',
+                clearButtonProps: { label: 'Clear' },
+                onChange,
+            });
+
+            expect(clearButton).toBeInTheDocument();
+
+            await userEvent.click(clearButton as HTMLElement);
+
+            expect(onChange).toHaveBeenCalledWith('');
+        });
+
+        it('should trigger `onChange` with empty value and `onClear` when text field is cleared', async () => {
+            const onChange = jest.fn();
+            const onClear = jest.fn();
+            const { clearButton } = setup({
+                value: 'initial value',
+                name: 'name',
+                clearButtonProps: { label: 'Clear' },
+                onChange,
+                onClear,
+            });
+
+            expect(clearButton).toBeInTheDocument();
+
+            await userEvent.click(clearButton as HTMLElement);
+
+            expect(onChange).toHaveBeenCalledWith('');
+            expect(onClear).toHaveBeenCalled();
+        });
     });
 
     // Common tests suite.

package/src/components/text-field/TextField.tsx

@@ -61,6 +61,8 @@ export interface TextFieldProps extends GenericProps, HasTheme {
     onBlur?(event: React.FocusEvent): void;
     /** On change callback. */
     onChange(value: string, name?: string, event?: SyntheticEvent): void;
+    /** On clear callback. */
+    onClear?(event?: SyntheticEvent): void;
     /** On focus callback. */
     onFocus?(event: React.FocusEvent): void;
 }
@@ -153,6 +155,8 @@ interface InputNativeProps {
     onChange(value: string, name?: string, event?: SyntheticEvent): void;
     onFocus?(value: React.FocusEvent): void;
     onBlur?(value: React.FocusEvent): void;
+    hasError?: boolean;
+    describedById?: string;
 }
 
 const renderInputNative: React.FC<InputNativeProps> = (props) => {
@@ -172,6 +176,8 @@ const renderInputNative: React.FC<InputNativeProps> = (props) => {
         recomputeNumberOfRows,
         type,
         name,
+        hasError,
+        describedById,
         ...forwardedProps
     } = props;
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -214,6 +220,8 @@ const renderInputNative: React.FC<InputNativeProps> = (props) => {
         onFocus: onTextFieldFocus,
         onBlur: onTextFieldBlur,
         onChange: handleChange,
+        'aria-invalid': hasError ? 'true' : undefined,
+        'aria-describedby': describedById,
         ref: mergeRefs(inputRef as any, ref) as any,
     };
     if (multiline) {
@@ -254,6 +262,7 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
         name,
         onBlur,
         onChange,
+        onClear,
         onFocus,
         placeholder,
         textFieldRef,
@@ -264,6 +273,17 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
         ...forwardedProps
     } = props;
     const textFieldId = useMemo(() => id || `text-field-${uid()}`, [id]);
+    /**
+     * Generate unique ids for both the helper and error texts, in order to
+     * later on add them to the input native as aria-describedby. If both the error and the helper are present,
+     * we want to first use the most important one, which is the errorId. That way, screen readers will read first
+     * the error and then the helper
+     */
+    const helperId = helper ? `text-field-helper-${uid()}` : undefined;
+    const errorId = error ? `text-field-error-${uid()}` : undefined;
+    const describedByIds = [errorId, helperId].filter(Boolean);
+    const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
+
     const [isFocus, setFocus] = useState(false);
     const { rows, recomputeNumberOfRows } = useComputeNumberOfRows(multiline ? minimumRows || DEFAULT_MIN_ROWS : 0);
     const valueLength = (value || '').length;
@@ -275,12 +295,16 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
      * and remove focus from the clear button.
      * @param evt On clear event.
      */
-    const onClear = (evt: React.ChangeEvent) => {
+    const handleClear = (evt: React.ChangeEvent) => {
         evt.nativeEvent.preventDefault();
         evt.nativeEvent.stopPropagation();
         (evt.currentTarget as HTMLElement).blur();
 
         onChange('');
+
+        if (onClear) {
+            onClear(evt);
+        }
     };
 
     return (
@@ -359,6 +383,8 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
                             type,
                             value,
                             name,
+                            hasError,
+                            describedById,
                             ...forwardedProps,
                         })}
                     </div>
@@ -383,6 +409,8 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
                             type,
                             value,
                             name,
+                            hasError,
+                            describedById,
                             ...forwardedProps,
                         })}
                     </div>
@@ -405,7 +433,7 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
                         emphasis={Emphasis.low}
                         size={Size.s}
                         theme={theme}
-                        onClick={onClear}
+                        onClick={handleClear}
                         type="button"
                     />
                 )}
@@ -414,13 +442,13 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
             </div>
 
             {hasError && error && (
-                <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme}>
+                <InputHelper className={`${CLASSNAME}__helper`} kind={Kind.error} theme={theme} id={errorId}>
                     {error}
                 </InputHelper>
             )}
 
             {helper && (
-                <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>
+                <InputHelper className={`${CLASSNAME}__helper`} theme={theme} id={helperId}>
                     {helper}
                 </InputHelper>
             )}