Titles in attribute annotations mode

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx

@@ -226,6 +226,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
                     occluded={activeObjectState.occluded}
                     objectsCount={states.length}
                     currentIndex={states.indexOf(activeObjectState)}
+                    keyMap={keyMap}
                     nextObject={nextObject}
                 />
                 <ObjectBasicsEditor
@@ -253,6 +254,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
                                     currentIndex={activeObjectState.label.attributes
                                         .indexOf(activeAttribute)}
                                     attributesCount={activeObjectState.label.attributes.length}
+                                    keyMap={keyMap}
                                     nextAttribute={nextAttribute}
                                 />
                                 <AttributeEditor

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx

@@ -3,15 +3,19 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
+import { ExtendedKeyMapOptions } from 'react-hotkeys';
 import Icon from 'antd/lib/icon';
 import Text from 'antd/lib/typography/Text';
 import Tooltip from 'antd/lib/tooltip';
 import Button from 'antd/lib/button';
 
+import { formatShortcuts } from 'utils/shortcuts';
+
 interface Props {
     currentAttribute: string;
     currentIndex: number;
     attributesCount: number;
+    keyMap: Record<string, ExtendedKeyMapOptions>;
     nextAttribute(step: number): void;
 }
 
@@ -21,21 +25,26 @@ function AttributeSwitcher(props: Props): JSX.Element {
         currentIndex,
         attributesCount,
         nextAttribute,
+        keyMap,
     } = props;
 
     const title = `${currentAttribute} [${currentIndex + 1}/${attributesCount}]`;
     return (
         <div className='attribute-annotation-sidebar-switcher'>
-            <Button disabled={attributesCount <= 1} onClick={() => nextAttribute(-1)}>
-                <Icon type='left' />
-            </Button>
+            <Tooltip title={`Previous attribute ${formatShortcuts(keyMap.PREVIOUS_ATTRIBUTE)}`}>
+                <Button disabled={attributesCount <= 1} onClick={() => nextAttribute(-1)}>
+                    <Icon type='left' />
+                </Button>
+            </Tooltip>
             <Tooltip title={title}>
                 <Text className='cvat-text'>{currentAttribute}</Text>
                 <Text strong>{` [${currentIndex + 1}/${attributesCount}]`}</Text>
             </Tooltip>
-            <Button disabled={attributesCount <= 1} onClick={() => nextAttribute(1)}>
-                <Icon type='right' />
-            </Button>
+            <Tooltip title={`Next attribute ${formatShortcuts(keyMap.NEXT_ATTRIBUTE)}`}>
+                <Button disabled={attributesCount <= 1} onClick={() => nextAttribute(1)}>
+                    <Icon type='right' />
+                </Button>
+            </Tooltip>
         </div>
     );
 }

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx

@@ -3,17 +3,21 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
+import { ExtendedKeyMapOptions } from 'react-hotkeys';
 import Icon from 'antd/lib/icon';
 import Text from 'antd/lib/typography/Text';
 import Tooltip from 'antd/lib/tooltip';
 import Button from 'antd/lib/button';
 
+import { formatShortcuts } from 'utils/shortcuts';
+
 interface Props {
     currentLabel: string;
     clientID: number;
     occluded: boolean;
     objectsCount: number;
     currentIndex: number;
+    keyMap: Record<string, ExtendedKeyMapOptions>;
     nextObject(step: number): void;
 }
 
@@ -24,23 +28,28 @@ function ObjectSwitcher(props: Props): JSX.Element {
         objectsCount,
         currentIndex,
         nextObject,
+        keyMap,
     } = props;
 
 
     const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`;
     return (
         <div className='attribute-annotation-sidebar-switcher'>
-            <Button disabled={objectsCount <= 1} onClick={() => nextObject(-1)}>
-                <Icon type='left' />
-            </Button>
+            <Tooltip title={`Previous object ${formatShortcuts(keyMap.PREVIOUS_OBJECT)}`}>
+                <Button disabled={objectsCount <= 1} onClick={() => nextObject(-1)}>
+                    <Icon type='left' />
+                </Button>
+            </Tooltip>
             <Tooltip title={title}>
                 <Text className='cvat-text'>{currentLabel}</Text>
                 <Text className='cvat-text'>{` ${clientID} `}</Text>
                 <Text strong>{`[${currentIndex + 1}/${objectsCount}]`}</Text>
             </Tooltip>
-            <Button disabled={objectsCount <= 1} onClick={() => nextObject(1)}>
-                <Icon type='right' />
-            </Button>
+            <Tooltip title={`Next object ${formatShortcuts(keyMap.NEXT_OBJECT)}`}>
+                <Button disabled={objectsCount <= 1} onClick={() => nextObject(1)}>
+                    <Icon type='right' />
+                </Button>
+            </Tooltip>
         </div>
     );
 }