feat: header accessibility

Signed-off-by: Innei <[email protected]>

next.config.mjs

@@ -13,7 +13,7 @@ const isProd = process.env.NODE_ENV === 'production'
 // eslint-disable-next-line import/no-mutable-exports
 let nextConfig = {
   compiler: {
-    reactRemoveProperties: { properties: ['^data-id$'] },
+    reactRemoveProperties: { properties: ['^data-id$', '^data-(\\w+)-id$'] },
   },
   experimental: {
     appDir: true,

src/app/timeline/page.tsx

@@ -42,11 +42,16 @@ export default function TimelinePage() {
     post: TimelineType.Post,
     note: TimelineType.Note,
   }[type]
-  const { data } = useQuery<TimelineData>({
-    queryKey: ['timeline'],
 
-    meta: { nextType, year },
-    queryFn: async () => {
+  const { data: initialData } = useQuery<TimelineData>({
+    queryKey: ['timeline'],
+    enabled: false,
+  })
+  const { data } = useQuery<TimelineData>({
+    queryKey: ['timeline', nextType, year],
+    initialData,
+    queryFn: async ({ queryKey }) => {
+      const [, nextType, year] = queryKey as [string, TimelineType, string]
       return await apiClient.aggregate
         .getTimeline({
           type: nextType,
@@ -128,7 +133,7 @@ export default function TimelinePage() {
 
   return (
     <NormalContainer>
-      <header className="prose">
+      <header className="prose prose-p:my-2">
         <h1>{title}</h1>
         <h3>{subtitle}</h3>
 
@@ -141,12 +146,11 @@ export default function TimelinePage() {
         )}
       </header>
 
-      <main className="mt-10 text-zinc-950/80 dark:text-zinc-50/80">
+      <main className="mt-10 text-zinc-950/80 dark:text-zinc-50/80" key={type}>
         {sortedArr.reverse().map(([year, value]) => {
           return (
             <BottomToUpSoftScaleTransitionView key={year} className="my-4">
               <m.h4
-                layoutId={`timeline-year-${year}`}
                 className={clsx(
                   'relative mb-4 ml-3 text-lg font-medium',
                   'rounded-md before:absolute before:-left-3 before:bottom-[4px] before:top-[4px] before:w-[2px] before:bg-accent before:content-auto',
@@ -159,7 +163,6 @@ export default function TimelinePage() {
                 {value.map((item) => {
                   return (
                     <m.li
-                      layoutId={`timeline-item-${item.id}`}
                       key={item.id}
                       className="flex items-center justify-between"
                       data-id={item.id}

src/components/layout/header/internal/HeaderContent.tsx

@@ -2,11 +2,13 @@
 
 import React, { memo } from 'react'
 import clsx from 'clsx'
-import { m, useMotionValue } from 'framer-motion'
+import { AnimatePresence, m, useMotionValue } from 'framer-motion'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import type { IHeaderMenu } from '../config'
 
+import { RootPortal } from '~/components/ui/portal'
+import { usePageScrollDirection } from '~/providers/root/page-scroll-info-provider'
 import { clsxm } from '~/utils/helper'
 
 import { useHeaderConfig } from './HeaderDataConfigureProvider'
@@ -15,25 +17,49 @@ import { MenuPopover } from './MenuPopover'
 
 export const HeaderContent = () => {
   return (
-    <AnimatedMenu>
-      <ForDesktop />
-    </AnimatedMenu>
+    <>
+      <AnimatedMenu>
+        <ForDesktop />
+      </AnimatedMenu>
+      <AccessibleMenu />
+    </>
+  )
+}
+
+const AccessibleMenu: Component = () => {
+  const opacity = useMenuOpacity()
+  const up = usePageScrollDirection() === 'up'
+  return (
+    <RootPortal>
+      <AnimatePresence>
+        {opacity === 0 && up && (
+          <m.div
+            initial={{ y: -64 }}
+            animate={{ y: 0 }}
+            exit={{ y: -20, opacity: 0 }}
+            className="fixed left-0 right-0 top-[6rem] z-10 flex justify-center duration-[100ms]"
+          >
+            <ForDesktop />
+          </m.div>
+        )}
+      </AnimatePresence>
+    </RootPortal>
   )
 }
 
 const AnimatedMenu: Component = ({ children }) => {
   const opacity = useMenuOpacity()
 
   return (
-    <div
+    <m.div
       className="duration-[100ms]"
       style={{
         opacity,
         visibility: opacity === 0 ? 'hidden' : 'visible',
       }}
     >
       {children}
-    </div>
+    </m.div>
   )
 }
 
@@ -67,7 +93,7 @@ const ForDesktop: Component = ({ className }) => {
         className,
       )}
     >
-      <div className="flex bg-transparent px-4 font-medium text-zinc-800 dark:text-zinc-200 ">
+      <div className="flex px-4 font-medium text-zinc-800 dark:text-zinc-200 ">
         {headerMenuConfig.map((section) => {
           return (
             <HeaderMenuItem

src/components/ui/link-card/LinkCard.module.css

@@ -61,8 +61,6 @@
 }
 
 .skeleton {
-  @apply !cursor-auto;
-
   & .title,
   & .desc {
     border-radius: 99px;

src/components/ui/list/TimelineList.module.css

@@ -28,15 +28,16 @@
     top: 0;
   }
 
-  li {
+  & > li {
     position: relative;
     list-style-type: none;
 
     line-height: 1.6;
     padding: 3px 0;
+    margin: 0 0 0 1rem;
   }
 
-  li::after {
+  & > li::after {
     content: '';
     left: -1.28rem;
     top: 50%;

src/components/widgets/comment/Comment.tsx

@@ -45,7 +45,7 @@ export const Comment: Component<{
             <div className="flex w-9 shrink-0 items-end">
               <Image
                 src={avatar}
-                alt=""
+                alt={`${author}'s avatar`}
                 className="h-9 w-9 select-none rounded-full bg-zinc-200 ring-2 ring-zinc-200 dark:bg-zinc-800 dark:ring-zinc-800 "
                 width={24}
                 height={24}
@@ -93,6 +93,7 @@ export const Comment: Component<{
                   styles['comment__message'],
                   'relative inline-block rounded-xl px-2 py-1 text-zinc-800 dark:text-zinc-200',
                   'rounded-bl-sm bg-zinc-600/5 dark:bg-zinc-500/20',
+                  'max-w-[calc(100%-3rem)]',
                 )}
               >
                 <Markdown

src/components/widgets/comment/CommentBox/Root.tsx

@@ -1,27 +1,20 @@
 'use client'
 
-import { useEffect, useRef } from 'react'
-import clsx from 'clsx'
+import { useEffect } from 'react'
 import type { FC } from 'react'
 import type { CommentBaseProps } from '../types'
 
-import { SignedIn, SignedOut, useUser } from '@clerk/nextjs'
+import { SignedIn, SignedOut } from '@clerk/nextjs'
 
 import { useIsLogged } from '~/atoms'
-import { MotionButtonBase } from '~/components/ui/button'
-import { FloatPopover } from '~/components/ui/float-popover'
 import { AutoResizeHeight } from '~/components/widgets/shared/AutoResizeHeight'
 
 import { CommentBoxAuthedInput } from './AuthedInput'
 import { CommentBoxLegacyForm } from './CommentBoxLegacyForm'
-import {
-  CommentBoxMode,
-  setCommentMode,
-  useCommentBoxHasText,
-  useCommentMode,
-} from './hooks'
+import { CommentBoxMode, setCommentMode, useCommentMode } from './hooks'
 import { CommentBoxProvider } from './providers'
 import { CommentBoxSignedOutContent } from './SignedOutContent'
+import { SwitchCommentMode } from './SwitchCommentMode'
 
 export const CommentBoxRoot: FC<CommentBaseProps> = (props) => {
   const { refId } = props
@@ -50,51 +43,6 @@ export const CommentBoxRoot: FC<CommentBaseProps> = (props) => {
   )
 }
 
-const SwitchCommentMode = () => {
-  const mode = useCommentMode()
-  const copy = `转换到${mode === CommentBoxMode.legacy ? '新' : '旧'}版评论`
-  const TriggerComponent = useRef<FC>(function SwitchCommentModeButton() {
-    const mode = useCommentMode()
-
-    const hasText = useCommentBoxHasText()
-
-    const notLogged = !!useUser()
-
-    return (
-      <MotionButtonBase
-        className={clsx(
-          'absolute left-0 top-0 z-10 rounded-full text-sm',
-          'h-6 w-6 border border-slate-200 dark:border-neutral-800',
-          'flex cursor-pointer text-base-100/50 center',
-          'opacity-0 transition-opacity duration-200 group-[:hover]:opacity-100',
-          mode === CommentBoxMode['legacy'] && 'bottom-0 top-auto',
-          hasText ||
-            (notLogged &&
-              mode === CommentBoxMode['with-auth'] &&
-              'invisible opacity-0'),
-        )}
-        onClick={() => {
-          setCommentMode(
-            mode === CommentBoxMode.legacy
-              ? CommentBoxMode['with-auth']
-              : CommentBoxMode['legacy'],
-          )
-        }}
-      >
-        <i
-          className={clsx(
-            mode === CommentBoxMode.legacy
-              ? 'icon-[mingcute--user-4-line]'
-              : 'icon-[material-symbols--dynamic-form-outline]',
-          )}
-        />
-        <span className="sr-only">{copy}</span>
-      </MotionButtonBase>
-    )
-  }).current
-  return <FloatPopover TriggerComponent={TriggerComponent}>{copy}</FloatPopover>
-}
-
 const CommentBoxLegacy = () => {
   return (
     <AutoResizeHeight>

src/components/widgets/comment/CommentBox/SwitchCommentMode.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useRef } from 'react'
+import clsx from 'clsx'
+import type { FC } from 'react'
+
+import { useUser } from '@clerk/nextjs'
+
+import { MotionButtonBase } from '~/components/ui/button'
+import { FloatPopover } from '~/components/ui/float-popover'
+
+import {
+  CommentBoxMode,
+  setCommentMode,
+  useCommentBoxHasText,
+  useCommentMode,
+} from './hooks'
+
+export const SwitchCommentMode = () => {
+  const mode = useCommentMode()
+  const copy = `转换到${mode === CommentBoxMode.legacy ? '新' : '旧'}版评论`
+  const TriggerComponent = useRef<FC>(function SwitchCommentModeButton() {
+    const mode = useCommentMode()
+
+    const hasText = useCommentBoxHasText()
+
+    const notLogged = !!useUser()
+
+    return (
+      <MotionButtonBase
+        className={clsx(
+          'absolute left-0 top-0 z-10 rounded-full text-sm',
+          'h-6 w-6 border border-slate-200 dark:border-neutral-800',
+          'bg-slate-100 dark:bg-neutral-900',
+          'flex cursor-pointer text-base-100/50 center',
+          'text-base-content/50',
+          'opacity-0 transition-opacity duration-200 group-[:hover]:opacity-100',
+          mode === CommentBoxMode['legacy'] && 'bottom-0 top-auto',
+          hasText ||
+            (notLogged &&
+              mode === CommentBoxMode['with-auth'] &&
+              'invisible opacity-0'),
+        )}
+        onClick={() => {
+          setCommentMode(
+            mode === CommentBoxMode.legacy
+              ? CommentBoxMode['with-auth']
+              : CommentBoxMode['legacy'],
+          )
+        }}
+      >
+        <i
+          className={clsx(
+            mode === CommentBoxMode.legacy
+              ? 'icon-[mingcute--user-4-line]'
+              : 'icon-[material-symbols--dynamic-form-outline]',
+          )}
+        />
+        <span className="sr-only">{copy}</span>
+      </MotionButtonBase>
+    )
+  }).current
+  return <FloatPopover TriggerComponent={TriggerComponent}>{copy}</FloatPopover>
+}