Merge pull request #690 from isucon/fix-ui4

[FE] 細部微修正、アクセシビリティの考慮
isucon · Dec 6, 2024 · 6196d0e · 6196d0e
2 parents e6cf11f + 73d7716
commit 6196d0e
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 54 deletions.
diff --git a/frontend/app/components/modules/simulator-configs/simulator-chair-active-toggle.tsx b/frontend/app/components/modules/simulator-configs/simulator-chair-active-toggle.tsx
@@ -37,7 +37,7 @@ export const SimulatorChairActiveToggle: FC = () => {
           id="chair-activity"
         />
       </div>
-      {!isAnotherSimulatorBeingUsed && (
+      {isAnotherSimulatorBeingUsed && (
         <div
           role="presentation"
           className="absolute top-0 left-0 w-full h-full bg-neutral-500 bg-opacity-60 flex items-center justify-center cursor-not-allowed"

diff --git a/frontend/app/components/modules/simulator-configs/simulator-chair-config.tsx b/frontend/app/components/modules/simulator-configs/simulator-chair-config.tsx
@@ -173,7 +173,7 @@ export const SimulatorChairConfig: FC = () => {
               destLoc={data?.destination_coordinate}
             />
           </div>
-          {!isAnotherSimulatorBeingUsed && (
+          {isAnotherSimulatorBeingUsed && (
             <div className="absolute top-0 left-0 w-full h-full bg-neutral-500 bg-opacity-60 flex items-center justify-center cursor-not-allowed">
               <Text className="text-white" bold size="sm">
                 現在、他のシミュレーターが使用中です

diff --git a/frontend/app/components/primitives/frame/frame.tsx b/frontend/app/components/primitives/frame/frame.tsx
@@ -7,14 +7,14 @@ export const MainFrame: FC<PropsWithChildren<ComponentProps<"div">>> = ({
   ...props
 }) => {
   return (
-    <div
+    <main
       className={twMerge(
         "md:max-w-screen-md h-full relative ml-auto mr-auto shadow-xl bg-white flex flex-col",
         className,
       )}
       {...props}
     >
       <div className="flex flex-col min-h-screen">{children}</div>
-    </div>
+    </main>
   );
 };
diff --git a/frontend/app/routes/_index/route.tsx b/frontend/app/routes/_index/route.tsx
@@ -48,53 +48,56 @@ const Links = [
 
 export default function Index() {
   return (
-    <main>
-      <MainFrame>
-        <img
-          src="/images/top-bg.png"
-          alt=""
-          role="presentation"
-          className="absolute top-0 left-0 w-full opacity-90"
-        />
-        <div className="relative z-10">
-          <h1 className="mt-[35%] flex justify-center w-full mb-24">
-            <img
-              src="/images/top-logo.svg"
-              alt="ISURIDE"
-              role="presentation"
-              style={{ aspectRatio: 544 / 140 }}
-              className="max-w-80 w-full px-4"
-            />
-          </h1>
-          <ul className="space-y-8">
-            {Links.map(({ to, title, description, Icon, style }) => {
-              return (
-                <li key={to} className="">
-                  <Link
-                    to={to}
-                    className={twMerge(
-                      "flex justify-center items-center flex-row space-x-4",
-                      "px-10 py-4 bg-neutral-100 rounded-full mx-auto w-[300px] h-[100px] space-y-1 shadow-md hover:bg-neutral-200 transition-colors",
-                      "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900",
-                      style,
-                    )}
-                  >
-                    <Icon />
-                    <p className="space-y-1 flex flex-col">
-                      <Text tagName="span" bold>
-                        {title}
-                      </Text>
-                      <Text tagName="span" size="xs" className="break-keep">
-                        {description}
-                      </Text>
-                    </p>
-                  </Link>
-                </li>
-              );
-            })}
-          </ul>
-        </div>
-      </MainFrame>
-    </main>
+    <MainFrame>
+      <img
+        src="/images/top-bg.png"
+        alt=""
+        role="presentation"
+        className="absolute top-0 left-0 w-full opacity-90"
+      />
+      <div className="relative z-10">
+        <h1 className="mt-[35%] flex justify-center w-full mb-32">
+          <img
+            src="/images/top-logo.svg"
+            alt=""
+            role="presentation"
+            style={{ aspectRatio: 544 / 140 }}
+            className="max-w-80 w-full px-4"
+          />
+          <span className="sr-only">ISURIDE Top</span>
+        </h1>
+        <ul className="space-y-8">
+          {Links.map(({ to, title, description, Icon, style }) => {
+            return (
+              <li key={to} className="">
+                <Link
+                  to={to}
+                  className={twMerge(
+                    "flex justify-center items-center flex-row space-x-4",
+                    "px-10 py-4 bg-neutral-100 rounded-full mx-auto w-[300px] h-[100px] space-y-1 shadow-md hover:bg-neutral-200 transition-colors",
+                    "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900",
+                    style,
+                  )}
+                >
+                  <Icon />
+                  <p className="space-y-1 flex flex-col">
+                    <Text tagName="span" bold>
+                      {title}
+                    </Text>
+                    <Text
+                      tagName="span"
+                      size="xs"
+                      className="break-keep leading-normal"
+                    >
+                      {description}
+                    </Text>
+                  </p>
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </MainFrame>
   );
 }
diff --git a/frontend/app/routes/client/route.tsx b/frontend/app/routes/client/route.tsx
@@ -1,11 +1,15 @@
 import { Outlet } from "@remix-run/react";
 import { FooterNavigation } from "~/components/modules/footer-navigation/footer-navigation";
 import { MainFrame } from "~/components/primitives/frame/frame";
+import { Text } from "~/components/primitives/text/text";
 import { ClientProvider } from "../../contexts/client-context";
 
 export default function ClientLayout() {
   return (
     <MainFrame>
+      <Text tagName="h1" className="sr-only">
+        ISURIDE
+      </Text>
       <ClientProvider>
         <Outlet />
       </ClientProvider>

diff --git a/frontend/app/routes/owner/route.tsx b/frontend/app/routes/owner/route.tsx
@@ -11,7 +11,7 @@ const tabs = [
   { key: "sales", label: "売上", to: "/owner/sales" },
 ] as const;
 
-const Tab = () => {
+const Content = () => {
   const matches = useMatches();
   const activeTab = matches[2]?.pathname.split("/").at(-1) || "index";
 
@@ -63,7 +63,7 @@ export default function OwnerLayout() {
               アカウント切替え
             </Button>
           </div>
-          <Tab />
+          <Content />
           <div className="flex-1 overflow-auto pt-8 pb-16 max-w-7xl xl:flex justify-center">
             <Outlet />
           </div>