feat: Enhance Assistant and Topic components with title attributes for better accessibility

This commit is contained in:
TW 2025-02-27 17:19:53 +08:00 committed by 亢奋猫
parent c011d18c72
commit bc7c74e0ea
2 changed files with 12 additions and 6 deletions

View File

@ -108,12 +108,13 @@ const AssistantItem: FC<AssistantItemProps> = ({ assistant, isActive, onSwitch,
}, [clickAssistantToShowTopic, onSwitch, assistant, topicPosition]) }, [clickAssistantToShowTopic, onSwitch, assistant, topicPosition])
const assistantName = assistant.name || t('chat.default.name') const assistantName = assistant.name || t('chat.default.name')
const fullAssistantName = assistant.emoji ? `${assistant.emoji} ${assistantName}` : assistantName
return ( return (
<Dropdown menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}> <Dropdown menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
<Container onClick={handleSwitch} className={isActive ? 'active' : ''}> <Container onClick={handleSwitch} className={isActive ? 'active' : ''}>
<AssistantName className="name"> <AssistantName className="name" title={fullAssistantName}>
{assistant.emoji ? `${assistant.emoji} ${assistantName}` : assistantName} {fullAssistantName}
</AssistantName> </AssistantName>
{isActive && ( {isActive && (
<MenuButton onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}> <MenuButton onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}>

View File

@ -293,16 +293,21 @@ const Topics: FC<Props> = ({ assistant: _assistant, activeTopic, setActiveTopic
<DragableList list={assistant.topics} onUpdate={updateTopics}> <DragableList list={assistant.topics} onUpdate={updateTopics}>
{(topic) => { {(topic) => {
const isActive = topic.id === activeTopic?.id const isActive = topic.id === activeTopic?.id
const topicName = topic.name.replace('`', '')
const topicPrompt = topic.prompt
const fullTopicPrompt = t('common.prompt') + ': ' + topicPrompt
return ( return (
<Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}> <Dropdown menu={{ items: getTopicMenuItems(topic) }} trigger={['contextMenu']} key={topic.id}>
<TopicListItem <TopicListItem
className={isActive ? 'active' : ''} className={isActive ? 'active' : ''}
onClick={() => onSwitchTopic(topic)} onClick={() => onSwitchTopic(topic)}
style={{ borderRadius }}> style={{ borderRadius }}>
<TopicName className="name">{topic.name.replace('`', '')}</TopicName> <TopicName className="name" title={topicName}>
{topic.prompt && ( {topicName}
<TopicPromptText className="prompt"> </TopicName>
{t('common.prompt')}: {topic.prompt} {topicPrompt && (
<TopicPromptText className="prompt" title={fullTopicPrompt}>
{fullTopicPrompt}
</TopicPromptText> </TopicPromptText>
)} )}
{showTopicTime && ( {showTopicTime && (