Fix h3 issue on landing page. (#8477)

Author: isoos

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',
+      },
+    ),
   );
 }
 

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>

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'];

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