chore: Some accessibility improvements.

i18n/en_US.yaml

@@ -504,6 +504,7 @@ ui:
     title: Notifications
     inbox: Inbox
     achievement: Achievements
+    new_alerts: New alerts
     all_read: Mark all as read
     show_more: Show more
     someone: Someone
@@ -729,7 +730,7 @@ ui:
     tip_answer: >-
       Use comments to reply to other users or notify them of changes. If you are
       adding new information, edit your post instead of commenting.
-    tip_vote: It adds something useful to the post
+    tip_vote: It is useful
   edit_answer:
     title: Edit Answer
     default_reason: Edit answer
@@ -940,7 +941,6 @@ ui:
         gravatar: Gravatar
         gravatar_text: You can change image on
         custom: Custom
-        btn_refresh: Refresh
         custom_text: You can upload your image.
         default: System
         msg: Please upload an avatar
@@ -1025,6 +1025,7 @@ ui:
     useful: Useful
     question_useful: It is useful and clear
     question_un_useful: It is unclear or not useful
+    question_bookmark: Bookmark this question
     answer_useful: It is useful
     answer_un_useful: It is not useful
     answers:
@@ -1092,6 +1093,7 @@ ui:
     question: Question
     answer: Answer
     comment: Comment
+    refresh: Refresh
   search:
     title: Search Results
     keywords: Keywords

ui/src/components/Actions/index.tsx

