From 9d5644b3995b68f9d14b60620e3584804136e224 Mon Sep 17 00:00:00 2001
From: Istvan Soos <istvan.soos@gmail.com>
Date: Mon, 20 Jan 2025 15:49:28 +0100
Subject: [PATCH] Fix h3 issue on landing page.

---
 .../frontend/templates/views/landing/mini_list.dart | 13 +++++++++++--
 app/test/frontend/golden/landing_page.html          |  6 +++---
 .../lib/validation/html/html_validation.dart        |  2 +-
 pkg/web_css/lib/src/_home.scss                      |  3 ++-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/app/lib/frontend/templates/views/landing/mini_list.dart b/app/lib/frontend/templates/views/landing/mini_list.dart
index 86778c5f7a..a739ecee44 100644
--- a/app/lib/frontend/templates/views/landing/mini_list.dart
+++ b/app/lib/frontend/templates/views/landing/mini_list.dart
@@ -27,8 +27,17 @@ d.Node _title(String sectionTag, PackageView p) {
   return d.a(
     classes: ['mini-list-item-title'],
     href: urls.pkgPageUrl(p.name),
-    attributes: {'data-ga-click-event': 'landing-$sectionTag-card-title'},
-    child: d.h3(text: p.name),
+    attributes: {
+      'data-ga-click-event': 'landing-$sectionTag-card-title',
+    },
+    child: d.span(
+      classes: ['mini-list-item-title-text'],
+      text: p.name,
+      attributes: {
+        'role': 'heading',
+        'aria-level': '2',
+      },
+    ),
   );
 }
 
diff --git a/app/test/frontend/golden/landing_page.html b/app/test/frontend/golden/landing_page.html
index c4a31b37bf..dddc4c3f4d 100644
--- a/app/test/frontend/golden/landing_page.html
+++ b/app/test/frontend/golden/landing_page.html
@@ -130,7 +130,7 @@ <h1 class="home-block-title">Flutter Favorites</h1>
           <div class="mini-list">
             <div class="mini-list-item">
               <a class="mini-list-item-title" href="/packages/flutter_titanium" data-ga-click-event="landing-flutter-favorites-card-title">
-                <h3>flutter_titanium</h3>
+                <span class="mini-list-item-title-text" role="heading" aria-level="2">flutter_titanium</span>
               </a>
               <div class="mini-list-item-body">
                 <p class="mini-list-item-description">flutter_titanium is awesome</p>
@@ -153,7 +153,7 @@ <h1 class="home-block-title">Most popular packages</h1>
           <div class="mini-list">
             <div class="mini-list-item">
               <a class="mini-list-item-title" href="/packages/neon" data-ga-click-event="landing-most-popular-card-title">
-                <h3>neon</h3>
+                <span class="mini-list-item-title-text" role="heading" aria-level="2">neon</span>
               </a>
               <div class="mini-list-item-body">
                 <p class="mini-list-item-description">neon is awesome</p>
@@ -167,7 +167,7 @@ <h3>neon</h3>
             </div>
             <div class="mini-list-item">
               <a class="mini-list-item-title" href="/packages/oxygen" data-ga-click-event="landing-most-popular-card-title">
-                <h3>oxygen</h3>
+                <span class="mini-list-item-title-text" role="heading" aria-level="2">oxygen</span>
               </a>
               <div class="mini-list-item-body">
                 <p class="mini-list-item-description">oxygen is awesome</p>
diff --git a/pkg/_pub_shared/lib/validation/html/html_validation.dart b/pkg/_pub_shared/lib/validation/html/html_validation.dart
index 8a4237f246..73f685653e 100644
--- a/pkg/_pub_shared/lib/validation/html/html_validation.dart
+++ b/pkg/_pub_shared/lib/validation/html/html_validation.dart
@@ -178,7 +178,7 @@ void validateHtml(Node root) {
   }
 
   // "role"="<role>" attributes should be on interactive components
-  final allowedForRole = {'a', 'form'};
+  final allowedForRole = {'a', 'form', 'span'};
   for (final elem in querySelectorAll('[role]')) {
     final tag = elem.localName!;
     final role = elem.attributes['role'];
diff --git a/pkg/web_css/lib/src/_home.scss b/pkg/web_css/lib/src/_home.scss
index 8f9e8a9f9d..3585ec3313 100644
--- a/pkg/web_css/lib/src/_home.scss
+++ b/pkg/web_css/lib/src/_home.scss
@@ -127,7 +127,8 @@
     }
 
     .mini-list-item-title {
-      > h3 {
+      > .mini-list-item-title-text {
+        display: block;
         color: var(--pub-home_card_title-text-color);
         font-size: 20px;
         // Needs to be slightly more than 1.2, otherwise the bottom