Screenshot icon label + decorative image for collection icons. (dart-…

…lang#7325)
isoos · Dec 19, 2023 · 21837fa · 21837fa
1 parent 1399e81
commit 21837fa
Show file tree

Hide file tree

Showing 15 changed files with 63 additions and 61 deletions.
diff --git a/app/lib/frontend/templates/views/pkg/screenshots.dart b/app/lib/frontend/templates/views/pkg/screenshots.dart
@@ -60,8 +60,8 @@ d.Node collectionsIcon() {
       staticUrls.getAssetUrl('/static/img/collections_white_24dp.svg');
   return d.img(
       classes: ['collections-icon'],
-      image: d.Image(
-          height: 30, width: 30, alt: 'image', src: collectionsIconWhite));
+      image:
+          d.Image.decorative(height: 30, width: 30, src: collectionsIconWhite));
 }
 
 d.Node screenshotThumbnailNode({
@@ -77,8 +77,10 @@ d.Node screenshotThumbnailNode({
     'data-ga-click-event': 'screenshot-thumbnail-click',
   }, children: [
     d.img(
-        classes: ['thumbnail-image'],
-        image: d.Image(
-            alt: 'screenshot', width: null, height: null, src: thumbnailUrl)),
+      classes: ['thumbnail-image'],
+      image: d.Image(
+          alt: 'screenshot', width: null, height: null, src: thumbnailUrl),
+      title: 'View screenshots',
+    ),
   ]);
 }
diff --git a/app/test/task/testdata/goldens/packages/oxygen.html b/app/test/task/testdata/goldens/packages/oxygen.html
@@ -247,9 +247,9 @@ <h1 class="hash-header" id="oxygen">
             </a>
             <div class="detail-screenshot-thumbnail">
               <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
               </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
             </div>
             <h3 class="title">Publisher</h3>
             <p>
@@ -333,9 +333,9 @@ <h3 class="detail-metadata-title">
           </a>
           <div class="detail-screenshot-thumbnail">
             <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
             </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
           </div>
           <h3 class="title">Publisher</h3>
           <p>

diff --git a/app/test/task/testdata/goldens/packages/oxygen/changelog.html b/app/test/task/testdata/goldens/packages/oxygen/changelog.html
@@ -253,9 +253,9 @@ <h2 class="changelog-version hash-header" id="200">
             </a>
             <div class="detail-screenshot-thumbnail">
               <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
               </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
             </div>
             <h3 class="title">Publisher</h3>
             <p>
@@ -339,9 +339,9 @@ <h3 class="detail-metadata-title">
           </a>
           <div class="detail-screenshot-thumbnail">
             <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
             </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
           </div>
           <h3 class="title">Publisher</h3>
           <p>

diff --git a/app/test/task/testdata/goldens/packages/oxygen/example.html b/app/test/task/testdata/goldens/packages/oxygen/example.html
@@ -248,9 +248,9 @@ <h3 class="detail-lead-title">Metadata</h3>
             </a>
             <div class="detail-screenshot-thumbnail">
               <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
               </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
             </div>
             <h3 class="title">Publisher</h3>
             <p>
@@ -334,9 +334,9 @@ <h3 class="detail-metadata-title">
           </a>
           <div class="detail-screenshot-thumbnail">
             <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
             </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
           </div>
           <h3 class="title">Publisher</h3>
           <p>

diff --git a/app/test/task/testdata/goldens/packages/oxygen/install.html b/app/test/task/testdata/goldens/packages/oxygen/install.html
@@ -276,9 +276,9 @@ <h3>Import it</h3>
             </a>
             <div class="detail-screenshot-thumbnail">
               <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
               </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
             </div>
             <h3 class="title">Publisher</h3>
             <p>
@@ -362,9 +362,9 @@ <h3 class="detail-metadata-title">
           </a>
           <div class="detail-screenshot-thumbnail">
             <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
             </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
           </div>
           <h3 class="title">Publisher</h3>
           <p>

diff --git a/app/test/task/testdata/goldens/packages/oxygen/license.html b/app/test/task/testdata/goldens/packages/oxygen/license.html
@@ -249,9 +249,9 @@ <h2>License</h2>
             </a>
             <div class="detail-screenshot-thumbnail">
               <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
               </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
             </div>
             <h3 class="title">Publisher</h3>
             <p>
@@ -335,9 +335,9 @@ <h3 class="detail-metadata-title">
           </a>
           <div class="detail-screenshot-thumbnail">
             <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
             </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
           </div>
           <h3 class="title">Publisher</h3>
           <p>

diff --git a/app/test/task/testdata/goldens/packages/oxygen/score.html b/app/test/task/testdata/goldens/packages/oxygen/score.html
@@ -556,9 +556,9 @@ <h3>
             </a>
             <div class="detail-screenshot-thumbnail">
               <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
               </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
             </div>
             <h3 class="title">Publisher</h3>
             <p>
@@ -642,9 +642,9 @@ <h3 class="detail-metadata-title">
           </a>
           <div class="detail-screenshot-thumbnail">
             <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
             </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
           </div>
           <h3 class="title">Publisher</h3>
           <p>

diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions.html b/app/test/task/testdata/goldens/packages/oxygen/versions.html
@@ -309,9 +309,9 @@ <h2 id="stable">Stable versions of oxygen</h2>
             </a>
             <div class="detail-screenshot-thumbnail">
               <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+                <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
               </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
             </div>
             <h3 class="title">Publisher</h3>
             <p>
@@ -395,9 +395,9 @@ <h3 class="detail-metadata-title">
           </a>
           <div class="detail-screenshot-thumbnail">
             <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/2.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+              <img class="thumbnail-image" src="/packages/oxygen/versions/2.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
             </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
           </div>
           <h3 class="title">Publisher</h3>
           <p>

diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0.html b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0.html
@@ -251,9 +251,9 @@ <h1 class="hash-header" id="oxygen">
             </a>
             <div class="detail-screenshot-thumbnail">
               <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+                <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
               </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
             </div>
             <h3 class="title">Publisher</h3>
             <p>
@@ -337,9 +337,9 @@ <h3 class="detail-metadata-title">
           </a>
           <div class="detail-screenshot-thumbnail">
             <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+              <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
             </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
           </div>
           <h3 class="title">Publisher</h3>
           <p>

diff --git a/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/changelog.html b/app/test/task/testdata/goldens/packages/oxygen/versions/1.0.0/changelog.html
@@ -257,9 +257,9 @@ <h2 class="changelog-version hash-header" id="100">
             </a>
             <div class="detail-screenshot-thumbnail">
               <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-                <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+                <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
               </div>
-              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+              <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
             </div>
             <h3 class="title">Publisher</h3>
             <p>
@@ -343,9 +343,9 @@ <h3 class="detail-metadata-title">
           </a>
           <div class="detail-screenshot-thumbnail">
             <div class="thumbnail-container" data-thumbnail="/packages/oxygen/versions/1.0.0/gen-res/gen/static.webp" data-thumbnail-descriptions-json="[&quot;This is an awesome screenshot&quot;]" data-ga-click-event="screenshot-thumbnail-click">
-              <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot"/>
+              <img class="thumbnail-image" src="/packages/oxygen/versions/1.0.0/gen-res/gen/190x190/static.webp" alt="screenshot" title="View screenshots"/>
             </div>
-            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="image" width="30" height="30"/>
+            <img class="collections-icon" src="/static/hash-%%etag%%/img/collections_white_24dp.svg" alt="" width="30" height="30" role="presentation"/>
           </div>
           <h3 class="title">Publisher</h3>
           <p>