CodeReview

Author: dHIM24

.changeset/true-feet-argue.md

@@ -6,12 +6,14 @@
 
 ##### BaseCodeInput
 
-- Добавлен проп `restrictFocus` для включения последовательного ввода:
+- Добавлен проп `strictFocus` для включения последовательного ввода:
     - при клике на ячейку правее первой пустой — фокус остается на первой
     - фокус разрешается только на уже заполненные ячейки и первую пустую ячейку
 
 - Добавлено поведение автоматического фокуса на первый инпут при клике на любое пустое поле
 
+- Улучшена доступность компонента, добавлены `aria-label`.
+
 ##### Confirmation
 
-- Добавлена поддержка пропа `restrictFocus` для использования в `CodeInput`
+- Добавлена поддержка пропа `strictFocus` для использования в `CodeInput`

packages/calendar/src/__snapshots__/Component.test.tsx.snap

@@ -2461,19 +2461,6 @@ exports[`Calendar Display tests should match defaultView="years" snapshot 1`] =
               1926
             </span>
           </button>
-          <button
-            aria-selected="false"
-            class="component text size-40 hug size-40 component text component text button default button"
-            data-date="-1420070400000"
-            tabindex="-1"
-            type="button"
-          >
-            <span
-              class="label stretchText"
-            >
-              1925
-            </span>
-          </button>
         </div>
       </div>
     </div>

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

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

@@ -3,12 +3,15 @@
 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"
@@ -17,6 +20,7 @@ exports[`CodeInput Display tests should display correctly 1`] = `
         value=""
       />
       <input
+        aria-label="Код 2 из 4"
         autocomplete=""
         class="input component"
         data-code-input-index="1"
@@ -25,6 +29,7 @@ exports[`CodeInput Display tests should display correctly 1`] = `
         value=""
       />
       <input
+        aria-label="Код 3 из 4"
         autocomplete=""
         class="input component"
         data-code-input-index="2"
@@ -33,6 +38,7 @@ exports[`CodeInput Display tests should display correctly 1`] = `
         value=""
       />
       <input
+        aria-label="Код 4 из 4"
         autocomplete=""
         class="input component"
         data-code-input-index="3"
@@ -48,12 +54,15 @@ 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"
@@ -62,6 +71,7 @@ exports[`CodeInput Display tests should display correctly with error 1`] = `
         value=""
       />
       <input
+        aria-label="Код 2 из 4"
         autocomplete=""
         class="input component hasError"
         data-code-input-index="1"
@@ -70,6 +80,7 @@ exports[`CodeInput Display tests should display correctly with error 1`] = `
         value=""
       />
       <input
+        aria-label="Код 3 из 4"
         autocomplete=""
         class="input component hasError"
         data-code-input-index="2"
@@ -78,6 +89,7 @@ exports[`CodeInput Display tests should display correctly with error 1`] = `
         value=""
       />
       <input
+        aria-label="Код 4 из 4"
         autocomplete=""
         class="input component hasError"
         data-code-input-index="3"

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

@@ -229,14 +229,14 @@ describe('CodeInput', () => {
             let container: HTMLElement;
             let inputs: NodeListOf<HTMLInputElement>;
 
-            type TFocusCase = {
+            type FocusCase = {
                 name: string;
                 setup: () => Promise<void>;
                 clickIndex: number;
                 expectedFocusIndex: number;
             };
 
-            const focusCases: Array<TFocusCase> = [
+            const focusCases: Array<FocusCase> = [
                 {
                     name: 'should focus first input when clicking on any empty input',
                     setup: async () => {},
@@ -310,7 +310,7 @@ describe('CodeInput', () => {
             });
         });
 
-        describe('restrictFocus', () => {
+        describe('strictFocus', () => {
             let container: HTMLElement;
             let inputs: NodeListOf<HTMLInputElement>;
 
@@ -352,7 +352,7 @@ describe('CodeInput', () => {
             ];
 
             beforeEach(() => {
-                ({ container } = render(<CodeInput restrictFocus={true} />));
+                ({ container } = render(<CodeInput strictFocus />));
                 inputs = getInputs(container);
             });
 
@@ -366,7 +366,7 @@ describe('CodeInput', () => {
                 },
             );
 
-            it('ArrowRight does not move focus when restrictFocus is false and first value is empty', async () => {
+            it('ArrowRight does not move focus when strictFocus is false and first value is empty', async () => {
                 ({ container } = render(<CodeInput />));
                 inputs = getInputs(container);
 
@@ -415,7 +415,7 @@ describe('CodeInput', () => {
                         expectedFocus: 0,
                     },
                 ])('$name', async ({ fields, preset, clickIndex, expectedFocus }) => {
-                    ({ container } = render(<CodeInput fields={fields} restrictFocus={true} />));
+                    ({ container } = render(<CodeInput fields={fields} strictFocus />));
                     inputs = getInputs(container);
 
                     await fillByArray(container, preset);
@@ -427,7 +427,7 @@ describe('CodeInput', () => {
             });
 
             it('ArrowRight focuses first empty when restricted', async () => {
-                ({ container } = render(<CodeInput fields={4} restrictFocus={true} />));
+                ({ container } = render(<CodeInput fields={4} strictFocus />));
                 inputs = getInputs(container);
 
                 await fillByArray(container, ['1', undefined, undefined, undefined]);
@@ -440,7 +440,7 @@ describe('CodeInput', () => {
 
             describe('deletion restrictions', () => {
                 it('click on any filled cell when fully filled keeps that cell focused', async () => {
-                    ({ container } = render(<CodeInput fields={4} restrictFocus={true} />));
+                    ({ container } = render(<CodeInput fields={4} strictFocus />));
                     inputs = getInputs(container);
 
                     await fillByArray(container, ['1', '2', '3', '4']);
@@ -452,7 +452,7 @@ describe('CodeInput', () => {
                 });
 
                 it('after deleting last, clicks on filled cells keep their focus and empty fields redirect', async () => {
-                    ({ container } = render(<CodeInput fields={5} restrictFocus={true} />));
+                    ({ container } = render(<CodeInput fields={5} strictFocus />));
                     inputs = getInputs(container);
 
                     await fillByArray(container, ['1', '2', '3', '4', '5']);