无障碍按钮和链接

ChatGPTNextWeb · Aug 7, 2024 · c9099ca · c9099ca
1 parent 624e4db
commit c9099ca
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/app/components/button.tsx b/app/components/button.tsx
@@ -18,6 +18,7 @@ export function IconButton(props: {
   tabIndex?: number;
   autoFocus?: boolean;
   style?: CSSProperties;
+  aria?: string;
 }) {
   return (
     <button
@@ -34,9 +35,11 @@ export function IconButton(props: {
       tabIndex={props.tabIndex}
       autoFocus={props.autoFocus}
       style={props.style}
+      aria-label={props.aria}
     >
       {props.icon && (
         <div
+          aria-label={props.text || props.title}
           className={
             styles["icon-button-icon"] +
             ` ${props.type === "primary" && "no-dark"}`
@@ -47,7 +50,12 @@ export function IconButton(props: {
       )}
 
       {props.text && (
-        <div className={styles["icon-button-text"]}>{props.text}</div>
+        <div
+          aria-label={props.text || props.title}
+          className={styles["icon-button-text"]}
+        >
+          {props.text}
+        </div>
       )}
     </button>
   );

diff --git a/app/components/chat.tsx b/app/components/chat.tsx
@@ -1337,6 +1337,8 @@ function _Chat() {
               <IconButton
                 icon={<RenameIcon />}
                 bordered
+                title={Locale.Chat.EditMessage.Title}
+                aria={Locale.Chat.EditMessage.Title}
                 onClick={() => setIsEditingMessage(true)}
               />
             </div>
@@ -1356,6 +1358,8 @@ function _Chat() {
               <IconButton
                 icon={config.tightBorder ? <MinIcon /> : <MaxIcon />}
                 bordered
+                title={Locale.Chat.Actions.FullScreen}
+                aria={Locale.Chat.Actions.FullScreen}
                 onClick={() => {
                   config.update(
                     (config) => (config.tightBorder = !config.tightBorder),
@@ -1407,6 +1411,7 @@ function _Chat() {
                       <div className={styles["chat-message-edit"]}>
                         <IconButton
                           icon={<EditIcon />}
+                          aria={Locale.Chat.Actions.Edit}
                           onClick={async () => {
                             const newMessage = await showPrompt(
                               Locale.Chat.Actions.Edit,

diff --git a/app/components/sidebar.tsx b/app/components/sidebar.tsx
@@ -297,12 +297,20 @@ export function SideBar(props: { className?: string }) {
             </div>
             <div className={styles["sidebar-action"]}>
               <Link to={Path.Settings}>
-                <IconButton icon={<SettingsIcon />} shadow />
+                <IconButton
+                  aria={Locale.Settings.Title}
+                  icon={<SettingsIcon />}
+                  shadow
+                />
               </Link>
             </div>
             <div className={styles["sidebar-action"]}>
               <a href={REPO_URL} target="_blank" rel="noopener noreferrer">
-                <IconButton icon={<GithubIcon />} shadow />
+                <IconButton
+                  aria={Locale.Export.MessageFromChatGPT}
+                  icon={<GithubIcon />}
+                  shadow
+                />
               </a>
             </div>
           </>

diff --git a/app/locales/cn.ts b/app/locales/cn.ts
@@ -42,6 +42,7 @@ const cn = {
       PinToastAction: "查看",
       Delete: "删除",
       Edit: "编辑",
+      FullScreen: "全屏",
     },
     Commands: {
       new: "新建聊天",