Repository: gravity-ui/uikit
Pull request #1172 (2023-11-29 18:58:10)

fix(a11y): make a short text for the clear button
FORMS-10922

gravity-ui-bot: [Playwright Test Component](https://storage.yandexcloud.net/playwright-reports/uikit/pulls/1172/index.html) is ready.
<!-- Sticky Pull Request Commentplaywright test -->
gravity-ui-bot: [Preview](https://preview.gravity-ui.com/uikit/1172/) is ready.
<!-- Sticky Pull Request Comment -->

Patch:
diff --git a/src/components/controls/common/ClearButton/i18n/en.json b/src/components/controls/common/ClearButton/i18n/en.json
index 2872f35a..897f6c98 100644
--- a/src/components/controls/common/ClearButton/i18n/en.json
+++ b/src/components/controls/common/ClearButton/i18n/en.json
@@ -1,3 +1,3 @@
 {
-    "label_clear-button": "Clear input value"
+    "label_clear-button": "Clear"
 }
diff --git a/src/components/controls/common/ClearButton/i18n/ru.json b/src/components/controls/common/ClearButton/i18n/ru.json
index ade62101..d6405d16 100644
--- a/src/components/controls/common/ClearButton/i18n/ru.json
+++ b/src/components/controls/common/ClearButton/i18n/ru.json
@@ -1,3 +1,3 @@
 {
-    "label_clear-button": "Очистить введённое значение"
+    "label_clear-button": "Очистить"
 }


Test patch:
diff --git a/src/components/controls/TextArea/__tests__/TextArea.test.tsx b/src/components/controls/TextArea/__tests__/TextArea.test.tsx
index 90e1441b..b5b918b6 100644
--- a/src/components/controls/TextArea/__tests__/TextArea.test.tsx
+++ b/src/components/controls/TextArea/__tests__/TextArea.test.tsx
@@ -39,19 +39,17 @@ describe('TextArea', () => {
             render(<TextArea hasClear />);
             const user = userEvent.setup();
             const input = screen.getByRole('textbox');
-            let clearButton = screen.queryByRole('button', {name: 'Clear input value'});
+            let clearButton = screen.queryByRole('button', {name: 'Clear'});
             expect(clearButton).not.toBeInTheDocument();
             await user.type(input, 'abc');
-            clearButton = screen.queryByRole('button', {name: 'Clear input value'});
+            clearButton = screen.queryByRole('button', {name: 'Clear'});
             expect(clearButton).toBeInTheDocument();
         });
 
         test('do not render clear button without hasClear prop', () => {
             render(<TextArea />);
 
-            expect(
-                screen.queryByRole('button', {name: 'Clear input value'}),
-            ).not.toBeInTheDocument();
+            expect(screen.queryByRole('button', {name: 'Clear'})).not.toBeInTheDocument();
         });
 
         test('call onChange when input changes value', () => {
@@ -79,7 +77,7 @@ describe('TextArea', () => {
             render(<TextArea hasClear onChange={onChangeFn} />);
             const input = screen.getByRole('textbox');
             await user.type(input, 'abc');
-            const clear = screen.getByRole('button', {name: 'Clear input value'});
+            const clear = screen.getByRole('button', {name: 'Clear'});
 
             if (clear) {
                 await user.click(clear);
diff --git a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
index 010bc7bb..d997ca7e 100644
--- a/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
+++ b/src/components/controls/TextInput/__tests__/TextInput.input.test.tsx
@@ -40,19 +40,17 @@ describe('TextInput input', () => {
                 render(<TextInput hasClear />);
                 const user = userEvent.setup();
                 const input = screen.getByRole('textbox');
-                let clearButton = screen.queryByRole('button', {name: 'Clear input value'});
+                let clearButton = screen.queryByRole('button', {name: 'Clear'});
                 expect(clearButton).not.toBeInTheDocument();
                 await user.type(input, 'abc');
-                clearButton = screen.queryByRole('button', {name: 'Clear input value'});
+                clearButton = screen.queryByRole('button', {name: 'Clear'});
                 expect(clearButton).toBeInTheDocument();
             });
 
             test('do not render clear button without hasClear prop', () => {
                 render(<TextInput />);
 
-                expect(
-                    screen.queryByRole('button', {name: 'Clear input value'}),
-                ).not.toBeInTheDocument();
+                expect(screen.queryByRole('button', {name: 'Clear'})).not.toBeInTheDocument();
             });
 
             test('call onChange when input changes value', () => {
@@ -80,7 +78,7 @@ describe('TextInput input', () => {
                 render(<TextInput hasClear onChange={onChangeFn} />);
                 const input = screen.getByRole('textbox');
                 await user.type(input, 'abc');
-                const clear = screen.getByRole('button', {name: 'Clear input value'});
+                const clear = screen.getByRole('button', {name: 'Clear'});
 
                 if (clear) {
                     await user.click(clear);