feat(chat): add tooltip for each chat screen tab

This commit is contained in:
Calin-Teodor
2025-08-18 15:40:25 +03:00
committed by Calinteodor
parent 5814c4dda7
commit 142d4441c1
2 changed files with 37 additions and 24 deletions

View File

@@ -17,6 +17,7 @@ interface ITabProps {
icon?: Function;
id: string;
label?: string;
title?: string;
}>;
}
@@ -126,26 +127,34 @@ const Tabs = ({
aria-label = { accessibilityLabel }
className = { cx(classes.container, className) }
role = 'tablist'>
{tabs.map((tab, index) => (
<button
aria-controls = { tab.controlsId }
aria-label = { tab.accessibilityLabel }
aria-selected = { selected === tab.id }
className = { cx(classes.tab, selected === tab.id && 'selected', isMobile && 'is-mobile') }
disabled = { tab.disabled }
id = { tab.id }
key = { tab.id }
onClick = { onClick(tab.id) }
onKeyDown = { onKeyDown(index) }
role = 'tab'
tabIndex = { selected === tab.id ? undefined : -1 }>
{tab.icon && <Icon
className = { classes.icon }
src = { tab.icon } />}
{tab.label}
{tab.countBadge && <span className = { classes.badge }>{tab.countBadge}</span>}
</button>
))}
{
tabs.map((tab, index) => (
<button
aria-controls = { tab.controlsId }
aria-label = { tab.accessibilityLabel }
aria-selected = { selected === tab.id }
className = { cx(classes.tab, selected === tab.id && 'selected', isMobile && 'is-mobile') }
disabled = { tab.disabled }
id = { tab.id }
key = { tab.id }
onClick = { onClick(tab.id) }
onKeyDown = { onKeyDown(index) }
role = 'tab'
tabIndex = { selected === tab.id ? undefined : -1 }
title = { tab.title }>
{
tab.icon && <Icon
className = { classes.icon }
src = { tab.icon } />
}
{ tab.label }
{
tab.countBadge && <span className = { classes.badge }>
{ tab.countBadge }
</span>
}
</button>
))}
</div>
);
};

View File

@@ -512,7 +512,8 @@ const Chat = ({
_focusedTab !== ChatTabs.CHAT && _nbUnreadMessages > 0 ? _nbUnreadMessages : undefined,
id: ChatTabs.CHAT,
controlsId: `${ChatTabs.CHAT}-panel`,
icon: IconMessage
icon: IconMessage,
title: t('chat.tabs.chat')
}
];
@@ -522,7 +523,8 @@ const Chat = ({
countBadge: _focusedTab !== ChatTabs.POLLS && _nbUnreadPolls > 0 ? _nbUnreadPolls : undefined,
id: ChatTabs.POLLS,
controlsId: `${ChatTabs.POLLS}-panel`,
icon: IconInfo
icon: IconInfo,
title: t('chat.tabs.polls')
});
}
@@ -532,7 +534,8 @@ const Chat = ({
countBadge: undefined,
id: ChatTabs.CLOSED_CAPTIONS,
controlsId: `${ChatTabs.CLOSED_CAPTIONS}-panel`,
icon: IconSubtitles
icon: IconSubtitles,
title: t('chat.tabs.closedCaptions')
});
}
@@ -542,7 +545,8 @@ const Chat = ({
countBadge: undefined,
id: ChatTabs.FILE_SHARING,
controlsId: `${ChatTabs.FILE_SHARING}-panel`,
icon: IconShareDoc
icon: IconShareDoc,
title: t('chat.tabs.fileSharing')
});
}