@lumx/react 3.7.2-alpha.0 → 3.7.3

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^3.7.2-alpha.0",
-        "@lumx/icons": "^3.7.2-alpha.0",
+        "@lumx/core": "^3.7.3",
+        "@lumx/icons": "^3.7.3",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -112,5 +112,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.7.2-alpha.0"
+    "version": "3.7.3"
 }

package/src/components/chip/Chip.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Theme } from '@lumx/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';
 import userEvent from '@testing-library/user-event';
 import { Chip, ChipProps } from './Chip';
@@ -160,6 +160,14 @@ describe('<Chip />', () => {
             await userEvent.click(after as any);
             expect(onClick).toHaveBeenCalled();
         });
+
+        it('should forward key down event', async () => {
+            const onKeyDown = jest.fn();
+            const { chip } = setup({ onClick, onKeyDown });
+
+            fireEvent.keyDown(chip, { key: 'A', code: 'KeyA' });
+            expect(onKeyDown).toHaveBeenCalled();
+        });
     });
 
     commonTestsSuiteRTL(setup, { baseClassName: CLASSNAME, forwardClassName: 'chip', forwardAttributes: 'chip' });

package/src/components/chip/Chip.tsx

@@ -84,6 +84,7 @@ export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref)
         size,
         theme,
         href,
+        onKeyDown,
         ...forwardedProps
     } = props;
     const hasAfterClick = isFunction(onAfterClick);
@@ -97,6 +98,12 @@ export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref)
 
     const handleOnBeforeClick = useStopPropagation(onBeforeClick);
     const handleOnAfterClick = useStopPropagation(onAfterClick);
+    const handleKeyDown = (evt: React.KeyboardEvent) => {
+        onKeyDown?.(evt);
+        if (hasOnClick) {
+            onEnterPressed(onClick);
+        }
+    };
 
     return (
         // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -123,7 +130,7 @@ export const Chip: Comp<ChipProps, HTMLAnchorElement> = forwardRef((props, ref)
             )}
             aria-disabled={(isClickable && isDisabled) || undefined}
             onClick={hasOnClick ? onClick : undefined}
-            onKeyDown={hasOnClick ? onEnterPressed(onClick) : undefined}
+            onKeyDown={handleKeyDown}
         >
             {before && (
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions

package/src/components/select/Select.tsx

@@ -13,6 +13,7 @@ import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
 
 import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import { WithSelectContext } from './WithSelectContext';
 import { CoreSelectProps, SelectVariant } from './constants';
@@ -61,6 +62,7 @@ const SelectField: React.FC<SelectProps> = ({
     theme,
     value,
     variant,
+    selectElementRef,
     ...forwardedProps
 }) => {
     return (
@@ -82,7 +84,7 @@ const SelectField: React.FC<SelectProps> = ({
 
                     {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                     <div
-                        ref={anchorRef as RefObject<HTMLDivElement>}
+                        ref={mergeRefs(anchorRef as RefObject<HTMLDivElement>, selectElementRef)}
                         id={id}
                         className={`${CLASSNAME}__wrapper`}
                         onClick={onInputClick}
@@ -145,7 +147,7 @@ const SelectField: React.FC<SelectProps> = ({
                     after={<Icon icon={isEmpty ? mdiMenuDown : mdiCloseCircle} />}
                     onAfterClick={isEmpty ? onInputClick : onClear}
                     onClick={onInputClick}
-                    ref={anchorRef as RefObject<HTMLAnchorElement>}
+                    ref={mergeRefs(anchorRef as RefObject<HTMLAnchorElement>, selectElementRef)}
                     theme={theme}
                     {...forwardedProps}
                 >

package/src/components/select/SelectMultiple.tsx

@@ -11,6 +11,7 @@ import { InputLabel } from '@lumx/react/components/input-label/InputLabel';
 
 import { Comp } from '@lumx/react/utils/type';
 import { getRootClassName, handleBasicClasses } from '@lumx/react/utils/className';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import { WithSelectContext } from './WithSelectContext';
 import { CoreSelectProps, SelectVariant } from './constants';
@@ -75,6 +76,7 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
     theme,
     value,
     variant,
+    selectElementRef,
     ...forwardedProps
 }) => (
     <>
@@ -95,7 +97,7 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
 
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                 <div
-                    ref={anchorRef as RefObject<HTMLDivElement>}
+                    ref={mergeRefs(anchorRef as RefObject<HTMLDivElement>, selectElementRef)}
                     id={id}
                     className={`${CLASSNAME}__wrapper`}
                     onClick={onInputClick}
@@ -150,7 +152,7 @@ export const SelectMultipleField: React.FC<SelectMultipleProps> = ({
                 after={<Icon icon={isEmpty ? mdiMenuDown : mdiCloseCircle} />}
                 onAfterClick={isEmpty ? onInputClick : onClear}
                 onClick={onInputClick}
-                ref={anchorRef as RefObject<HTMLAnchorElement>}
+                ref={mergeRefs(anchorRef as RefObject<HTMLAnchorElement>, selectElementRef)}
                 theme={theme}
                 {...forwardedProps}
             >

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

@@ -124,7 +124,7 @@ describe(`<${TextField.displayName}>`, () => {
             });
 
             expect(helper).toHaveTextContent('helper');
-            expect(inputNative).toHaveAttribute('aria-describedby');
+            expect(inputNative).toHaveAccessibleDescription('helper');
         });
 
         it('should have error text', () => {
@@ -137,7 +137,7 @@ describe(`<${TextField.displayName}>`, () => {
 
             expect(error).toHaveTextContent('error');
             expect(inputNative).toHaveAttribute('aria-invalid', 'true');
-            expect(inputNative).toHaveAttribute('aria-describedby');
+            expect(inputNative).toHaveAccessibleDescription('error');
         });
 
         it('should not have error text', () => {
@@ -151,7 +151,7 @@ describe(`<${TextField.displayName}>`, () => {
         });
 
         it('should have error and helper text', () => {
-            const { error, helper } = setup({
+            const { error, helper, inputNative } = setup({
                 error: 'error',
                 hasError: true,
                 helper: 'helper',
@@ -160,6 +160,21 @@ describe(`<${TextField.displayName}>`, () => {
             });
             expect(error).toHaveTextContent('error');
             expect(helper).toHaveTextContent('helper');
+            expect(inputNative).toHaveAccessibleDescription('error helper');
+        });
+
+        it('should have error and helper text and custom aria describedby', () => {
+            const { error, helper, inputNative } = setup({
+                error: 'error',
+                hasError: true,
+                helper: 'helper',
+                label: 'test',
+                placeholder: 'test',
+                'aria-describedby': 'aria-description',
+            });
+            expect(error).toHaveTextContent('error');
+            expect(helper).toHaveTextContent('helper');
+            expect(inputNative).toHaveAttribute('aria-describedby', expect.stringContaining('aria-description'));
         });
     });
 

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

@@ -309,7 +309,7 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
      */
     const helperId = helper ? `text-field-helper-${uid()}` : undefined;
     const errorId = error ? `text-field-error-${uid()}` : undefined;
-    const describedByIds = [errorId, helperId].filter(Boolean);
+    const describedByIds = [errorId, helperId, forwardedProps['aria-describedby']].filter(Boolean);
     const describedById = describedByIds.length === 0 ? undefined : describedByIds.join(' ');
 
     const [isFocus, setFocus] = useState(false);