Chore/#257-S : 웹접근성을 위한 태그에 속성 추가 (#259)

* feat : button 태그에 아이콘만 있는 경우 aria-label 추가

* feat : 웹접근성에 필요한 속성들 추가

* chore : role 속성만 추가

Author: juyeong-s

client/src/components/ConfMediaBar/StreamButton/CamButton/index.tsx

@@ -14,7 +14,7 @@ function CamButton({ isOn, setIsCamOn }: CamButtonProps) {
   };
 
   return (
-    <button onClick={onClick}>
+    <button onClick={onClick} aria-label={'캠 ' + (isOn ? '끄기' : '켜기')}>
       {isOn ? (
         <MdVideocam color={color.green} size={20} />
       ) : (

client/src/components/ConfMediaBar/StreamButton/MicButton/index.tsx

@@ -14,7 +14,7 @@ function MicButton({ isOn, setIsMicOn }: MicButtonProps) {
   };
 
   return (
-    <button onClick={onClick}>
+    <button onClick={onClick} aria-label={'마이크 ' + (isOn ? '끄기' : '켜기')}>
       {isOn ? (
         <MdMic color={color.green} size={20} />
       ) : (

client/src/components/Sidebar/MemberList.tsx

@@ -12,7 +12,7 @@ function MemberList({ members }: MemberListProps) {
     <ul className={style['member-list']}>
       {members.map((item) => (
         <li key={item.id} className={style['member-item']}>
-          <img src={item.avatarUrl} />
+          <img src={item.avatarUrl} alt={item.name + '의 프로필 사진'} />
           <span>{item.name}</span>
         </li>
       ))}

client/src/components/Sidebar/MomList.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState, memo } from 'react';
+import { memo, useEffect, useState } from 'react';
 import SOCKET_MESSAGE from 'src/constants/socket-message';
 import useSocketContext from 'src/hooks/useSocketContext';
 import { TMom } from 'src/types/mom';
@@ -48,7 +48,7 @@ function MomList({ moms, setSelectedMom }: MomListProps) {
       <h2>회의록</h2>
       <ul className={style['mom-list']}>
         {momList.map(({ _id: id, title }) => (
-          <li key={id} onClick={() => onSelect(id)}>
+          <li key={id} onClick={() => onSelect(id)} role="button">
             {title}
           </li>
         ))}

client/src/components/WorkspaceList/AddButton.tsx

@@ -6,7 +6,11 @@ interface AddButtonProps {
   onClick: React.MouseEventHandler;
 }
 function AddButton({ onClick }: AddButtonProps) {
-  return <MdAdd onClick={onClick} className={style.button} size={20} />;
+  return (
+    <button className={style.button} onClick={onClick} aria-label="추가">
+      <MdAdd size={20} color="white" />
+    </button>
+  );
 }
 
 export default AddButton;

client/src/components/WorkspaceModal/FormModal.tsx

@@ -60,6 +60,7 @@ function FormModal({
             value={inputValue}
             onChange={onChange}
             disabled={isDisabled}
+            autoFocus
           />
         </div>
 

client/src/components/WorkspaceSettingModal/index.tsx

@@ -32,14 +32,15 @@ function WorkspaceSettingModal({ title, onClose }: WorkspaceSettingModalProps) {
   return (
     <Modal title={title} isDark={true} onClose={onClose}>
       <>
-        <label className={style['input-label']}>
+        <label className={style['input-label']} htmlFor="code">
           <BiCodeBlock className={style['code-block-icon']} />
           <span className={style['label-title']}>참여코드</span>
         </label>
         <div className={style['input-section']}>
           <CopyButton className={style['copy-icon']} target={code} />
           <input
             className={style.input}
+            id="code"
             type="text"
             value={code}
             disabled={true}
@@ -49,7 +50,7 @@ function WorkspaceSettingModal({ title, onClose }: WorkspaceSettingModalProps) {
           className={style.button}
           text="워크스페이스 탈퇴"
           onClick={onClick}
-        ></Button>
+        />
       </>
     </Modal>
   );

client/src/components/WorkspaceThumbnailList/WorkspaceThumbnailItem.tsx

@@ -16,7 +16,7 @@ function WorkspaceThumbnailItem({
   onClick,
 }: WorkspaceThumbnailItemProps) {
   return (
-    <li className={style.thumbnail} onClick={onClick}>
+    <li className={style.thumbnail} onClick={onClick} role="button">
       <div className={style.thumbnail__content}>
         {/* <img src={imageUrl} /> */}
         {name[0]}

client/src/components/common/CopyButton/index.tsx

@@ -15,7 +15,11 @@ function CopyButton({ target, className }: CopyButtonProps) {
     }
   };
 
-  return <BiCopy className={className} onClick={onCopy} />;
+  return (
+    <button className={className} onClick={onCopy} aria-label="참여코드 복사">
+      <BiCopy />
+    </button>
+  );
 }
 
 export default CopyButton;

client/src/components/common/Modal/index.tsx

@@ -27,7 +27,11 @@ function Modal({ title, isDark = false, children, onClose }: ModalProps) {
         <div className={style['out-container']}>
           <div className={style.header} id="modal-heading">
             <h2 className={style.title}>{title}</h2>
-            <button className={style['close-modal']} onClick={onClose}>
+            <button
+              className={style['close-modal']}
+              onClick={onClose}
+              aria-label="모달 창 닫기"
+            >
               <MdClose size={20} color={'white'} />
             </button>
           </div>