Use <nav> in the site header. (dart-lang#7464)

isoos · Feb 6, 2024 · b2ac106 · b2ac106
1 parent 3113815
commit b2ac106
Show file tree

Hide file tree

Showing 48 changed files with 112 additions and 93 deletions.
diff --git a/app/lib/frontend/dom/dom.dart b/app/lib/frontend/dom/dom.dart
@@ -643,6 +643,25 @@ Node meta({
       text: text,
     );
 
+/// Creates a `<nav>` Element using the default [DomContext].
+Node nav({
+  String? id,
+  Iterable<String>? classes,
+  Map<String, String>? attributes,
+  Iterable<Node>? children,
+  Node? child,
+  String? text,
+}) =>
+    dom.element(
+      'nav',
+      id: id,
+      classes: classes,
+      attributes: attributes,
+      children: children,
+      child: child,
+      text: text,
+    );
+
 /// Creates an `<option>` Element using the default [DomContext].
 Node option({
   String? id,

diff --git a/app/lib/frontend/templates/views/shared/site_header.dart b/app/lib/frontend/templates/views/shared/site_header.dart
@@ -50,7 +50,7 @@ d.Node siteHeaderNode({
             ),
           ),
         ),
-      d.div(
+      d.nav(
         classes: [
           'site-header-nav',
           'scroll-container',

diff --git a/app/test/frontend/golden/authorized_page.html b/app/test/frontend/golden/authorized_page.html
@@ -44,7 +44,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div class="nav-login-container">
           <button id="-account-login" class="nav-main-button link">Sign in</button>
         </div>
@@ -102,7 +102,7 @@ <h3 class="foldable-button">
             <a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="container">

diff --git a/app/test/frontend/golden/consent_page.html b/app/test/frontend/golden/consent_page.html
@@ -44,7 +44,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div class="nav-login-container">
           <button id="-account-login" class="nav-main-button link">Sign in</button>
         </div>
@@ -102,7 +102,7 @@ <h3 class="foldable-button">
             <a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="container">

diff --git a/app/test/frontend/golden/create_publisher_page.html b/app/test/frontend/golden/create_publisher_page.html
@@ -43,7 +43,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div class="nav-login-container">
           <button id="-account-login" class="nav-main-button link">Sign in</button>
         </div>
@@ -101,7 +101,7 @@ <h3 class="foldable-button">
             <a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="container">

diff --git a/app/test/frontend/golden/error_page.html b/app/test/frontend/golden/error_page.html
@@ -38,7 +38,7 @@
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div class="nav-login-container">
           <button id="-account-login" class="nav-main-button link">Sign in</button>
         </div>
@@ -96,7 +96,7 @@ <h3 class="foldable-button">
             <a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <div class="_banner-bg">

diff --git a/app/test/frontend/golden/help_page.html b/app/test/frontend/golden/help_page.html
@@ -44,7 +44,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div class="nav-login-container">
           <button id="-account-login" class="nav-main-button link">Sign in</button>
         </div>
@@ -102,7 +102,7 @@ <h3 class="foldable-button">
             <a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="container">

diff --git a/app/test/frontend/golden/landing_page.html b/app/test/frontend/golden/landing_page.html
@@ -38,7 +38,7 @@
       <button class="hamburger" aria-label="menu toggle"></button>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div class="nav-login-container">
           <button id="-account-login" class="nav-main-button link">Sign in</button>
         </div>
@@ -96,7 +96,7 @@ <h3 class="foldable-button">
             <a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <div class="_banner-bg">

diff --git a/app/test/frontend/golden/my_activity_log_page.html b/app/test/frontend/golden/my_activity_log_page.html
@@ -44,7 +44,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div id="-account-profile" class="nav-container nav-my-container hoverable">
           <button class="nav-main-button">My pub.dev</button>
           <div class="nav-hover-popup">
@@ -128,7 +128,7 @@ <h3 class="foldable-button">
             </div>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="-wide-header-detail-page">

diff --git a/app/test/frontend/golden/my_liked_packages.html b/app/test/frontend/golden/my_liked_packages.html
@@ -45,7 +45,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div id="-account-profile" class="nav-container nav-my-container hoverable">
           <button class="nav-main-button">My pub.dev</button>
           <div class="nav-hover-popup">
@@ -129,7 +129,7 @@ <h3 class="foldable-button">
             </div>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="-wide-header-detail-page">

diff --git a/app/test/frontend/golden/my_packages.html b/app/test/frontend/golden/my_packages.html
@@ -44,7 +44,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div id="-account-profile" class="nav-container nav-my-container hoverable">
           <button class="nav-main-button">My pub.dev</button>
           <div class="nav-hover-popup">
@@ -128,7 +128,7 @@ <h3 class="foldable-button">
             </div>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="-wide-header-detail-page">

diff --git a/app/test/frontend/golden/my_publishers.html b/app/test/frontend/golden/my_publishers.html
@@ -44,7 +44,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div id="-account-profile" class="nav-container nav-my-container hoverable">
           <button class="nav-main-button">My pub.dev</button>
           <div class="nav-hover-popup">
@@ -128,7 +128,7 @@ <h3 class="foldable-button">
             </div>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="-wide-header-detail-page">

diff --git a/app/test/frontend/golden/pkg_activity_log_page.html b/app/test/frontend/golden/pkg_activity_log_page.html
@@ -46,7 +46,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div id="-account-profile" class="nav-container nav-my-container hoverable">
           <button class="nav-main-button">My pub.dev</button>
           <div class="nav-hover-popup">
@@ -130,7 +130,7 @@ <h3 class="foldable-button">
             </div>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="container">

diff --git a/app/test/frontend/golden/pkg_admin_page.html b/app/test/frontend/golden/pkg_admin_page.html
@@ -46,7 +46,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div id="-account-profile" class="nav-container nav-my-container hoverable">
           <button class="nav-main-button">My pub.dev</button>
           <div class="nav-hover-popup">
@@ -130,7 +130,7 @@ <h3 class="foldable-button">
             </div>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="container">

diff --git a/app/test/frontend/golden/pkg_changelog_page.html b/app/test/frontend/golden/pkg_changelog_page.html
@@ -46,7 +46,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div class="nav-login-container">
           <button id="-account-login" class="nav-main-button link">Sign in</button>
         </div>
@@ -104,7 +104,7 @@ <h3 class="foldable-button">
             <a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="container">

diff --git a/app/test/frontend/golden/pkg_example_page.html b/app/test/frontend/golden/pkg_example_page.html
@@ -46,7 +46,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div class="nav-login-container">
           <button id="-account-login" class="nav-main-button link">Sign in</button>
         </div>
@@ -104,7 +104,7 @@ <h3 class="foldable-button">
             <a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="container">

diff --git a/app/test/frontend/golden/pkg_index_page.html b/app/test/frontend/golden/pkg_index_page.html
@@ -39,7 +39,7 @@
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div class="nav-login-container">
           <button id="-account-login" class="nav-main-button link">Sign in</button>
         </div>
@@ -97,7 +97,7 @@ <h3 class="foldable-button">
             <a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <div class="_banner-bg">

diff --git a/app/test/frontend/golden/pkg_install_page.html b/app/test/frontend/golden/pkg_install_page.html
@@ -46,7 +46,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div class="nav-login-container">
           <button id="-account-login" class="nav-main-button link">Sign in</button>
         </div>
@@ -104,7 +104,7 @@ <h3 class="foldable-button">
             <a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="container">

diff --git a/app/test/frontend/golden/pkg_score_page.html b/app/test/frontend/golden/pkg_score_page.html
@@ -46,7 +46,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div class="nav-login-container">
           <button id="-account-login" class="nav-main-button link">Sign in</button>
         </div>
@@ -104,7 +104,7 @@ <h3 class="foldable-button">
             <a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="container">

diff --git a/app/test/frontend/golden/pkg_show_page.html b/app/test/frontend/golden/pkg_show_page.html
@@ -46,7 +46,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div class="nav-login-container">
           <button id="-account-login" class="nav-main-button link">Sign in</button>
         </div>
@@ -104,7 +104,7 @@ <h3 class="foldable-button">
             <a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="container">

diff --git a/app/test/frontend/golden/pkg_show_page_discontinued.html b/app/test/frontend/golden/pkg_show_page_discontinued.html
@@ -46,7 +46,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div class="nav-login-container">
           <button id="-account-login" class="nav-main-button link">Sign in</button>
         </div>
@@ -104,7 +104,7 @@ <h3 class="foldable-button">
             <a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="container">

diff --git a/app/test/frontend/golden/pkg_show_page_flutter_plugin.html b/app/test/frontend/golden/pkg_show_page_flutter_plugin.html
@@ -46,7 +46,7 @@
           <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search"/>
         </form>
       </div>
-      <div class="site-header-nav scroll-container">
+      <nav class="site-header-nav scroll-container">
         <div class="nav-login-container">
           <button id="-account-login" class="nav-main-button link">Sign in</button>
         </div>
@@ -104,7 +104,7 @@ <h3 class="foldable-button">
             <a class="nav-link" href="https://dart.dev/tools/pub/publishing" rel="noopener" target="_blank">Publishing a package</a>
           </div>
         </div>
-      </div>
+      </nav>
     </div>
     <div id="banner-container"></div>
     <main class="container">
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,7 +50,7 @@ d.Node siteHeaderNode({ @@
                 ),
               ),
             ),
-          d.div(
+          d.nav(
             classes: [
               'site-header-nav',
               'scroll-container',
@@ Expand Down @@