From 095bf9e167c84377eb8a2750b50ccf8acb228ddf Mon Sep 17 00:00:00 2001
From: Daniil Suvorov <severecloud@gmail.com>
Date: Fri, 15 Mar 2024 12:43:39 +0300
Subject: [PATCH] docs: Button with icon add label (#6697)

- Fixes #4929
---
 .../ButtonGroup/ButtonGroup.stories.tsx       | 67 ++++++++++++++---
 .../vkui/src/components/ButtonGroup/Readme.md | 74 ++++++++++++++++---
 .../vkui/src/components/Popover/Readme.md     |  2 +-
 3 files changed, 123 insertions(+), 20 deletions(-)

diff --git a/packages/vkui/src/components/ButtonGroup/ButtonGroup.stories.tsx b/packages/vkui/src/components/ButtonGroup/ButtonGroup.stories.tsx
index 825ec5bf0f..39bb63adbd 100644
--- a/packages/vkui/src/components/ButtonGroup/ButtonGroup.stories.tsx
+++ b/packages/vkui/src/components/ButtonGroup/ButtonGroup.stories.tsx
@@ -19,6 +19,7 @@ type Story = StoryObj<ButtonGroupProps>;
 
 const ButtonText = 'Button';
 const StretchedButtonText = 'Button (stretched)';
+const ButtonWithIconLabel = 'Кнопка с иконкой';
 
 export const Playground: Story = {
   args: {
@@ -30,10 +31,32 @@ export const Playground: Story = {
         <Button size="l" appearance="accent" stretched>
           {StretchedButtonText}
         </Button>
-        <Button size="m" appearance="accent" before={<Icon24Add />} />
-        <Button size="m" appearance="accent" before={<Icon24Add />} stretched />
-        <Button size="s" appearance="accent" before={<Icon16Add />} />
-        <Button size="s" appearance="accent" before={<Icon16Add />} stretched />
+        <Button
+          size="m"
+          appearance="accent"
+          before={<Icon24Add />}
+          aria-label={ButtonWithIconLabel}
+        />
+        <Button
+          size="m"
+          appearance="accent"
+          before={<Icon24Add />}
+          aria-label={ButtonWithIconLabel}
+          stretched
+        />
+        <Button
+          size="s"
+          appearance="accent"
+          before={<Icon16Add />}
+          aria-label={ButtonWithIconLabel}
+        />
+        <Button
+          size="s"
+          appearance="accent"
+          before={<Icon16Add />}
+          aria-label={ButtonWithIconLabel}
+          stretched
+        />
       </>
     ),
   },
@@ -53,21 +76,36 @@ export const NestedButtonGroup: Story = {
           <Button size="l" appearance="accent" stretched>
             {StretchedButtonText}
           </Button>
-          <Button size="l" appearance="accent" before={<Icon24Add />} />
+          <Button
+            size="l"
+            appearance="accent"
+            before={<Icon24Add />}
+            aria-label={ButtonWithIconLabel}
+          />
         </ButtonGroup>
 
         <ButtonGroup mode="horizontal" gap="m" stretched style={ButtonGroupHighlightStyles}>
           <Button size="l" appearance="accent">
             {ButtonText}
           </Button>
-          <Button size="l" appearance="accent" before={<Icon24Add />} />
+          <Button
+            size="l"
+            appearance="accent"
+            before={<Icon24Add />}
+            aria-label={ButtonWithIconLabel}
+          />
         </ButtonGroup>
 
         <ButtonGroup mode="horizontal" gap="m" stretched={false} style={ButtonGroupHighlightStyles}>
           <Button size="l" appearance="accent">
             {ButtonText}
           </Button>
-          <Button size="l" appearance="accent" before={<Icon24Add />} />
+          <Button
+            size="l"
+            appearance="accent"
+            before={<Icon24Add />}
+            aria-label={ButtonWithIconLabel}
+          />
         </ButtonGroup>
 
         <ButtonGroup mode="horizontal" gap="m" stretched style={ButtonGroupHighlightStyles}>
@@ -86,9 +124,20 @@ export const NestedButtonGroup: Story = {
           <Button size="l" appearance="accent" stretched>
             {StretchedButtonText}
           </Button>
-          <Button size="l" appearance="accent" before={<Icon24Add />} stretched />
+          <Button
+            size="l"
+            appearance="accent"
+            before={<Icon24Add />}
+            aria-label={ButtonWithIconLabel}
+            stretched
+          />
           <ButtonGroup mode="horizontal" stretched style={ButtonGroupHighlightStyles}>
-            <Button size="l" appearance="accent" before={<Icon24Add />} />
+            <Button
+              size="l"
+              appearance="accent"
+              before={<Icon24Add />}
+              aria-label={ButtonWithIconLabel}
+            />
             <Button size="l" appearance="accent" stretched>
               {StretchedButtonText}
             </Button>
diff --git a/packages/vkui/src/components/ButtonGroup/Readme.md b/packages/vkui/src/components/ButtonGroup/Readme.md
index 7349cca30e..186aabcc79 100644
--- a/packages/vkui/src/components/ButtonGroup/Readme.md
+++ b/packages/vkui/src/components/ButtonGroup/Readme.md
@@ -151,6 +151,7 @@ const ExampleUseCases = () => {
 
 const buttonText = 'Button';
 const stretchedButtonText = 'Button (stretched)';
+const buttonWithIconLabel = 'Кнопка с иконкой';
 
 const buttonGroupHighlightStyles = {
   border: '2px dotted tomato',
@@ -179,8 +180,19 @@ const ExampleBase = () => {
           <Button size="l" appearance="accent" stretched>
             {stretchedButtonText}
           </Button>
-          <Button size="l" appearance="accent" before={<Icon24Add />} />
-          <Button size="l" appearance="accent" before={<Icon24Add />} stretched />
+          <Button
+            size="l"
+            appearance="accent"
+            before={<Icon24Add />}
+            aria-label={buttonWithIconLabel}
+          />
+          <Button
+            size="l"
+            appearance="accent"
+            before={<Icon24Add />}
+            aria-label={buttonWithIconLabel}
+            stretched
+          />
         </ButtonGroup>
       </Div>
       <FormItem>
@@ -237,14 +249,24 @@ const ExampleNested = () => {
             <Button size="l" appearance="accent" stretched>
               {stretchedButtonText}
             </Button>
-            <Button size="l" appearance="accent" before={<Icon24Add />} />
+            <Button
+              size="l"
+              appearance="accent"
+              before={<Icon24Add />}
+              aria-label={buttonWithIconLabel}
+            />
           </ButtonGroup>
 
           <ButtonGroup mode="horizontal" gap="m" stretched style={buttonGroupHighlightStyles}>
             <Button size="l" appearance="accent">
               {buttonText}
             </Button>
-            <Button size="l" appearance="accent" before={<Icon24Add />} />
+            <Button
+              size="l"
+              appearance="accent"
+              before={<Icon24Add />}
+              aria-label={buttonWithIconLabel}
+            />
           </ButtonGroup>
 
           <ButtonGroup
@@ -256,7 +278,12 @@ const ExampleNested = () => {
             <Button size="l" appearance="accent">
               {buttonText}
             </Button>
-            <Button size="l" appearance="accent" before={<Icon24Add />} />
+            <Button
+              size="l"
+              appearance="accent"
+              before={<Icon24Add />}
+              aria-label={buttonWithIconLabel}
+            />
           </ButtonGroup>
 
           <ButtonGroup mode="horizontal" gap="m" stretched style={buttonGroupHighlightStyles}>
@@ -274,9 +301,20 @@ const ExampleNested = () => {
             <Button size="l" appearance="accent" stretched>
               {stretchedButtonText}
             </Button>
-            <Button size="l" appearance="accent" before={<Icon24Add />} stretched />
+            <Button
+              size="l"
+              appearance="accent"
+              before={<Icon24Add />}
+              aria-label={buttonWithIconLabel}
+              stretched
+            />
             <ButtonGroup mode="horizontal" stretched style={buttonGroupHighlightStyles}>
-              <Button size="l" appearance="accent" before={<Icon24Add />} />
+              <Button
+                size="l"
+                appearance="accent"
+                before={<Icon24Add />}
+                aria-label={buttonWithIconLabel}
+              />
               <Button size="l" appearance="accent" stretched>
                 {stretchedButtonText}
               </Button>
@@ -312,15 +350,31 @@ const ExampleNested = () => {
             <Button size="l" appearance="accent">
               {buttonText}
             </Button>
-            <Button size="l" appearance="accent" before={<Icon24Add />} />
+            <Button
+              size="l"
+              appearance="accent"
+              before={<Icon24Add />}
+              aria-label={buttonWithIconLabel}
+            />
           </ButtonGroup>
           <ButtonGroup mode="vertical" gap="m" stretched={false} style={buttonGroupHighlightStyles}>
             <Button size="l" appearance="accent" stretched>
               {stretchedButtonText}
             </Button>
-            <Button size="l" appearance="accent" before={<Icon24Add />} stretched />
+            <Button
+              size="l"
+              appearance="accent"
+              before={<Icon24Add />}
+              aria-label={buttonWithIconLabel}
+              stretched
+            />
             <ButtonGroup mode="horizontal" stretched style={buttonGroupHighlightStyles}>
-              <Button size="l" appearance="accent" before={<Icon24Add />} />
+              <Button
+                size="l"
+                appearance="accent"
+                before={<Icon24Add />}
+                aria-label={buttonWithIconLabel}
+              />
               <Button size="l" appearance="accent" stretched>
                 {stretchedButtonText}
               </Button>
diff --git a/packages/vkui/src/components/Popover/Readme.md b/packages/vkui/src/components/Popover/Readme.md
index f82e6492a3..fb06f13058 100644
--- a/packages/vkui/src/components/Popover/Readme.md
+++ b/packages/vkui/src/components/Popover/Readme.md
@@ -169,7 +169,7 @@ const PopoverWithTriggerManual = () => {
       content={({ onClose }) => (
         <div style={{ display: 'flex', position: 'relative', width: 180, height: 100 }}>
           <div style={{ position: 'absolute', top: 0, right: 0 }}>
-            <IconButton onClick={onClose}>
+            <IconButton label="Закрыть" onClick={onClose}>
               <Icon16Clear />
             </IconButton>
           </div>