feat(code-input): добавлено поведение фокуса на первый инпут при клике на любое пустое поле [DS-12539]

.changeset/true-feet-argue.md

@@ -0,0 +1,19 @@
+---
+'@alfalab/core-components': minor
+'@alfalab/core-components-code-input': minor
+'@alfalab/core-components-confirmation': minor
+---
+
+##### BaseCodeInput
+
+- Добавлен проп `strictFocus` для включения последовательного ввода:
+    - при клике на ячейку правее первой пустой — фокус остается на первой
+    - фокус разрешается только на уже заполненные ячейки и первую пустую ячейку
+
+- Добавлено поведение автоматического фокуса на первый инпут при клике на любое пустое поле
+
+- Улучшена доступность компонента, добавлены `aria-label`.
+
+##### Confirmation
+
+- Добавлена поддержка пропа `strictFocus` для использования в `CodeInput`

packages/code-input/src/Component.responsive.tsx

@@ -6,7 +6,7 @@ import { CodeInputDesktop } from './desktop';
 import { CodeInputMobile } from './mobile';
 import { type BaseCodeInputProps, type CustomInputRef } from './typings';
 
-export type CodeInputProps = Omit<BaseCodeInputProps, 'stylesInput'> & {
+export interface CodeInputProps extends Omit<BaseCodeInputProps, 'stylesInput>'> {
     /**
      * Контрольная точка, с нее начинается desktop версия
      * @default 1024
@@ -23,7 +23,7 @@ export type CodeInputProps = Omit<BaseCodeInputProps, 'stylesInput'> & {
      * @deprecated Используйте client
      */
     defaultMatchMediaValue?: boolean | (() => boolean);
-};
+}
 
 export const CodeInput = forwardRef<CustomInputRef, CodeInputProps>(
     (

packages/code-input/src/__snapshots__/component.test.tsx.snap

@@ -3,35 +3,45 @@
 exports[`CodeInput Display tests should display correctly 1`] = `
 <div>
   <div
+    aria-label="Код подтверждения"
     class="component"
+    role="group"
   >
     <div
       class=""
     >
       <input
+        aria-label="Код 1 из 4"
         autocomplete="one-time-code"
         class="input component"
+        data-code-input-index="0"
         inputmode="numeric"
         pattern="[0-9]*"
         value=""
       />
       <input
+        aria-label="Код 2 из 4"
         autocomplete=""
         class="input component"
+        data-code-input-index="1"
         inputmode="numeric"
         pattern="[0-9]*"
         value=""
       />
       <input
+        aria-label="Код 3 из 4"
         autocomplete=""
         class="input component"
+        data-code-input-index="2"
         inputmode="numeric"
         pattern="[0-9]*"
         value=""
       />
       <input
+        aria-label="Код 4 из 4"
         autocomplete=""
         class="input component"
+        data-code-input-index="3"
         inputmode="numeric"
         pattern="[0-9]*"
         value=""
@@ -44,35 +54,45 @@ exports[`CodeInput Display tests should display correctly 1`] = `
 exports[`CodeInput Display tests should display correctly with error 1`] = `
 <div>
   <div
+    aria-label="Код подтверждения"
     class="component"
+    role="group"
   >
     <div
       class="shake"
     >
       <input
+        aria-label="Код 1 из 4"
         autocomplete="one-time-code"
         class="input component hasError"
+        data-code-input-index="0"
         inputmode="numeric"
         pattern="[0-9]*"
         value=""
       />
       <input
+        aria-label="Код 2 из 4"
         autocomplete=""
         class="input component hasError"
+        data-code-input-index="1"
         inputmode="numeric"
         pattern="[0-9]*"
         value=""
       />
       <input
+        aria-label="Код 3 из 4"
         autocomplete=""
         class="input component hasError"
+        data-code-input-index="2"
         inputmode="numeric"
         pattern="[0-9]*"
         value=""
       />
       <input
+        aria-label="Код 4 из 4"
         autocomplete=""
         class="input component hasError"
+        data-code-input-index="3"
         inputmode="numeric"
         pattern="[0-9]*"
         value=""