feat: accessibility for most components

client/src/pages/Home.tsx

@@ -29,6 +29,7 @@ function Home() {
             type="button"
             onClick={onClickCreateRoom}
             className="btn w-full"
+            aria-label="Create new chat room"
           >
             Create
           </button>
@@ -47,15 +48,18 @@ function Home() {
           <input
             id="roomId"
             type="text"
-            placeholder="Room ID"
+            placeholder="Enter Room ID"
             value={roomId}
             onChange={(e) => setRoomId(e.target.value)}
             className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            aria-required="true"
+            aria-invalid={!roomId}
           />
           <button
             type="button"
             onClick={onClickJoinRoom}
             disabled={!roomId}
+            aria-disabled={!roomId}
             className="w-full btn bg-green-600 hover:bg-green-700"
           >
             Join

client/src/pages/Room.tsx

@@ -30,16 +30,24 @@ function Room() {
     <Layout>
       <section className="w-full">
         <RoomHeader roomId={roomId!} isConnected={isConnected} />
+        <nav aria-label="Chat navigation">
+          <ChatMenu />
+        </nav>
 
-        <ChatMenu />
         {state.selectedMenu === "chat" && (
-          <>
+          <section aria-label="Chat Section" className="chat-section">
             <ChatMessages sendMessage={sendMessage} />
             <ChatInput sendMessage={sendMessage} />
-          </>
+          </section>
+        )}
+        {state.selectedMenu === "participants" && (
+          <section
+            aria-label="Participants list"
+            className="participants-section"
+          >
+            <ParticipantList />
+          </section>
         )}
-
-        {state.selectedMenu === "participants" && <ParticipantList />}
       </section>
     </Layout>
   );