mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
fix(www): use li instead of ol in launch week summary lists (#49279)
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>
This commit is contained in:
Miranda LimonczenkoandClaude Opus 5 authored and GitHub committed
1 parent
6edef9f067
commit
ebd399ff87
6 files changed
+44
-44
No files matched your search
@@ -38,14 +38,14 @@ const LW11Summary = () => {
|
||||
{days.map(
|
||||
(day, i: number) =>
|
||||
day.shipped && (
|
||||
<ol key={day.id}>
|
||||
<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>
|
||||
</ol>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
@@ -59,7 +59,7 @@ const LW11Summary = () => {
|
||||
{buildDays.map(
|
||||
(day, i: number) =>
|
||||
day.is_shipped && (
|
||||
<ol key={day.id}>
|
||||
<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"
|
||||
@@ -72,25 +72,25 @@ const LW11Summary = () => {
|
||||
{day.title}
|
||||
</span>
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
<ol className="border-t pt-4 mt-2">
|
||||
<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>
|
||||
</ol>
|
||||
<ol>
|
||||
</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>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,14 +22,14 @@ const LW11Summary = () => {
|
||||
{days.map(
|
||||
(day, i: number) =>
|
||||
day.shipped && (
|
||||
<ol key={day.id}>
|
||||
<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>
|
||||
</ol>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
@@ -43,7 +43,7 @@ const LW11Summary = () => {
|
||||
{buildDays.map(
|
||||
(day, i: number) =>
|
||||
day.is_shipped && (
|
||||
<ol key={day.id}>
|
||||
<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"
|
||||
@@ -56,17 +56,17 @@ const LW11Summary = () => {
|
||||
{day.title}
|
||||
</span>
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
<ol className="border-t pt-4 mt-2">
|
||||
<li className="border-t pt-4 mt-2">
|
||||
<Link
|
||||
href="/launch-week#meetups"
|
||||
className="relative flex items-center justify-between group w-full py-1 hover:text-foreground"
|
||||
>
|
||||
Community Meetups
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,14 +22,14 @@ const LW13Summary = () => {
|
||||
{days.map(
|
||||
(day, i: number) =>
|
||||
day.shipped && (
|
||||
<ol key={day.id}>
|
||||
<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>
|
||||
</ol>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
@@ -43,7 +43,7 @@ const LW13Summary = () => {
|
||||
{buildDays.map(
|
||||
(day, i: number) =>
|
||||
day.is_shipped && (
|
||||
<ol key={day.id}>
|
||||
<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"
|
||||
@@ -56,17 +56,17 @@ const LW13Summary = () => {
|
||||
{day.title}
|
||||
</span>
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
<ol className="border-t pt-4 mt-2">
|
||||
<li className="border-t pt-4 mt-2">
|
||||
<Link
|
||||
href="/events?category=meetup"
|
||||
className="relative flex items-center justify-between group w-full py-1 hover:text-foreground"
|
||||
>
|
||||
Community Meetups
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -26,12 +26,12 @@ const LW14Summary = () => {
|
||||
{days.map(
|
||||
(day, i: number) =>
|
||||
day.shipped && (
|
||||
<ol key={day.id}>
|
||||
<li key={day.id}>
|
||||
<Link href={day.blog} className="group flex py-1 gap-2 hover:text-foreground">
|
||||
<span className="shrink-0 text-sm uppercase leading-6">Day {i + 1} -</span>
|
||||
<span className="leading-6">{day.title}</span>
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
@@ -43,7 +43,7 @@ const LW14Summary = () => {
|
||||
{buildDays.map(
|
||||
(day, i: number) =>
|
||||
day.is_shipped && (
|
||||
<ol key={day.id}>
|
||||
<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"
|
||||
@@ -56,17 +56,17 @@ const LW14Summary = () => {
|
||||
{day.title}
|
||||
</span>
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
<ol className="border-t pt-4 mt-2">
|
||||
<li className="border-t pt-4 mt-2">
|
||||
<Link
|
||||
href="/events?category=meetup"
|
||||
className="relative flex items-center justify-between group w-full py-1 hover:text-foreground"
|
||||
>
|
||||
Community Meetups
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -27,7 +27,7 @@ const LW14Summary = () => {
|
||||
<ul className="flex flex-col gap-2">
|
||||
{days.map((day, i: number) =>
|
||||
day.shipped ? (
|
||||
<ol key={`main-shipped-${day.id}`}>
|
||||
<li key={`main-shipped-${day.id}`}>
|
||||
<Link
|
||||
href={day.blog}
|
||||
className="group flex items-center py-1 gap-2 hover:text-foreground"
|
||||
@@ -36,9 +36,9 @@ const LW14Summary = () => {
|
||||
<span>-</span>
|
||||
<span className="leading-6">{day.title}</span>
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
) : (
|
||||
<ol key={`main-not-shipped-${day.id}`}>
|
||||
<li key={`main-not-shipped-${day.id}`}>
|
||||
<Link
|
||||
href={day.blog}
|
||||
className="group flex items-center gap-2 py-1 text-foreground-muted pointer-events-none"
|
||||
@@ -47,7 +47,7 @@ const LW14Summary = () => {
|
||||
<span>-</span>
|
||||
<Lock className="w-3 h-3" />
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
@@ -58,7 +58,7 @@ const LW14Summary = () => {
|
||||
<ul className="flex flex-col gap-2 mt-4">
|
||||
{buildDays.map((day, i: number) =>
|
||||
day.is_shipped ? (
|
||||
<ol key={`build-shipped-${day.id}`}>
|
||||
<li key={`build-shipped-${day.id}`}>
|
||||
<Link
|
||||
href={day.links[0].url}
|
||||
className="relative flex items-center justify-between group w-full py-1 hover:text-foreground"
|
||||
@@ -72,9 +72,9 @@ const LW14Summary = () => {
|
||||
{day.title}
|
||||
</span>
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
) : (
|
||||
<ol key={`build-not-shipped-${day.id}`}>
|
||||
<li key={`build-not-shipped-${day.id}`}>
|
||||
<Link
|
||||
href={day.links[0].url}
|
||||
className="relative flex items-center justify-between group w-full py-1 text-foreground-muted pointer-events-none"
|
||||
@@ -88,17 +88,17 @@ const LW14Summary = () => {
|
||||
<Lock className="w-3 h-3" />
|
||||
</span>
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
<ol className="border-t pt-4 mt-2">
|
||||
<li className="border-t pt-4 mt-2">
|
||||
<Link
|
||||
href="/events?category=meetup"
|
||||
className="relative flex items-center justify-between group w-full py-1 hover:text-foreground"
|
||||
>
|
||||
Community Meetups
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -30,14 +30,14 @@ const LWXSummary = () => {
|
||||
{mainDays.map(
|
||||
(day, i: number) =>
|
||||
day.shipped && (
|
||||
<ol key={day.id}>
|
||||
<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.description}</span>
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
</ul>
|
||||
@@ -51,7 +51,7 @@ const LWXSummary = () => {
|
||||
{buildDays.map(
|
||||
(day, i: number) =>
|
||||
day.is_shipped && (
|
||||
<ol key={day.id}>
|
||||
<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"
|
||||
@@ -64,25 +64,25 @@ const LWXSummary = () => {
|
||||
{day.title}
|
||||
</span>
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
)
|
||||
)}
|
||||
<ol className="border-t pt-4 mt-2">
|
||||
<li className="border-t pt-4 mt-2">
|
||||
<Link
|
||||
href="/blog/supabase-hackathon-lwx"
|
||||
className="relative flex items-center justify-between group w-full py-1 hover:text-foreground"
|
||||
>
|
||||
Supabase Launch Week X Hackathon
|
||||
</Link>
|
||||
</ol>
|
||||
<ol>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href="/blog/community-meetups-lwx"
|
||||
className="relative flex items-center justify-between group w-full py-1 hover:text-foreground"
|
||||
>
|
||||
Supabase Launch Week X Community Meetups
|
||||
</Link>
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user