fix: add aria-label for DefinitionList help popover (#208)

gravity-ui · Jul 11, 2024 · ad93fec · ad93fec
1 parent b94ee82
commit ad93fec
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/src/components/DefinitionList/__stories__/DefinitionList.stories.tsx b/src/components/DefinitionList/__stories__/DefinitionList.stories.tsx
@@ -149,6 +149,10 @@ export default {
                         id: 'color-contrast',
                         enabled: false,
                     },
+                    {
+                        id: 'definition-list', // todo: https://github.com/gravity-ui/components/issues/207
+                        enabled: false,
+                    },
                 ],
             },
         },

diff --git a/src/components/DefinitionList/components/Term.tsx b/src/components/DefinitionList/components/Term.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {HelpPopover} from '../../HelpPopover';
+import i18n from '../i18n';
 import {DefinitionListDirection, DefinitionListItemNote, DefinitionListSingleItem} from '../types';
 import {b, getTitle} from '../utils';
 
@@ -19,12 +20,27 @@ function NoteElement({note}: NoteElementsProps) {
                 className={popoverClassName}
                 content={note}
                 placement={['bottom', 'top']}
+                buttonProps={{
+                    'aria-label': i18n('label_note'),
+                }}
             />
         );
     }
 
     if (typeof note === 'object') {
-        return <HelpPopover className={popoverClassName} placement={['bottom', 'top']} {...note} />;
+        const {buttonProps, ...rest} = note;
+
+        return (
+            <HelpPopover
+                className={popoverClassName}
+                placement={['bottom', 'top']}
+                buttonProps={{
+                    'aria-label': i18n('label_note'),
+                    ...buttonProps,
+                }}
+                {...rest}
+            />
+        );
     }
     return null;
 }