fix: save button a11y (#202)

* feat: save button a11y * fix: removed unnecessary aria-label when title is string
gravity-ui · Aug 8, 2024 · ed08069 · ed08069
1 parent cae68d2
commit ed08069
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/components/PostInfo/components/Save.tsx b/src/components/PostInfo/components/Save.tsx
@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
 
 import {AnalyticsEventsProp, useAnalytics} from '@gravity-ui/page-constructor';
-import {Icon} from '@gravity-ui/uikit';
+import {Icon, useUniqId} from '@gravity-ui/uikit';
 
 import {LikesContext} from '../../../contexts/LikesContext';
 import {Save as SaveIcon} from '../../../icons/Save';
@@ -11,6 +11,7 @@ import {block} from '../../../utils/cn';
 import {postLikeStatus} from '../../../utils/common';
 
 import '../PostInfo.scss';
+import {Keyset, i18n} from '../../../i18n';
 
 const ICON_SIZE = 16;
 
@@ -52,6 +53,9 @@ export const Save = ({
     const handleAnalytics = useAnalytics(DefaultEventNames.SaveButton);
     const isLikeable = Boolean(toggleLike);
 
+    const titleElementId = useUniqId();
+    const isNumericTitle = typeof title === 'number';
+
     return (
         <button
             className={b('item', {size, save: true})}
@@ -76,6 +80,9 @@ export const Save = ({
                 handleAnalytics(analyticsEvents);
             }}
             data-qa={qa}
+            aria-pressed={hasUserLike}
+            aria-label={isNumericTitle ? i18n(Keyset.Save) : undefined}
+            aria-describedby={isNumericTitle ? titleElementId : undefined}
         >
             <div className={b('content', {cursor: isLikeable, theme})}>
                 <span className={b('icon')}>
@@ -85,7 +92,9 @@ export const Save = ({
                         className={b({filled: Boolean(hasUserLike)})}
                     />
                 </span>
-                <span className={b('title', {cursor: isLikeable})}>{title}</span>
+                <span id={titleElementId} className={b('title', {cursor: isLikeable})}>
+                    {title}
+                </span>
             </div>
         </button>
     );

diff --git a/src/i18n/index.ts b/src/i18n/index.ts
@@ -22,6 +22,7 @@ export enum Keyset {
     AllServices = 'label_all_services',
     PromptSignInOnLike = 'prompt_sign_in_on_like',
     SignIn = 'Sign In',
+    Save = 'save',
 }
 
 const en = {
@@ -48,6 +49,7 @@ const en = {
         '{{count}} mins to read',
     ],
     [Keyset.SignIn]: 'Sign In',
+    [Keyset.Save]: 'Save',
 };
 
 const ru = {
@@ -75,6 +77,7 @@ const ru = {
         '{{count}} минут чтения',
     ],
     [Keyset.SignIn]: 'Войти',
+    [Keyset.Save]: 'Сохранить',
 };
 
 export const i18n = addComponentKeysets({en, ru}, NAMESPACE);