docs(Image): add alt

- closed #4987
VKCOM · Mar 15, 2024 · 758c686 · 758c686
1 parent 99afe21
commit 758c686
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 9 deletions.
diff --git a/packages/vkui/src/components/Avatar/Avatar.stories.tsx b/packages/vkui/src/components/Avatar/Avatar.stories.tsx
@@ -75,6 +75,9 @@ export default story;
 type Story = StoryObj<AvatarStoryProps>;
 
 export const Playground: Story = {
+  args: {
+    alt: 'Фотография Татьяны Плуталовой',
+  },
   render: ({ badge, overlay, children, size = 48, ...args }) => (
     <Avatar src={args.initials ? undefined : getAvatarUrl('user_id34')} {...args} size={size}>
       {size >= 24 && badge}
@@ -87,6 +90,7 @@ export const Playground: Story = {
 export const WithBadge: Story = {
   ...Playground,
   args: {
+    ...Playground.args,
     children: (
       <Avatar.Badge>
         <IconExampleForBadgeBasedOnImageBaseSize />
@@ -98,8 +102,9 @@ export const WithBadge: Story = {
 export const WithOverlay: Story = {
   ...Playground,
   args: {
+    ...Playground.args,
     children: (
-      <Avatar.Overlay>
+      <Avatar.Overlay aria-label="Кнопка для изображения">
         <IconExampleForOverlayBasedOnImageBaseSize />
       </Avatar.Overlay>
     ),

diff --git a/packages/vkui/src/components/Avatar/Readme.md b/packages/vkui/src/components/Avatar/Readme.md
@@ -82,7 +82,7 @@ const OthersFeatures = () => {
               )
             )}
             {overlay && (
-              <Avatar.Overlay {...overlay}>
+              <Avatar.Overlay aria-label="Кнопка для изображения" {...overlay}>
                 <IconExampleForOverlayBasedOnImageBaseSize />
               </Avatar.Overlay>
             )}

diff --git a/packages/vkui/src/components/Image/Image.stories.tsx b/packages/vkui/src/components/Image/Image.stories.tsx
@@ -16,5 +16,6 @@ type Story = StoryObj<ImageProps>;
 export const Playground: Story = {
   args: {
     src: getAvatarUrl('app_shorm_online'),
+    alt: 'Приложение шторм онлайн',
   },
 };
diff --git a/packages/vkui/src/components/Image/Readme.md b/packages/vkui/src/components/Image/Readme.md
@@ -4,7 +4,10 @@
 const Default = () => {
   return (
     <Group header={<Header mode="secondary">По умолчанию</Header>}>
-      <SimpleCell before={<Image src={getAvatarUrl('app_shorm_online')} />} description="Ролевая">
+      <SimpleCell
+        before={<Image src={getAvatarUrl('app_shorm_online')} alt="Приложение шторм онлайн" />}
+        description="Ролевая"
+      >
         Шторм онлайн
       </SimpleCell>
     </Group>
@@ -39,6 +42,7 @@ const OthersFeatures = () => {
             key={size}
             size={size}
             src={getAvatarUrl('app_shorm_online')}
+            alt="Приложение шторм онлайн"
             borderRadius={borderRadius}
           >
             {size >= 24 && badge && (
@@ -47,7 +51,7 @@ const OthersFeatures = () => {
               </Image.Badge>
             )}
             {overlay && (
-              <Image.Overlay {...overlay}>
+              <Image.Overlay aria-label="Кнопка для изображения" {...overlay}>
                 <IconExampleForOverlayBasedOnImageBaseSize />
               </Image.Overlay>
             )}

diff --git a/packages/vkui/src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.stories.tsx b/packages/vkui/src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.stories.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import { CanvasFullLayout, DisableCartesianParam } from '../../../storybook/constants';
+import { getAvatarUrl } from '../../../testing/mock';
+import { ImageBase } from '../ImageBase';
 import { ImageBaseOverlay, ImageBaseOverlayProps } from './ImageBaseOverlay';
 
 const story: Meta<ImageBaseOverlayProps> = {
@@ -14,12 +16,14 @@ export default story;
 type Story = StoryObj<ImageBaseOverlayProps>;
 
 export const Playground: Story = {
-  render: ({ children, ...args }) => <ImageBaseOverlay {...args}>{children}</ImageBaseOverlay>,
+  args: {
+    'aria-label': 'Кнопка для изображения',
+  },
   decorators: [
-    (Component, context) => (
-      <div style={{ width: 50, height: 50, border: '1px dashed red', position: 'relative' }}>
-        <Component args={{ ...context.args }} />
-      </div>
+    (Component) => (
+      <ImageBase size={48} src={getAvatarUrl('app_shorm_online')} alt="Приложение шторм онлайн">
+        <Component />
+      </ImageBase>
     ),
   ],
 };