Follow PageSpeed Insights

src/components/Chat.tsx

@@ -81,8 +81,17 @@ export default function Chat() {
 
     return (
         <RecoilRoot>
-            <div className={`w-1/2 absolute flex items-center p-4 text-sm border border-gray-300 rounded-lg bg-gray-800 text-gray-300 border-gray-600${alert === "" ? ` hidden` : ``}`} role="alert">
+            <div
-                <svg className="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                className={`w-1/2 absolute flex items-center p-4 text-sm border border-gray-300 rounded-lg bg-gray-800 text-gray-300 border-gray-600${alert === "" ? ` hidden` : ``}`}
+                role="alert"
+            >
+                <svg
+                    className="flex-shrink-0 inline w-4 h-4 me-3"
+                    aria-hidden="true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                >
                     <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
                 </svg>
                 <div>
@@ -95,18 +104,35 @@ export default function Chat() {
                         名前{" "}
                         <span className="text-orange-400">*</span>
                     </label>
-                    <input type="text" id="name" className="w-full block p-4 border rounded-lg text-base dark:bg-neutral-900 border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-blue-500 focus:border-blue-500" value={name} onChange={updateName} placeholder="Hatsune Mike" />
+                    <input
+                        type="text"
+                        id="name"
+                        className="w-full block p-4 border rounded-lg text-base dark:bg-neutral-900 border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-blue-500 focus:border-blue-500"
+                        value={name}
+                        onChange={updateName}
+                        placeholder="Hatsune Mike"
+                        aria-label="名前"
+                    />
                 </div>
                 <div className="mb-5">
                     <label className="block mb-2 text-sm font-medium dark:text-white">
                         本文{" "}
                         <span className="text-orange-400">*</span>
                     </label>
-                    <textarea id="body" rows={4} className="font-serif text-2xl w-full block p-2.5 rounded-lg border dark:bg-neutral-900 border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-blue-500 focus:border-blue-500" placeholder="言い残したいことは？" value={body} onChange={updateBody}></textarea>
+                    <textarea
+                        aria-label="チャットの本文"
+                        id="body"
+                        rows={4}
+                        className="font-serif text-2xl w-full block p-2.5 rounded-lg border dark:bg-neutral-900 border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-blue-500 focus:border-blue-500" 
+                        placeholder="言い残したいことは？"
+                        value={body}
+                        onChange={updateBody}
+                    ></textarea>
                 </div>
                 <button
                     onClick={submit}
                     type="button"
+                    aria-label="チャットを送信"
                     className={`w-full text-xl dark:text-white hover:text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center border border-2 border-blue-600 hover:bg-blue-700 focus:ring-blue-800${ name === "" || body === "" ? " opacity-20" : ""}`}
                     disabled={name === "" || body === ""}
                 >