improve(a11y): strengthen site accessibility baseline

src/shared/ui/section-heading/section-heading.tsx

@@ -13,7 +13,7 @@ export const SectionHeading = ({ align = "start", eyebrow, id, title }: SectionH
       <h2 className="m-0 font-handwritten text-4xl leading-[1.05] text-slate-12" id={id}>
         {title}
       </h2>
-      {eyebrow ? <p className="m-0 text-xs font-medium text-slate-10">{eyebrow}</p> : null}
+      {eyebrow ? <p className="m-0 text-xs font-medium text-slate-11">{eyebrow}</p> : null}
     </header>
   );
 };

src/widgets/contact/ui/contact-section.ui.tsx

@@ -13,7 +13,7 @@ export const ContactSectionUI = () => {
 
         <div className="flex flex-col items-center gap-6">
           <header className="relative grid gap-1 text-center">
-            <p className="m-0 font-handwritten text-xs text-slate-10">Let&apos;s Contact!</p>
+            <p className="m-0 font-handwritten text-xs text-slate-11">Let&apos;s Contact!</p>
             <h2
               className="m-0 font-handwritten text-4xl leading-[1.05] text-slate-12"
               id="contact-title"
@@ -22,7 +22,7 @@ export const ContactSectionUI = () => {
             </h2>
           </header>
 
-          <p className="text-center text-xs font-medium text-slate-10">
+          <p className="text-center text-xs font-medium text-slate-11">
             気軽にのぞいたり、声をかけたり
           </p>
           <SocialLinks />

src/widgets/floating-navigation/ui/floating-navigation.test.tsx

@@ -65,6 +65,22 @@ test("opens the theme panel and reports selected theme", async () => {
   expect(localStorage.getItem(storageKey.theme)).toBe(JSON.stringify("dark"));
 });
 
+test("exposes the selected theme state to assistive technology", async () => {
+  const user = userEvent.setup();
+
+  renderFloatingNavigation();
+
+  await user.click(screen.getByRole("button", { name: "Open navigation" }));
+  await user.click(screen.getByRole("button", { name: "Theme" }));
+
+  expect(screen.getByRole("button", { name: "System" }).getAttribute("aria-pressed")).toBe("true");
+  expect(screen.getByRole("button", { name: "Light" }).getAttribute("aria-pressed")).toBe("false");
+
+  await user.click(screen.getByRole("button", { name: "Dark" }));
+
+  expect(screen.getByRole("button", { name: "Dark" }).getAttribute("aria-pressed")).toBe("true");
+});
+
 test("moves focus into the active panel when switching panels", async () => {
   const user = userEvent.setup();
 

src/widgets/floating-navigation/ui/panels/parts.tsx

@@ -29,7 +29,7 @@ export const PanelItem = <T extends PanelItemElement = "div">({
     <Component
       type={as === "button" ? "button" : undefined}
       className={cn(
-        "flex h-10 items-center gap-2.5 rounded-lg border border-transparent px-2 text-start text-base font-medium text-slate-12 transition hover:border-slate-6 hover:bg-slate-4 focus-visible:bg-slate-4 focus-visible:outline-none",
+        "flex h-10 items-center gap-2.5 rounded-lg border border-transparent px-2 text-start text-base font-medium text-slate-12 transition hover:border-slate-6 hover:bg-slate-4 focus-visible:bg-slate-4",
         as === "a" && "cursor-pointer",
         as === "button" && "cursor-pointer",
         className,
@@ -57,7 +57,7 @@ export const PanelFooterAction = ({ type, onClick }: PanelFooterActionProps): JS
   return (
     <button
       aria-label={type === "back" ? "戻る" : "閉じる"}
-      className="pointer-events-auto grid h-10 w-full cursor-pointer place-items-center rounded-lg border border-slate-7 bg-slate-4 text-slate-12 transition hover:bg-slate-5 focus-visible:bg-slate-5 focus-visible:outline-none"
+      className="pointer-events-auto grid h-10 w-full cursor-pointer place-items-center rounded-lg border border-slate-7 bg-slate-4 text-slate-12 transition hover:bg-slate-5 focus-visible:bg-slate-5"
       type="button"
       onClick={onClick}
     >

src/widgets/floating-navigation/ui/panels/theme-panel.ui.tsx

@@ -32,9 +32,14 @@ export const ThemePanelUI = ({ actions: { onBack, onThemeChange }, theme }: Them
         <PanelItem
           key={value}
           as="button"
+          aria-pressed={theme === value}
           onClick={() => onThemeChange(value)}
           LeftContent={<Icon aria-hidden="true" className="size-6 shrink-0" />}
-          RightContent={theme === value ? <AnimatedCheckIcon className="size-5" /> : null}
+          RightContent={
+            theme === value ? (
+              <AnimatedCheckIcon aria-hidden="true" className="size-5" focusable="false" />
+            ) : null
+          }
         >
           {label}
         </PanelItem>

src/widgets/hero/ui/hero-section.test.tsx

@@ -0,0 +1,16 @@
+// @vitest-environment happy-dom
+
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, expect, test } from "vite-plus/test";
+
+import { HeroSectionUI } from "./hero-section.ui";
+
+afterEach(() => {
+  cleanup();
+});
+
+test("keeps visible scroll link text in its accessible name", () => {
+  render(<HeroSectionUI />);
+
+  expect(screen.getByRole("link", { name: "scroll down to about section" })).not.toBeNull();
+});

src/widgets/hero/ui/hero-section.ui.tsx

@@ -48,7 +48,7 @@ export const HeroSectionUI = () => {
       </div>
 
       <a
-        aria-label="Scroll to about section"
+        aria-label="scroll down to about section"
         className="absolute bottom-20 left-1/2 inline-flex -translate-x-1/2 flex-col items-center gap-0.5 font-handwritten text-base leading-none text-slate-11 no-underline"
         href="#about"
       >