Title and accessible label for search input fields. (dart-lang#7261)

isoos · Dec 7, 2023 · 2ec614c · 2ec614c
1 parent 8f62173
commit 2ec614c
Show file tree

Hide file tree

Showing 48 changed files with 54 additions and 46 deletions.
diff --git a/app/lib/frontend/templates/views/shared/search_banner.dart b/app/lib/frontend/templates/views/shared/search_banner.dart
@@ -25,6 +25,10 @@ d.Node searchBannerNode({
         autocomplete: 'on',
         autofocus: autofocus,
         value: queryText,
+        attributes: {
+          'title': 'Search',
+          'aria-label': 'Search',
+        },
       ),
       d.button(classes: ['icon'], ariaLabel: 'search'),
       if (showSearchFiltersButton)

diff --git a/app/lib/frontend/templates/views/shared/site_header.dart b/app/lib/frontend/templates/views/shared/site_header.dart
@@ -44,6 +44,10 @@ d.Node siteHeaderNode({
               name: 'q',
               placeholder: 'New search...',
               autocomplete: 'on',
+              attributes: {
+                'title': 'Search',
+                'aria-label': 'Search',
+              },
             ),
           ),
         ),

diff --git a/app/test/frontend/golden/authorized_page.html b/app/test/frontend/golden/authorized_page.html
@@ -41,7 +41,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/consent_page.html b/app/test/frontend/golden/consent_page.html
@@ -41,7 +41,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/create_publisher_page.html b/app/test/frontend/golden/create_publisher_page.html
@@ -40,7 +40,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/error_page.html b/app/test/frontend/golden/error_page.html
@@ -102,7 +102,7 @@ <h3 class="foldable-button">
     <div class="_banner-bg">
       <div class="container">
         <form class="search-bar banner-item" action="/packages">
-          <input class="input" name="q" placeholder="Search packages" autocomplete="on" autofocus="autofocus"/>
+          <input class="input" name="q" placeholder="Search packages" autocomplete="on" autofocus="autofocus" title="Search" aria-label="Search"/>
           <button class="icon" aria-label="search"></button>
         </form>
       </div>

diff --git a/app/test/frontend/golden/help_page.html b/app/test/frontend/golden/help_page.html
@@ -41,7 +41,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/landing_page.html b/app/test/frontend/golden/landing_page.html
@@ -104,7 +104,7 @@ <h3 class="foldable-button">
         <h2 class="_visuallyhidden">pub.dev package manager</h2>
         <img class="logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="328" height="70" role="presentation"/>
         <form class="search-bar banner-item" action="/packages">
-          <input class="input" name="q" placeholder="Search packages" autocomplete="on" autofocus="autofocus"/>
+          <input class="input" name="q" placeholder="Search packages" autocomplete="on" autofocus="autofocus" title="Search" aria-label="Search"/>
           <button class="icon" aria-label="search"></button>
         </form>
         <p class="text">

diff --git a/app/test/frontend/golden/my_activity_log_page.html b/app/test/frontend/golden/my_activity_log_page.html
@@ -41,7 +41,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/my_liked_packages.html b/app/test/frontend/golden/my_liked_packages.html
@@ -42,7 +42,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/my_packages.html b/app/test/frontend/golden/my_packages.html
@@ -41,7 +41,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/my_publishers.html b/app/test/frontend/golden/my_publishers.html
@@ -41,7 +41,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/pkg_activity_log_page.html b/app/test/frontend/golden/pkg_activity_log_page.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/pkg_admin_page.html b/app/test/frontend/golden/pkg_admin_page.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/pkg_changelog_page.html b/app/test/frontend/golden/pkg_changelog_page.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/pkg_example_page.html b/app/test/frontend/golden/pkg_example_page.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/pkg_index_page.html b/app/test/frontend/golden/pkg_index_page.html
@@ -103,7 +103,7 @@ <h3 class="foldable-button">
     <div class="_banner-bg">
       <div class="container">
         <form class="search-bar banner-item" action="/packages">
-          <input class="input" name="q" placeholder="Search packages" autocomplete="on" value="sdk:dart"/>
+          <input class="input" name="q" placeholder="Search packages" autocomplete="on" value="sdk:dart" title="Search" aria-label="Search"/>
           <button class="icon" aria-label="search"></button>
           <div class="search-filters-btn-wrapper -active">
             <img class="search-filters-btn search-filters-btn-inactive" src="/static/hash-%%etag%%/img/search-filters-inactive.svg" alt="icon to toggle the display of search filters (inactive)" width="42" height="42"/>

diff --git a/app/test/frontend/golden/pkg_install_page.html b/app/test/frontend/golden/pkg_install_page.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/pkg_score_page.html b/app/test/frontend/golden/pkg_score_page.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/pkg_show_page.html b/app/test/frontend/golden/pkg_show_page.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/pkg_show_page_discontinued.html b/app/test/frontend/golden/pkg_show_page_discontinued.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-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
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/pkg_show_page_publisher.html b/app/test/frontend/golden/pkg_show_page_publisher.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/pkg_show_page_retracted.html b/app/test/frontend/golden/pkg_show_page_retracted.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/pkg_show_page_retracted_non_retracted_version.html b/app/test/frontend/golden/pkg_show_page_retracted_non_retracted_version.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/pkg_show_version_page.html b/app/test/frontend/golden/pkg_show_version_page.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/pkg_versions_page.html b/app/test/frontend/golden/pkg_versions_page.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/frontend/golden/publisher_activity_log_page.html b/app/test/frontend/golden/publisher_activity_log_page.html
@@ -104,7 +104,7 @@ <h3 class="foldable-button">
     <div class="_banner-bg">
       <div class="container">
         <form class="search-bar banner-item" action="/packages">
-          <input class="input" name="q" placeholder="Search packages" autocomplete="on" autofocus="autofocus"/>
+          <input class="input" name="q" placeholder="Search packages" autocomplete="on" autofocus="autofocus" title="Search" aria-label="Search"/>
           <button class="icon" aria-label="search"></button>
         </form>
       </div>

diff --git a/app/test/frontend/golden/publisher_admin_page.html b/app/test/frontend/golden/publisher_admin_page.html
@@ -104,7 +104,7 @@ <h3 class="foldable-button">
     <div class="_banner-bg">
       <div class="container">
         <form class="search-bar banner-item" action="/packages">
-          <input class="input" name="q" placeholder="Search packages" autocomplete="on" autofocus="autofocus"/>
+          <input class="input" name="q" placeholder="Search packages" autocomplete="on" autofocus="autofocus" title="Search" aria-label="Search"/>
           <button class="icon" aria-label="search"></button>
         </form>
       </div>

diff --git a/app/test/frontend/golden/publisher_list_page.html b/app/test/frontend/golden/publisher_list_page.html
@@ -103,7 +103,7 @@ <h3 class="foldable-button">
     <div class="_banner-bg">
       <div class="container">
         <form class="search-bar banner-item" action="/packages">
-          <input class="input" name="q" placeholder="Search packages" autocomplete="on" autofocus="autofocus"/>
+          <input class="input" name="q" placeholder="Search packages" autocomplete="on" autofocus="autofocus" title="Search" aria-label="Search"/>
           <button class="icon" aria-label="search"></button>
           <div class="search-filters-btn-wrapper">
             <img class="search-filters-btn search-filters-btn-inactive" src="/static/hash-%%etag%%/img/search-filters-inactive.svg" alt="icon to toggle the display of search filters (inactive)" width="42" height="42"/>

diff --git a/app/test/frontend/golden/publisher_packages_page.html b/app/test/frontend/golden/publisher_packages_page.html
@@ -104,7 +104,7 @@ <h3 class="foldable-button">
     <div class="_banner-bg">
       <div class="container">
         <form class="search-bar banner-item" action="/packages">
-          <input class="input" name="q" placeholder="Search packages" autocomplete="on" autofocus="autofocus"/>
+          <input class="input" name="q" placeholder="Search packages" autocomplete="on" autofocus="autofocus" title="Search" aria-label="Search"/>
           <button class="icon" aria-label="search"></button>
         </form>
       </div>

diff --git a/app/test/frontend/golden/publisher_unlisted_packages_page.html b/app/test/frontend/golden/publisher_unlisted_packages_page.html
@@ -104,7 +104,7 @@ <h3 class="foldable-button">
     <div class="_banner-bg">
       <div class="container">
         <form class="search-bar banner-item" action="/packages">
-          <input class="input" name="q" placeholder="Search packages" autocomplete="on" autofocus="autofocus"/>
+          <input class="input" name="q" placeholder="Search packages" autocomplete="on" autofocus="autofocus" title="Search" aria-label="Search"/>
           <button class="icon" aria-label="search"></button>
         </form>
       </div>

diff --git a/app/test/frontend/golden/search_page.html b/app/test/frontend/golden/search_page.html
@@ -103,7 +103,7 @@ <h3 class="foldable-button">
     <div class="_banner-bg">
       <div class="container">
         <form class="search-bar banner-item" action="/packages">
-          <input class="input" name="q" placeholder="Search packages" autocomplete="on" value="foobar"/>
+          <input class="input" name="q" placeholder="Search packages" autocomplete="on" value="foobar" title="Search" aria-label="Search"/>
           <button class="icon" aria-label="search"></button>
           <div class="search-filters-btn-wrapper">
             <img class="search-filters-btn search-filters-btn-inactive" src="/static/hash-%%etag%%/img/search-filters-inactive.svg" alt="icon to toggle the display of search filters (inactive)" width="42" height="42"/>

diff --git a/app/test/frontend/golden/topics_page.html b/app/test/frontend/golden/topics_page.html
@@ -41,7 +41,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/task/testdata/goldens/packages/oxygen.html b/app/test/task/testdata/goldens/packages/oxygen.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/task/testdata/goldens/packages/oxygen/changelog.html b/app/test/task/testdata/goldens/packages/oxygen/changelog.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/task/testdata/goldens/packages/oxygen/example.html b/app/test/task/testdata/goldens/packages/oxygen/example.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/task/testdata/goldens/packages/oxygen/install.html b/app/test/task/testdata/goldens/packages/oxygen/install.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/task/testdata/goldens/packages/oxygen/license.html b/app/test/task/testdata/goldens/packages/oxygen/license.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">

diff --git a/app/test/task/testdata/goldens/packages/oxygen/score.html b/app/test/task/testdata/goldens/packages/oxygen/score.html
@@ -43,7 +43,7 @@
       <div class="site-header-mask"></div>
       <div class="site-header-search">
         <form action="/packages" method="GET">
-          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on"/>
+          <input class="site-header-search-input" name="q" placeholder="New search..." autocomplete="on" title="Search" aria-label="Search"/>
         </form>
       </div>
       <div class="site-header-nav scroll-container">