⚡️ perf: improve pages a11y (lobehub#1353)

* ♿️ fix: improve a11y * ⚡️ perf: improve logo * ♿️ perf: improve viewport scale * ♿️ perf: improve a11y for settings page * 🌐 chore: update i18n
hanwwh · Feb 22, 2024 · 0db8c26 · 0db8c26
1 parent 0031c68
commit 0db8c26
Show file tree

Hide file tree

Showing 25 changed files with 53 additions and 30 deletions.
diff --git a/locales/ar/chat.json b/locales/ar/chat.json
@@ -19,6 +19,7 @@
     "title": "دردشة عشوائية"
   },
   "input": {
+    "more": "المزيد",
     "onlyAdd": "إضافة الرسالة فقط",
     "send": "إرسال",
     "sendWithCmdEnter": "اضغط {{meta}} + Enter للإرسال",

diff --git a/locales/de-DE/chat.json b/locales/de-DE/chat.json
@@ -19,6 +19,7 @@
     "title": "Lass uns plaudern"
   },
   "input": {
+    "more": "Mehr",
     "onlyAdd": "Nur Nachricht hinzufügen",
     "send": "Senden",
     "sendWithCmdEnter": "Mit {{meta}} + Eingabetaste senden",

diff --git a/locales/en-US/chat.json b/locales/en-US/chat.json
@@ -19,6 +19,7 @@
     "title": "Just Chat"
   },
   "input": {
+    "more": "more",
     "onlyAdd": "Only add message",
     "send": "Send",
     "sendWithCmdEnter": "Press {{meta}} + Enter to send",

diff --git a/locales/es-ES/chat.json b/locales/es-ES/chat.json
@@ -19,6 +19,7 @@
     "title": "Charla casual"
   },
   "input": {
+    "more": "más",
     "onlyAdd": "Añadir solo",
     "send": "Enviar",
     "sendWithCmdEnter": "Enviar con {{meta}} + Enter",

diff --git a/locales/fr-FR/chat.json b/locales/fr-FR/chat.json
@@ -19,6 +19,7 @@
     "title": "Discutons un peu"
   },
   "input": {
+    "more": "Plus",
     "onlyAdd": "Ajouter uniquement",
     "send": "Envoyer",
     "sendWithCmdEnter": "Envoyer avec {{meta}} + Entrée",

diff --git a/locales/it-IT/chat.json b/locales/it-IT/chat.json
@@ -19,6 +19,7 @@
     "title": "Chiacchierata casuale"
   },
   "input": {
+    "more": "Ulteriori",
     "onlyAdd": "Solo aggiungi messaggio",
     "send": "Invia",
     "sendWithCmdEnter": "Invia premendo {{meta}} + Invio",

diff --git a/locales/ja-JP/chat.json b/locales/ja-JP/chat.json
@@ -19,6 +19,7 @@
     "title": "気軽におしゃべり"
   },
   "input": {
+    "more": "もっと",
     "onlyAdd": "メッセージのみ追加",
     "send": "送信",
     "sendWithCmdEnter": "{{meta}} + Enter キーで送信",

diff --git a/locales/ko-KR/chat.json b/locales/ko-KR/chat.json
@@ -19,6 +19,7 @@
     "title": "무작위 대화"
   },
   "input": {
+    "more": "더 많은",
     "onlyAdd": "메시지만 추가",
     "send": "전송",
     "sendWithCmdEnter": "{{meta}} + Enter 키로 전송",

diff --git a/locales/nl-NL/chat.json b/locales/nl-NL/chat.json
@@ -19,6 +19,7 @@
     "title": "Praat maar raak"
   },
   "input": {
+    "more": "Meer",
     "onlyAdd": "Alleen bericht toevoegen",
     "send": "Verzenden",
     "sendWithCmdEnter": "Verzenden met {{meta}} + Enter",

diff --git a/locales/pl-PL/chat.json b/locales/pl-PL/chat.json
@@ -19,6 +19,7 @@
     "title": "Pogadajmy sobie"
   },
   "input": {
+    "more": "więcej",
     "onlyAdd": "Tylko dodaj wiadomość",
     "send": "Wyślij",
     "sendWithCmdEnter": "Wyślij za pomocą klawisza {{meta}} + Enter",

diff --git a/locales/pt-BR/chat.json b/locales/pt-BR/chat.json
@@ -19,6 +19,7 @@
     "title": "Conversa Aleatória"
   },
   "input": {
+    "more": "mais",
     "onlyAdd": "Apenas adicionar mensagem",
     "send": "Enviar",
     "sendWithCmdEnter": "Pressione {{meta}} + Enter para enviar",

diff --git a/locales/ru-RU/chat.json b/locales/ru-RU/chat.json
@@ -19,6 +19,7 @@
     "title": "Просто поболтаем"
   },
   "input": {
+    "more": "больше",
     "onlyAdd": "Только добавить сообщение",
     "send": "Отправить",
     "sendWithCmdEnter": "Отправить с помощью {{meta}} + Enter",

diff --git a/locales/tr-TR/chat.json b/locales/tr-TR/chat.json
@@ -19,6 +19,7 @@
     "title": "Sohbet Et"
   },
   "input": {
+    "more": "Daha fazla",
     "onlyAdd": "Sadece mesaj ekle",
     "send": "Gönder",
     "sendWithCmdEnter": "{{meta}} + Enter tuşuna basarak gönder",

diff --git a/locales/vi-VN/chat.json b/locales/vi-VN/chat.json
@@ -19,6 +19,7 @@
     "title": "Chuyện phiếm"
   },
   "input": {
+    "more": "Thêm",
     "onlyAdd": "Chỉ thêm tin nhắn",
     "send": "Gửi",
     "sendWithCmdEnter": "Nhấn {{meta}} + Enter để gửi",

diff --git a/locales/zh-CN/chat.json b/locales/zh-CN/chat.json
@@ -19,6 +19,7 @@
     "title": "随便聊聊"
   },
   "input": {
+    "more": "更多",
     "onlyAdd": "仅添加消息",
     "send": "发送",
     "sendWithCmdEnter": "按 {{meta}} + Enter 键发送",

diff --git a/locales/zh-TW/chat.json b/locales/zh-TW/chat.json
@@ -19,6 +19,7 @@
     "title": "隨便聊聊"
   },
   "input": {
+    "more": "更多",
     "onlyAdd": "僅新增訊息",
     "send": "發送",
     "sendWithCmdEnter": "按 {{meta}} + Enter 鍵發送",

diff --git a/package.json b/package.json
@@ -82,9 +82,9 @@
     "@icons-pack/react-simple-icons": "^9",
     "@lobehub/chat-plugin-sdk": "latest",
     "@lobehub/chat-plugins-gateway": "latest",
-    "@lobehub/icons": "^1.10.2",
+    "@lobehub/icons": "^1.11.1",
     "@lobehub/tts": "latest",
-    "@lobehub/ui": "latest",
+    "@lobehub/ui": "^1.129.2",
     "@vercel/analytics": "^1",
     "ahooks": "^3",
     "ai": "^2",

diff --git a/public/images/logo.png b/public/images/logo.png
diff --git a/src/app/chat/(desktop)/features/ChatInput/Footer/index.tsx b/src/app/chat/(desktop)/features/ChatInput/Footer/index.tsx
@@ -179,6 +179,7 @@ const Footer = memo<{ setExpand?: (expand: boolean) => void }>(({ setExpand }) =
                 trigger={['hover']}
               >
                 <Button
+                  aria-label={t('input.more')}
                   className={styles.arrow}
                   icon={<Icon icon={LucideChevronDown} />}
                   type={'primary'}

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import { Viewport } from 'next';
+import { ResolvingViewport } from 'next';
 import { cookies } from 'next/headers';
 import { PropsWithChildren } from 'react';
 import { isRtlLang } from 'rtl-detect';
@@ -12,6 +12,7 @@ import {
   LOBE_THEME_PRIMARY_COLOR,
 } from '@/const/theme';
 import Layout from '@/layout/GlobalLayout';
+import { isMobileDevice } from '@/utils/responsive';
 
 import StyleRegistry from './StyleRegistry';
 
@@ -50,15 +51,20 @@ export default RootLayout;
 
 export { default as metadata } from './metadata';
 
-export const viewport: Viewport = {
-  initialScale: 1,
-  maximumScale: 1,
-  minimumScale: 1,
-  themeColor: [
-    { color: '#f8f8f8', media: '(prefers-color-scheme: light)' },
-    { color: '#000', media: '(prefers-color-scheme: dark)' },
-  ],
-  userScalable: false,
-  viewportFit: 'cover',
-  width: 'device-width',
+export const generateViewport = async (): ResolvingViewport => {
+  const isMobile = isMobileDevice();
+
+  const dynamicScale = isMobile ? { maximumScale: 1, userScalable: false } : {};
+
+  return {
+    ...dynamicScale,
+    initialScale: 1,
+    minimumScale: 1,
+    themeColor: [
+      { color: '#f8f8f8', media: '(prefers-color-scheme: light)' },
+      { color: '#000', media: '(prefers-color-scheme: dark)' },
+    ],
+    viewportFit: 'cover',
+    width: 'device-width',
+  };
 };
diff --git a/src/app/settings/tts/page.tsx b/src/app/settings/tts/page.tsx
@@ -11,7 +11,7 @@ export default memo(() => {
   const { t } = useTranslation('setting');
   return (
     <>
-      <PageTitle title={t('tab.llm')} />
+      <PageTitle title={t('tab.tts')} />
       <TTS />
     </>
   );

diff --git a/src/features/AvatarWithUpload/index.tsx b/src/features/AvatarWithUpload/index.tsx
@@ -1,9 +1,9 @@
-import { Logo } from '@lobehub/ui';
 import { Upload } from 'antd';
 import { createStyles } from 'antd-style';
 import Avatar from 'next/image';
 import { CSSProperties, memo } from 'react';
 
+import { imageUrl } from '@/const/url';
 import { useGlobalStore } from '@/store/global';
 import { commonSelectors } from '@/store/global/selectors';
 import { imageToBase64 } from '@/utils/imageToBase64';
@@ -55,11 +55,12 @@ const AvatarWithUpload = memo<AvatarWithUploadProps>(
     return (
       <div className={styles} id={id} style={{ maxHeight: size, maxWidth: size, ...style }}>
         <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
-          {avatar ? (
-            <Avatar alt={'avatar'} height={size} src={avatar} width={size} />
-          ) : (
-            <Logo size={size} />
-          )}
+          <Avatar
+            alt={avatar ? 'userAvatar' : 'LobeChat'}
+            height={size}
+            src={!!avatar ? avatar : imageUrl('logo.png')}
+            width={size}
+          />
         </Upload>
       </div>
     );

diff --git a/src/features/SideBar/BottomActions.tsx b/src/features/SideBar/BottomActions.tsx
@@ -17,7 +17,7 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import { ABOUT, CHANGELOG, DISCORD, DOCUMENTS, FEEDBACK, GITHUB } from '@/const/url';
+import { ABOUT, CHANGELOG, DISCORD, DOCUMENTS, FEEDBACK } from '@/const/url';
 import DataImporter from '@/features/DataImporter';
 import { configService } from '@/services/config';
 import { GlobalStore, useGlobalStore } from '@/store/global';
@@ -120,13 +120,10 @@ const BottomActions = memo<BottomActionProps>(({ tab }) => {
 
   return (
     <>
-      <ActionIcon
-        icon={Github}
-        onClick={() => window.open(GITHUB)}
-        placement={'right'}
-        title={'GitHub'}
-      />
-      <Link href={DOCUMENTS} target={'_blank'}>
+      <Link aria-label={'GitHub'} href={DOCUMENTS} target={'_blank'}>
+        <ActionIcon icon={Github} placement={'right'} title={'GitHub'} />
+      </Link>
+      <Link aria-label={t('document')} href={DOCUMENTS} target={'_blank'}>
         <ActionIcon icon={Book} placement={'right'} title={t('document')} />
       </Link>
       <Dropdown arrow={false} menu={{ items }} trigger={['click']}>

diff --git a/src/features/SideBar/TopActions.tsx b/src/features/SideBar/TopActions.tsx
@@ -19,6 +19,7 @@ const TopActions = memo<TopActionProps>(({ tab }) => {
   return (
     <>
       <Link
+        aria-label={t('tab.chat')}
         href={'/chat'}
         onClick={(e) => {
           e.preventDefault();
@@ -33,7 +34,7 @@ const TopActions = memo<TopActionProps>(({ tab }) => {
           title={t('tab.chat')}
         />
       </Link>
-      <Link href={'/market'}>
+      <Link aria-label={t('tab.market')} href={'/market'}>
         <ActionIcon
           active={tab === SidebarTabKey.Market}
           icon={Compass}

diff --git a/src/locales/default/chat.ts b/src/locales/default/chat.ts
@@ -21,6 +21,7 @@ export default {
     title: '随便聊聊',
   },
   input: {
+    more: '更多',
     onlyAdd: '仅添加消息',
     send: '发送',
     sendWithCmdEnter: '按 {{meta}} + Enter 键发送',