diff --git a/CHANGELOG.md b/CHANGELOG.md index 19694452..db811b76 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,7 @@ ### ๐จ ๋ณ๊ฒฝ ์ฌํญ (UX / ์ ๊ทผ์ฑ) +- ๋ก๊ทธ์ธยท๊ด๋ฆฌ์ ๋ก๊ทธ์ธยท๋น๋ฐ๋ฒํธ ์ฌ์ค์ ์ ์ ์ถ ๋๊ธฐ ์ํ์ ๊ธฐ์กด ์ํ ๋ฌธ๊ตฌ๋ฅผ ๋ณด์กฐํ๋ ์ฅ์ ๋ก๋ฉ ์์ด์ฝ์ ์ถ๊ฐํ์ต๋๋ค. ์์ด์ฝ์ ์ ๊ทผ์ฑ ํธ๋ฆฌ์์ ์จ๊ธฐ๊ณ , ์ด์์ฒด์ ์ reduced-motion ์ ํธ๊ฐ ์ผ์ง ๊ฒฝ์ฐ ํ์ ์ ๋๋ฉ์ด์ ์ ์ค์งํฉ๋๋ค. - ์ธ์ ํ๋ ๋ฆฌ๋ณธ์ ์๊ฐ์ ์ผ๋ก ํ์ฌ์ธ ์ด๋ฒคํธ๋ฅผ ํ ๊ธ ๋ฒํผ์ผ๋ก ์ค์ธ์ํค์ง ์๊ณ `aria-current`๋ก ๋ ธ์ถํ๋ฉฐ, ๋ณํฉ๋ ๋๊ตฌ ์คํ์ `Expand โฆ group` ๋ค์ ํ๋๊ณผ ํฌํจ ์ด๋ฒคํธ ์๋ฅผ ๋ช ํํ ์๋ดํฉ๋๋ค. - ํ๋ก์ ํธ ์ด๋ฆ ๋ณ๊ฒฝยท์ญ์ ๋ฒํผ๊ณผ ํ ์คํธ๊ฐ ์ด๋ฆ์ ์ ๊ณตํ๋ ํ๋ก์ ํธ ์์ฑ ๋ฒํผ์ ์ฅ์ ์์ด์ฝ์ ์ ๊ทผ์ฑ ํธ๋ฆฌ์์ ์จ๊ธฐ๊ณ , ๋ฒํผ์ ๊ธฐ์กด ์ ๊ทผ ๊ฐ๋ฅํ ์ด๋ฆ์ด ์ ์ง๋๋์ง ๋ ๋๋ง ํ๊ท ํ ์คํธ๋ก ๊ณ ์ ํ์ต๋๋ค. - ์น ๋์๋ณด๋์ ๊ฐ์ข ๋ก๊ทธ์์ ๋ฒํผ(`org-sidebar.tsx`, `org-header.tsx`, `no-organization-state.tsx`)์ ์คํฌ๋ฆฐ ๋ฆฌ๋์ฉ `aria-label="Log out of your account"` (๋๋ `Sign out of your account`) ์์ฑ์ ์ถ๊ฐํ์ฌ ์ ๊ทผ์ฑ์ ๊ฐ์ ํ์ต๋๋ค. diff --git a/packages/web/src/app/login/page.tsx b/packages/web/src/app/login/page.tsx index 75d1858a..1f5e011b 100644 --- a/packages/web/src/app/login/page.tsx +++ b/packages/web/src/app/login/page.tsx @@ -3,7 +3,7 @@ import { useState } from 'react' import { signIn } from 'next-auth/react' import { useRouter } from 'next/navigation' -import { Button } from '@/components/ui/button' +import { Button, ButtonLoadingContent } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' @@ -75,7 +75,11 @@ export default function LoginPage() {
{error}
)}{error}
} diff --git a/packages/web/src/components/auth/reset-password-form.tsx b/packages/web/src/components/auth/reset-password-form.tsx index 99066a69..f4f28bfa 100644 --- a/packages/web/src/components/auth/reset-password-form.tsx +++ b/packages/web/src/components/auth/reset-password-form.tsx @@ -4,7 +4,7 @@ import { useState } from 'react' import Link from 'next/link' import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert' -import { Button, buttonVariants } from '@/components/ui/button' +import { Button, ButtonLoadingContent, buttonVariants } from '@/components/ui/button' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' @@ -110,7 +110,11 @@ export function ResetPasswordForm({ token, email }: ResetPasswordFormProps) { )} diff --git a/packages/web/src/components/ui/button.test.tsx b/packages/web/src/components/ui/button.test.tsx new file mode 100644 index 00000000..7568197d --- /dev/null +++ b/packages/web/src/components/ui/button.test.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import { renderToStaticMarkup } from 'react-dom/server' +import { describe, expect, it } from 'vitest' + +import { ButtonLoadingContent } from './button' + +describe('ButtonLoadingContent', () => { + it('keeps loading copy readable while the decorative spinner respects reduced motion', () => { + const markup = renderToStaticMarkup( +