docs: Button with icon add label (#6697)

- Fixes #4929
VKCOM · Mar 15, 2024 · 095bf9e · 095bf9e
1 parent feec4f1
commit 095bf9e
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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>