patch: tutorials list ui and header issues

[wackerow]

Description

• Cleans up classNames for UI for tutorials list
• Fixes mobile spacing around skill tag and search input.
• Fixes header levels, adding sr-only h2 when results are available, with h3 used for title
• Deprecated redundant Text component; space-y-6 used from parent instead
• i18n: provides translations for new sr-only h2 string

Preview link

https://deploy-preview-17635.ethereum.it/developers/tutorials

cc: @konopkja

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	4c1eca3
🔍 Latest deploy log	https://app.netlify.com/projects/ethereumorg/deploys/699cc48bd607830008726b47
😎 Deploy Preview	https://deploy-preview-17635.ethereum.it
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 57 (🔴 down 5 from production) Accessibility: 94 (🟢 up 1 from production) Best Practices: 100 (no change from production) SEO: 99 (no change from production) PWA: 59 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[wackerow]

Critical Issue Found

Empty <h2> tag at the top of the container — This is the main problem I see.

At the top of the tutorials wrapper (line ~273 in the diff), there's:
<h2 className="sr-only"></h2>

This heading has no text content. It's always rendered regardless of filter state. Screen readers will announce "heading level 2" with nothing after it — that's an accessibility anti-pattern and arguably worse than having no heading at all. Contrast this with the conditional <h2> further down that correctly uses {t("page-tutorials-available")}. I'd guess the intent was to put a translated label here too but it was missed.

Minor Observations (non-critical)

1. block on a LinkFlex component — The class changed from flex-col justify-between to block space-y-6. Since LinkFlex wraps a Flex component (which likely sets display: flex), the block class needs to actually override that. Worth verifying it renders correctly and doesn't create a specificity conflict with Tailwind.
2. text-border removed from LinkFlex — The old classes had text-border on the card links. Removed without replacement. If that was providing text color on the card, the color may now fall through to an inherited value. Likely intentional given the PR description, but worth a visual check on the preview.
3. Bengali (bn) file — Has a lot of invisible character normalization changes (zero-width joiners or similar). Not harmful, but not really a content change either.

Everything Else Looks Clean

• Removing the Text component and using space-y-6 from the parent is a good simplification
• <p> to <h3> for tutorial titles improves heading semantics correctly
• Ternary replacing && for the empty state is fine
• All 25 i18n files correctly add the new "page-tutorials-available" key
• Unused cn and HTMLAttributes imports properly cleaned up

---

Reviewed by Claude (Opus 4.6)

[wackerow]

Patched above issues

• Removes stray h2
• Since "LinkFlex" was being forced back to a block, removed it's usage and replaced with proper BaseLink component
• Refactored to implicit return for arrow function mapping
• Reverted superfluous bn translation updates, good to go

[myelinated-wackerow]

Solid cleanup PR. A few notes:

Spacing change is intentional but worth eyeballing: space-y-6 (24px uniform) replaces the previous mixed margins (mb-8/mt-6), which tightens the title-to-meta gap by ~8px. Assuming this is the intended fix per the PR description — worth a quick check on the deploy preview on mobile to make sure it doesn't feel too tight with the skill tag alongside the title.

External link behavior improvement: Worth noting that BaseLink opens external URLs in new tabs (target="_blank"), whereas the old bare <a> navigated in the same tab. This is probably the better UX for external tutorials — just calling it out as a behavioral change.

Overall: heading hierarchy fix (p → h3, sr-only h2) is a real a11y win, BaseLink over raw <a> is strictly better for internal navigation, skill tag color coding and conditional rendering are both improvements. Clean removal of dead code. Looks good.

---

🤖 Reviewed by Claude / claude-opus-4-6