Skip to content

Commit 316184d

Browse files
author
Aditya
committed
fix: add aria-labels to icon-only buttons in AiTutor
Added descriptive aria-label attributes to three icon-only buttons in the AI Tutor component for screen reader accessibility: - Open AI Tutor button (BrainCircuit icon) - Close AI Tutor button (X icon) - Send message button (Send icon) Also added corresponding i18n translation keys (ai.close, ai.sendMessage) to both en.json and zh.json locale files. Fixes #39
1 parent aae1769 commit 316184d

3 files changed

Lines changed: 9 additions & 3 deletions

File tree

src/features/ai-tutor/AiTutor.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ const AiTutor = ({ lessonContext = '' }) => {
5252
<div className="fixed bottom-6 right-6 z-50">
5353
<button
5454
onClick={() => setIsOpen(true)}
55+
aria-label={t('ai.title')}
5556
className="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 text-white p-4 rounded-full shadow-2xl shadow-purple-500/20 transition-all transform hover:scale-105"
5657
>
5758
<BrainCircuit className="w-6 h-6" />
@@ -67,7 +68,7 @@ const AiTutor = ({ lessonContext = '' }) => {
6768
<BrainCircuit className="w-5 h-5 text-purple-400" />
6869
<h3 className="font-bold text-white">{t('ai.title')}</h3>
6970
</div>
70-
<button onClick={() => setIsOpen(false)} className="text-slate-400 hover:text-white">
71+
<button onClick={() => setIsOpen(false)} aria-label={t('ai.close')} className="text-slate-400 hover:text-white">
7172
<X className="w-4 h-4" />
7273
</button>
7374
</div>
@@ -113,6 +114,7 @@ const AiTutor = ({ lessonContext = '' }) => {
113114
<button
114115
onClick={sendMessage}
115116
disabled={!inputValue.trim() || isLoading}
117+
aria-label={t('ai.sendMessage')}
116118
className="bg-cyan-600 hover:bg-cyan-500 disabled:bg-slate-600 text-white p-2 rounded transition-colors"
117119
>
118120
<Send className="w-4 h-4" />

src/i18n/locales/en.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,9 @@
8787
"thinking": "Thinking...",
8888
"errorPrefix": "Sorry, I encountered an issue: ",
8989
"promptTemplate": "Student question: \"{{question}}\"\n\nAnswer the student's question based on the current lesson content. Lesson content:\n{{context}}\n\nPlease provide a clear and easy-to-understand explanation. If the question relates to the current lesson, incorporate the lesson content. If the question is beyond the lesson scope, you may expand on it but note that it goes beyond the lesson.",
90-
"systemInstruction": "You are a friendly Web3 education tutor. Answer in the user's language, keep explanations simple and accessible, and feel free to use emoji to make your responses more engaging."
90+
"systemInstruction": "You are a friendly Web3 education tutor. Answer in the user's language, keep explanations simple and accessible, and feel free to use emoji to make your responses more engaging.",
91+
"close": "Close AI Tutor",
92+
"sendMessage": "Send message"
9193
},
9294
"quiz": {
9395
"title": "Challenge Quiz",

src/i18n/locales/zh.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,9 @@
8787
"thinking": "思考中...",
8888
"errorPrefix": "抱歉,我遇到了一些问题:",
8989
"promptTemplate": "学生问题: \"{{question}}\"\n\n基于当前课程内容回答学生的问题。课程内容:\n{{context}}\n\n请提供清晰、易懂的解释,如果问题与当前课程相关,要结合课程内容。如果问题超出课程范围,可以适当扩展但要说明。",
90-
"systemInstruction": "你是一个友善的Web3教育助教。用中文回答,语言要通俗易懂,可以使用表情符号让回答更生动。"
90+
"systemInstruction": "你是一个友善的Web3教育助教。用中文回答,语言要通俗易懂,可以使用表情符号让回答更生动。",
91+
"close": "关闭AI助教",
92+
"sendMessage": "发送消息"
9193
},
9294
"quiz": {
9395
"title": "闯关测验",

0 commit comments

Comments
 (0)