feat(ChipsInputBase): add cycle navigates between chips (#6395)

h2. Описание - Добавил цикличную навигацию стрелками между чипами. https://github.com/VKCOM/VKUI/assets/5850354/a849e56c-9912-4cd3-802a-97f224d9f03b - Покрыл тестами `ChipsSelect`, `ChipsInputBase`, `Chip`. - `Chip` - теперь принимает `readOnly`. При его передаче, скрывается кнопка удаления чипа; - для корректного произношения скринридером, добавил ` ` перед скрытым текстом `"Удалить <children>"`.
VKCOM · Jan 23, 2024 · 43e7905 · 43e7905
1 parent 3dd1fcb
commit 43e7905
Show file tree

Hide file tree

Showing 12 changed files with 663 additions and 287 deletions.
diff --git a/packages/vkui/src/components/ChipsInput/Readme.md b/packages/vkui/src/components/ChipsInput/Readme.md
@@ -63,7 +63,7 @@ const Example = () => {
           <FormItem htmlFor="color" top="Цвет (контролируемый компонент)">
             <ChipsInput
               id="color"
-              inputLabel="Введите цвета"
+              placeholder="Введите цвета"
               after={
                 <IconButton hoverMode="opacity" label="Очистить поле" onClick={onClick}>
                   <Icon16Clear />

diff --git a/packages/vkui/src/components/ChipsInput/useChipsInput.ts b/packages/vkui/src/components/ChipsInput/useChipsInput.ts
@@ -104,6 +104,7 @@ export const useChipsInput = <O extends ChipOption>({
   );
 
   const clearInput = React.useCallback(() => {
+    /* istanbul ignore if */
     if (!inputRef.current) {
       return;
     }

diff --git a/packages/vkui/src/components/ChipsInputBase/Chip/Chip.test.tsx b/packages/vkui/src/components/ChipsInputBase/Chip/Chip.test.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import { baselineComponent, userEvent } from '../../../testing/utils';
+import { act, render, screen } from '@testing-library/react';
+import { baselineComponent, fakeTimers, userEvent } from '../../../testing/utils';
 import { Chip } from './Chip';
 
-describe('Chip', () => {
+describe(Chip, () => {
   baselineComponent(Chip, {
     // TODO [a11y]: "Certain ARIA roles must be contained by particular parents (aria-required-parent)"
     //              https://dequeuniversity.com/rules/axe/4.5/aria-required-parent?application=axeAPI
@@ -12,6 +12,8 @@ describe('Chip', () => {
     a11y: false,
   });
 
+  fakeTimers();
+
   it('removes chip on onRemove click', async () => {
     const onRemove = jest.fn();
 
@@ -21,8 +23,45 @@ describe('Chip', () => {
       </Chip>,
     );
 
-    await userEvent.click(screen.getByRole('button'));
+    await act(() => userEvent.click(screen.getByRole('button')));
 
     expect(onRemove).toHaveBeenCalled();
   });
+
+  it('hides remove button if readOnly', async () => {
+    const result = render(<Chip value="white">Белый</Chip>);
+
+    expect(screen.getByRole('button')).toBeTruthy();
+
+    result.rerender(
+      <Chip value="white" readOnly>
+        Белый
+      </Chip>,
+    );
+    expect(() => screen.getByRole('button')).toThrow();
+  });
+
+  it.each([{ readOnly: false }, { readOnly: true }])(
+    'calls user events (`readOnly` prop is `$readOnly`)',
+    async ({ readOnly }) => {
+      const onFocus = jest.fn();
+      const onBlur = jest.fn();
+      render(
+        <Chip
+          value="white"
+          readOnly={readOnly}
+          data-testid="input"
+          tabIndex={0}
+          onFocus={onFocus}
+          onBlur={onBlur}
+        />,
+      );
+
+      await act(() => userEvent.tab());
+      await act(() => userEvent.tab({ shift: true }));
+
+      expect(onFocus).toHaveBeenCalled();
+      expect(onBlur).toHaveBeenCalled();
+    },
+  );
 });
diff --git a/packages/vkui/src/components/ChipsInputBase/Chip/Chip.tsx b/packages/vkui/src/components/ChipsInputBase/Chip/Chip.tsx
@@ -27,6 +27,7 @@ export const Chip = ({
   before,
   after,
   disabled,
+  readOnly,
   children,
   className,
   onFocus: onFocusProp,
@@ -38,17 +39,17 @@ export const Chip = ({
   const focusVisibleClassName = useFocusVisibleClassName({ focusVisible });
 
   const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
-    onFocus(event);
     if (onFocusProp) {
       onFocusProp(event);
     }
+    onFocus(event);
   };
 
   const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
-    onBlur(event);
     if (onBlurProp) {
       onBlurProp(event);
     }
+    onBlur(event);
   };
 
   const onRemoveWrapper = React.useCallback(
@@ -68,6 +69,7 @@ export const Chip = ({
         focusVisibleClassName,
         className,
       )}
+      aria-readonly={readOnly}
       aria-disabled={disabled}
       onFocus={disabled ? undefined : handleFocus}
       onBlur={disabled ? undefined : handleBlur}
@@ -77,7 +79,7 @@ export const Chip = ({
         <Footnote className={styles['Chip__content']}>{children}</Footnote>
         {hasReactNode(after) && <div className={styles['Chip__after']}>{after}</div>}
       </div>
-      {removable && (
+      {!readOnly && removable && (
         <div className={styles['Chip__removable']}>
           <button
             tabIndex={-1} // [reason]: чтобы можно было выставлять состояние фокуса только программно через `*.focus()`
@@ -86,7 +88,7 @@ export const Chip = ({
             onClick={disabled ? undefined : onRemoveWrapper}
           >
             <VisuallyHidden>
-              {removeLabel} {children}
+              &nbsp; {removeLabel} {children}
             </VisuallyHidden>
             <Icon16Cancel />
           </button>

diff --git a/packages/vkui/src/components/ChipsInputBase/ChipsInputBase.module.css b/packages/vkui/src/components/ChipsInputBase/ChipsInputBase.module.css
@@ -33,7 +33,7 @@
   appearance: none;
 }
 
-.ChipsInputBase__el:focus {
+.ChipsInputBase__el:not(:read-only):focus {
   min-inline-size: 64px;
 }