fix: add aria-label

salute-developers · Apr 16, 2024 · 50ce199 · 50ce199
1 parent 65b4398
commit 50ce199
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 20 deletions.
diff --git a/packages/plasma-new-hope/src/components/Avatar/Avatar.tsx b/packages/plasma-new-hope/src/components/Avatar/Avatar.tsx
@@ -30,6 +30,7 @@ const getAvatarContent = ({
 };
 
 const mergedConfig = mergeConfig(indicatorConfig);
+
 const Indicator: React.FunctionComponent<
     React.HTMLAttributes<HTMLDivElement> & { status: AvatarProps['status'] }
 > = component(mergedConfig) as never;
@@ -40,6 +41,11 @@ const StyledIndicator = styled(Indicator)`
     status === 'active' ? `var(${tokens.statusOnlineColor})` : `var(${tokens.statusOfflineColor})`}
 `;
 
+const StatusDict = {
+    active: 'Активен',
+    inactive: 'Неактивен',
+};
+
 export const avatarRoot = (Root: RootProps<HTMLDivElement, AvatarProps>) => {
     return forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {
         const {
@@ -51,18 +57,33 @@ export const avatarRoot = (Root: RootProps<HTMLDivElement, AvatarProps>) => {
             className,
             focused = true,
             isScalable,
+            'aria-label': ariaLabelProp,
             ...rest
         } = props;
 
         const initials = useMemo(() => getInitialsForName(name), [name]);
+        let ariaLabel;
+
+        // INFO: есть a11y и есть изображение, поэтому нужно озвучить что на нем: включаем aria-label
+        if (rest?.role === 'button' && url) {
+            ariaLabel = !ariaLabelProp || ariaLabelProp.trim() === '' ? name : ariaLabelProp;
+            ariaLabel = status ? `${ariaLabel}. ${StatusDict[status]}` : ariaLabel;
+        }
 
         return (
-            <Root ref={ref} size={avatarSize} className={cx(classes.avatarItem, className)} focused={focused} {...rest}>
+            <Root
+                ref={ref}
+                size={avatarSize}
+                className={cx(classes.avatarItem, className)}
+                aria-label={ariaLabel}
+                focused={focused}
+                {...rest}
+            >
                 <Wrapper isScalable={isScalable}>{getAvatarContent({ customText, url, initials, name })}</Wrapper>
 
                 {status && (
                     <StatusIcon>
-                        <StyledIndicator status={status} />
+                        <StyledIndicator aria-label={StatusDict[status]} status={status} />
                     </StatusIcon>
                 )}
             </Root>

diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Avatar/Avatar.stories.tsx
@@ -36,6 +36,7 @@ export const Default: Story = {
 export const Accessibility: Story = {
     args: {
         role: 'button',
+        'aria-label': 'Иван Фадеев',
         tabIndex: 0,
         view: 'default',
         size: 'xxl',

diff --git a/...es/plasma-new-hope/src/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx b/...es/plasma-new-hope/src/examples/plasma_b2c/components/AvatarGroup/AvatarGroup.stories.tsx
@@ -8,6 +8,7 @@ import { Avatar } from '../Avatar/Avatar';
 import { AvatarGroup } from './AvatarGroup';
 
 type Story = StoryObj<ComponentProps<typeof AvatarGroup>>;
+type Avatar = ComponentProps<typeof Avatar>;
 
 const meta: Meta<typeof AvatarGroup> = {
     title: 'plasma_b2c/AvatarGroup',
@@ -33,40 +34,57 @@ export const Default: Story = {
 
 export const DynamicSize: Story = {
     args: { totalCount: 10, visibleCount: 3 },
-    render: (args: ComponentProps<typeof AvatarGroup>) => {
-        const itemLength = args.totalCount;
+    render: ({ visibleCount, totalCount, ...args }: ComponentProps<typeof AvatarGroup>) => {
+        const itemLength = totalCount;
 
         return (
             <AvatarGroup {...args}>
-                {Array(args.visibleCount)
+                {Array(visibleCount)
                     .fill(true)
                     .map((_, index) => (
-                        <Avatar size="xxl" customText={index + 1} />
+                        <Avatar size="xxl" key={index} customText={index + 1} />
                     ))}
 
-                {itemLength > args.visibleCount && (
-                    <Avatar size="xxl" customText={`+${itemLength - args.visibleCount}`} />
-                )}
+                {itemLength > visibleCount && <Avatar size="xxl" customText={`+${itemLength - visibleCount}`} />}
             </AvatarGroup>
         );
     },
 };
 
+const list: Array<Avatar> = [
+    {
+        name: 'Илья Муромец',
+        status: 'active',
+        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
+    },
+    {
+        name: 'Алеша Попович',
+        status: 'active',
+        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
+    },
+    {
+        name: 'Добрыня Никитич',
+        status: 'active',
+        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
+    },
+    {
+        name: 'Микула Селянинович',
+        status: 'inactive',
+        url: 'https://avatars.githubusercontent.com/u/1813468?v=4',
+    },
+    {
+        name: 'Ставр Годинович',
+        status: 'inactive',
+    },
+];
+
 export const Accessibility: Story = {
     render: (args: ComponentProps<typeof AvatarGroup>) => {
         return (
             <AvatarGroup {...args}>
-                {Array(5)
-                    .fill(true)
-                    .map(() => (
-                        <Avatar
-                            role="button"
-                            tabIndex={0}
-                            focused
-                            size="xxl"
-                            url="https://avatars.githubusercontent.com/u/1813468?v=4"
-                        />
-                    ))}
+                {list.map((props) => (
+                    <Avatar role="button" tabIndex={0} focused key={props.name} size="xxl" {...props} />
+                ))}
             </AvatarGroup>
         );
     },