@@ -131,6 +131,7 @@ const Index: FC<Props> = ({ className, data, source }) => {
       {!data?.hideCollect && (
         <Button
           variant="outline-secondary ms-3"
+          title={t('question_detail.question_bookmark')}
           active={bookmarkState.state}
           onClick={handleBookmark}>
           <Icon name="bookmark-fill" />

ui/src/components/Avatar/index.tsx

@@ -11,9 +11,16 @@ interface IProps {
   size: string;
   searchStr?: string;
   className?: string;
+  alt?: string;
 }
 
-const Index: FC<IProps> = ({ avatar, size, className, searchStr = '' }) => {
+const Index: FC<IProps> = ({
+  avatar,
+  size,
+  className,
+  searchStr = '',
+  alt,
+}) => {
   let url = '';
   if (typeof avatar === 'string') {
     if (avatar.length > 1) {
@@ -31,13 +38,17 @@ const Index: FC<IProps> = ({ avatar, size, className, searchStr = '' }) => {
     className && className.indexOf('rounded') !== -1 ? '' : 'rounded';
 
   return (
-    <img
-      src={url || DefaultAvatar}
-      width={size}
-      height={size}
-      className={classNames(roundedCls, className)}
-      alt=""
-    />
+    <>
+      {/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role,jsx-a11y/control-has-associated-label */}
+      <img
+        role="button"
+        src={url || DefaultAvatar}
+        width={size}
+        height={size}
+        className={classNames(roundedCls, className)}
+        alt={alt}
+      />
+    </>
   );
 };
 

ui/src/components/Header/components/NavItems/index.tsx

@@ -10,7 +10,7 @@ import { userCenterStore } from '@/stores';
 
 interface Props {
   redDot: Type.NotificationStatus | undefined;
-  userInfo;
+  userInfo: Type.UserInfoRes;
   logOut: () => void;
 }
 
@@ -32,18 +32,30 @@ const Index: FC<Props> = ({ redDot, userInfo, logOut }) => {
         <Nav.Link
           as={NavLink}
           to="/users/notifications/inbox"
+          title={t('inbox', { keyPrefix: 'notifications' })}
           className="icon-link d-flex align-items-center justify-content-center p-0 me-3 position-relative">
           <Icon name="bell-fill" className="fs-4" />
-          {(redDot?.inbox || 0) > 0 && <div className="unread-dot bg-danger" />}
+          {(redDot?.inbox || 0) > 0 && (
+            <div className="unread-dot bg-danger">
+              <span className="visually-hidden">
+                {t('new_alerts', { keyPrefix: 'notifications' })}
+              </span>
+            </div>
+          )}
         </Nav.Link>
 
         <Nav.Link
           as={NavLink}
           to="/users/notifications/achievement"
+          title={t('achievement', { keyPrefix: 'notifications' })}
           className="icon-link d-flex align-items-center justify-content-center p-0 me-3 position-relative">
           <Icon name="trophy-fill" className="fs-4" />
           {(redDot?.achievement || 0) > 0 && (
-            <div className="unread-dot bg-danger" />
+            <div className="unread-dot bg-danger">
+              <span className="visually-hidden">
+                {t('new_alerts', { keyPrefix: 'notifications' })}
+              </span>
+            </div>
           )}
         </Nav.Link>
       </Nav>
@@ -54,7 +66,12 @@ const Index: FC<Props> = ({ redDot, userInfo, logOut }) => {
           id="dropdown-basic"
           as="a"
           className="no-toggle pointer">
-          <Avatar size="36px" avatar={userInfo?.avatar} searchStr="s=96" />
+          <Avatar
+            size="36px"
+            avatar={userInfo?.avatar}
+            alt={userInfo?.display_name}
+            searchStr="s=96"
+          />
         </Dropdown.Toggle>
 
         <Dropdown.Menu>

ui/src/components/Header/index.tsx

@@ -45,7 +45,7 @@ const Header: FC = () => {
   const siteInfo = siteInfoStore((state) => state.siteInfo);
   const brandingInfo = brandingStore((state) => state.branding);
   const loginSetting = loginSettingStore((state) => state.login);
-  const { updateReiview, updateVisible } = sideNavStore();
+  const { updateReview, updateVisible } = sideNavStore();
   const { data: redDot } = useQueryNotificationStatus();
   /**
    * Automatically append `tag` information when creating a question
@@ -57,7 +57,7 @@ const Header: FC = () => {
   }
 
   useEffect(() => {
-    updateReiview({
+    updateReview({
       can_revision: Boolean(redDot?.can_revision),
       revision: Number(redDot?.revision),
     });

ui/src/components/Icon/index.tsx

@@ -17,7 +17,7 @@ const Icon: FC<IProps> = ({
   className,
   size,
   onClick,
-  title = '',
+  title,
 }) => {
   return (
     <i

ui/src/components/Modal/PicAuthCodeModal.tsx

@@ -73,6 +73,7 @@ const Index: React.FC<IProps> = ({
               <Button
                 onClick={refreshImgCode}
                 variant="outline-secondary"
+                title={t('refresh', { keyPrefix: 'btns' })}
                 style={{
                   borderTopRightRadius: '0.375rem',
                   borderBottomRightRadius: '0.375rem',

ui/src/index.tsx

@@ -22,7 +22,9 @@ document.addEventListener(
     }
 
     if (/IMG/.test(target.nodeName)) {
-      target.classList.add('invisible');
+      if (!target.getAttribute('alt')) {
+        target.classList.add('invisible');
+      }
     }
   },
   true,

ui/src/pages/Admin/Plugins/Installed/index.tsx

@@ -112,7 +112,7 @@ const Users: FC = () => {
                   <td className="text-end">
                     <Dropdown>
                       <Dropdown.Toggle variant="link" className="no-toggle">
-                        <Icon name="three-dots-vertical" />
+                        <Icon name="three-dots-vertical" title={t('action')} />
                       </Dropdown.Toggle>
                       <Dropdown.Menu>
                         {plugin.enabled ? (

ui/src/pages/Admin/Users/index.tsx

@@ -270,7 +270,7 @@ const Users: FC = () => {
                   <td className="text-end">
                     <Dropdown>
                       <Dropdown.Toggle variant="link" className="no-toggle">
-                        <Icon name="three-dots-vertical" />
+                        <Icon name="three-dots-vertical" title={t('action')} />
                       </Dropdown.Toggle>
                       <Dropdown.Menu>
                         {showActionPassword ? (

ui/src/pages/Questions/Detail/components/Answer/index.tsx

@@ -67,9 +67,11 @@ const Index: FC<Props> = ({
       }, 100);
     }
   }, [data.id, answerRef.current]);
+
   if (!data?.id) {
     return null;
   }
+
   return (
     <div id={data.id} ref={answerRef} className="answer-item py-4">
       {data.status === 10 && (

ui/src/stores/sideNav.ts

@@ -10,7 +10,7 @@ interface ErrorCodeType {
   can_revision: boolean;
   revision: number;
   updateVisible: () => void;
-  updateReiview: (params: reviewData) => void;
+  updateReview: (params: reviewData) => void;
 }
 
 const Index = create<ErrorCodeType>((set) => ({
@@ -22,7 +22,7 @@ const Index = create<ErrorCodeType>((set) => ({
       return { visible: !state.visible };
     });
   },
-  updateReiview: (params: reviewData) => {
+  updateReview: (params: reviewData) => {
     set(() => {
       return { ...params };
     });