diff --git a/src/components/common/CreatorSkeleton.tsx b/src/components/common/CreatorSkeleton.tsx index 1a0c3f8e..5527abc2 100644 --- a/src/components/common/CreatorSkeleton.tsx +++ b/src/components/common/CreatorSkeleton.tsx @@ -2,12 +2,20 @@ import { cn } from '@/lib/utils'; interface CreatorSkeletonProps { className?: string; + disableShimmer?: boolean; } const skeletonBlockClass = 'rounded-md bg-white/12 skeleton-shimmer motion-reduce:bg-white/18 motion-reduce:ring-1 motion-reduce:ring-white/15'; +const skeletonStaticBlockClass = + 'rounded-md bg-white/16 ring-1 ring-white/15'; + +const CreatorSkeleton: React.FC = ({ + className, + disableShimmer = false, +}) => { + const blockClass = disableShimmer ? skeletonStaticBlockClass : skeletonBlockClass; -const CreatorSkeleton: React.FC = ({ className }) => { return (
= ({ className }) => {
-
-
+
+
-
-
+
+
-
+
); }; -export const CreatorGridSkeleton: React.FC<{ count?: number }> = ({ +export const CreatorGridSkeleton: React.FC<{ + count?: number; + disableShimmer?: boolean; +}> = ({ count = 6, + disableShimmer = false, }) => { return (
{Array.from({ length: count }).map((_, i) => ( - + ))}
); diff --git a/src/components/common/CreatorSocialLinksList.tsx b/src/components/common/CreatorSocialLinksList.tsx index 64854324..e0f8a5c2 100644 --- a/src/components/common/CreatorSocialLinksList.tsx +++ b/src/components/common/CreatorSocialLinksList.tsx @@ -73,7 +73,7 @@ const CreatorSocialLinksList: React.FC = ({ href={url} target="_blank" rel="noreferrer" - className="group inline-flex w-full items-center justify-center gap-1.5 rounded-lg border border-white/10 bg-white/[0.03] px-2.5 py-2 text-[11px] font-semibold text-white/80 transition-colors hover:border-amber-400/40 hover:bg-amber-400/10 hover:text-amber-100" + className="link-action-chip group inline-flex w-full items-center justify-center gap-1.5 rounded-lg border border-white/10 bg-white/[0.03] px-2.5 py-2 text-[11px] font-semibold text-white/80 transition-colors hover:border-amber-400/40 hover:bg-amber-400/10 hover:text-amber-100" > {label} diff --git a/src/components/common/__tests__/CreatorSkeleton.test.tsx b/src/components/common/__tests__/CreatorSkeleton.test.tsx index 398ec684..ad207b47 100644 --- a/src/components/common/__tests__/CreatorSkeleton.test.tsx +++ b/src/components/common/__tests__/CreatorSkeleton.test.tsx @@ -10,10 +10,28 @@ describe('CreatorSkeleton', () => { expect(shimmerBlocks).toHaveLength(6); }); + it('supports a static non-animated fallback when shimmer is disabled', () => { + const { container } = render(); + const shimmerBlocks = container.querySelectorAll('.skeleton-shimmer'); + + expect(shimmerBlocks).toHaveLength(0); + expect(container.querySelectorAll('.ring-white\\/15')).toHaveLength(6); + }); + it('renders the requested number of cards in grid skeleton', () => { const { container } = render(); const shimmerBlocks = container.querySelectorAll('.skeleton-shimmer'); expect(shimmerBlocks).toHaveLength(18); }); + + it('propagates disableShimmer to all cards in the grid skeleton', () => { + const { container } = render( + + ); + const shimmerBlocks = container.querySelectorAll('.skeleton-shimmer'); + + expect(shimmerBlocks).toHaveLength(0); + expect(container.querySelectorAll('.ring-white\\/15')).toHaveLength(12); + }); }); diff --git a/src/components/common/__tests__/CreatorSocialLinksList.test.tsx b/src/components/common/__tests__/CreatorSocialLinksList.test.tsx new file mode 100644 index 00000000..da34162b --- /dev/null +++ b/src/components/common/__tests__/CreatorSocialLinksList.test.tsx @@ -0,0 +1,13 @@ +import { render, screen } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; +import CreatorSocialLinksList from '../CreatorSocialLinksList'; + +describe('CreatorSocialLinksList', () => { + it('renders link-only action chips with keyboard-visible focus styling hook', () => { + render(); + + const xLink = screen.getByRole('link', { name: /x/i }); + expect(xLink.className).toContain('link-action-chip'); + expect(xLink.className).toContain('hover:border-amber-400/40'); + }); +}); diff --git a/src/index.css b/src/index.css index 80b9c4d9..faeb42bd 100644 --- a/src/index.css +++ b/src/index.css @@ -154,6 +154,27 @@ margin-bottom: var(--spacing-section-major); } + .link-action-chip:focus-visible { + outline: none; + border-color: rgba(252, 211, 77, 0.85); + background-color: rgba(251, 191, 36, 0.2); + color: rgba(255, 255, 255, 0.98); + box-shadow: + 0 0 0 2px rgba(252, 211, 77, 0.9), + 0 0 0 5px rgba(15, 23, 42, 0.95); + } + + @media (forced-colors: active) { + .link-action-chip:focus-visible { + outline: 2px solid Highlight; + outline-offset: 2px; + border-color: Highlight; + background-color: Canvas; + color: CanvasText; + box-shadow: none; + } + } + .skeleton-shimmer { position: relative; overflow: hidden;