mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
Miranda Limonczenko
ebd399ff87
Closes [FE-4096](https://linear.app/supabase/issue/FE-4096/launch-week-summary-lists-ol-inside-ul-link-where-li-belongs-6-copies) ## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Accessibility bug fix. ## What is the current behavior? The launch week summary card renders at the bottom of launch week blog posts. Its two lists are invalid HTML in six copies of the component. - Each entry is an `<ol>` nested directly inside a `<ul>`. Only `<li>` is a valid child of `<ul>`. - The `<Link>` sits inside the `<ol>` rather than inside an `<li>`, so there are no list items at all. Screen readers announce a list of empty items wrapping nested lists instead of a flat list of links. ## What is the new behavior? - Swap every `<ol>` for an `<li>` in the six summary components: LW X, 11, 12, 13, 14, and 15. - Class names and keys carry over unchanged. No visual change. ## Additional context The blog posts stay published. This is a markup fix only. ## Manual testing 1. Open [the Launch Week 15 top 10 post](https://zone-www-dot-com-git-www-fix-lw-summary-lists-supabase.vercel.app/blog/launch-week-15-top-10) on the deploy preview. 2. Scroll to the Launch Week 15 summary card below the article. It shows a Main Stage list and a Build Stage list. 3. Inspect either list. Every direct child of the `<ul>` is an `<li>`, and no `<ol>` appears inside. 4. Repeat on [the Launch Week 12 Wasm FDW post](https://zone-www-dot-com-git-www-fix-lw-summary-lists-supabase.vercel.app/blog/postgres-foreign-data-wrappers-with-wasm) for the Launch Week 12 card. Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
102 lines
3.5 KiB
TypeScript
102 lines
3.5 KiB
TypeScript
import React from 'react'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import { buildDays, mainDays } from './Releases/data'
|
|
|
|
const LW11Summary = () => {
|
|
const days = mainDays()
|
|
|
|
return (
|
|
<div className="w-full border bg-alternative-200 flex flex-col rounded-lg text-foreground-lighter mt-12">
|
|
<div className="w-full p-4 flex justify-between items-center">
|
|
<Link
|
|
href="/ga-week"
|
|
className="flex items-center gap-1.5 leading-none uppercase text-xs opacity-80 transition-opacity hover:opacity-100"
|
|
>
|
|
<Image
|
|
src="/images/launchweek/ga/ga-black.svg"
|
|
alt="GA logo"
|
|
className="dark:hidden w-5 aspect-104/57 h-auto"
|
|
priority
|
|
width={30}
|
|
height={30}
|
|
/>
|
|
<Image
|
|
src="/images/launchweek/ga/ga-white.svg"
|
|
alt="GA logo"
|
|
className="hidden dark:block w-5 aspect-104/57 h-auto"
|
|
priority
|
|
width={30}
|
|
height={30}
|
|
/>
|
|
<span className="text-foreground tracking-[1px] font-mono">Week</span>
|
|
</Link>
|
|
<div className="font-mono uppercase tracking-wide text-xs">15-19 April</div>
|
|
</div>
|
|
<div className="pb-4 border-t p-4">
|
|
<ul className="flex flex-col gap-2">
|
|
{days.map(
|
|
(day, i: number) =>
|
|
day.shipped && (
|
|
<li key={day.id}>
|
|
<Link href={day.blog} className="group flex py-1 gap-2 hover:text-foreground">
|
|
<span className="shrink-0 text-sm font-mono uppercase leading-6">
|
|
Day {i + 1} -
|
|
</span>
|
|
<span className="leading-6">{day.title}</span>
|
|
</Link>
|
|
</li>
|
|
)
|
|
)}
|
|
</ul>
|
|
</div>
|
|
<div className="w-[calc(100%+2px)] bg-surface-100 flex flex-col gap-2 -m-px border rounded-lg">
|
|
<div className="p-4">
|
|
<div className="font-mono uppercase text-xs text-foreground tracking-wide">
|
|
Build Stage
|
|
</div>
|
|
<ul className="flex flex-col gap-2 mt-4">
|
|
{buildDays.map(
|
|
(day, i: number) =>
|
|
day.is_shipped && (
|
|
<li key={day.id}>
|
|
<Link
|
|
href={day.links[0].url}
|
|
className="relative flex items-center justify-between group w-full py-1 hover:text-foreground"
|
|
>
|
|
<span className="relative">
|
|
<span className="font-mono uppercase mr-2">
|
|
{i + 1 < 10 ? '0' : ''}
|
|
{i + 1} -
|
|
</span>
|
|
{day.title}
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
)
|
|
)}
|
|
<li className="border-t pt-4 mt-2">
|
|
<Link
|
|
href="/blog/supabase-oss-hackathon"
|
|
className="relative flex items-center justify-between group w-full py-1 hover:text-foreground"
|
|
>
|
|
Open Source Hackathon 2024
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/ga-week#meetups"
|
|
className="relative flex items-center justify-between group w-full py-1 hover:text-foreground"
|
|
>
|
|
Community Meetups
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LW11Summary
|