Update UserInfo component to include accessibility features

AppQuality · Jan 18, 2024 · df615c5 · df615c5
1 parent 027c98e
commit df615c5
Showing 1 changed file with 8 additions and 2 deletions.
diff --git a/src/stories/header/UserInfo.tsx b/src/stories/header/UserInfo.tsx
@@ -22,17 +22,23 @@ export const UserInfo = ({
       {user ? (
         <>
           <div className={`user-avatar ${user.verified ? "verified" : ""}`}>
-            <img alt={user.name + " " + user.surname} src={user.image} />
+            <img
+              aria-hidden="true"
+              alt={user.name + " " + user.surname}
+              src={user.image}
+            />
           </div>
           <Text as="div" className="user-name">
             {user.name} {user.surname}{" "}
             <Text as="span" className="aq-text-primaryVariant user-id">
+              <span className="sr-only">Tester ID: </span>
               <b>T{user.id}</b>
             </Text>
           </Text>
           <Button size="medium" kind="link" onClick={onLogout}>
+            <span className="sr-only">Logout</span>
             <span className="aq-text-danger">
-              <BoxArrowRight />
+              <BoxArrowRight aria-hidden="true" />
             </span>
           </Button>
         </>