Render presentation images without alt text + role attribute.

dart-lang · Nov 29, 2023 · 6a2fe83 · 6a2fe83
1 parent 248c563
commit 6a2fe83
Show file tree

Hide file tree

Showing 87 changed files with 102 additions and 102 deletions.
diff --git a/app/lib/dartdoc/dartdoc_page.dart b/app/lib/dartdoc/dartdoc_page.dart
@@ -136,9 +136,8 @@ extension DartDocPageRender on DartDocPage {
           child: d.img(
             // TODO: Move this into a class
             attributes: {'style': 'height: 30px; margin-right: 1em;'},
-            image: d.Image(
+            image: d.Image.presentation(
               src: staticUrls.dartLogoSvg,
-              alt: 'Dart',
               height: 30,
               width: 30,
             ),

diff --git a/app/lib/frontend/dom/dom.dart b/app/lib/frontend/dom/dom.dart
@@ -442,13 +442,22 @@ class Image {
   final String alt;
   final int? width;
   final int? height;
+  final String? role;
 
   Image({
     required this.src,
     required this.alt,
     required this.width,
     required this.height,
+    this.role,
   });
+
+  Image.presentation({
+    required this.src,
+    required this.width,
+    required this.height,
+  })  : alt = '',
+        role = 'presentation';
 }
 
 /// Creates an `<img>` Element using the default [DomContext].
@@ -472,6 +481,7 @@ Node img({
       if (image.height != null) 'height': image.height.toString(),
       if (title != null) 'title': title,
       if (lazy) 'loading': 'lazy',
+      if (image.role != null) 'role': image.role!,
       if (attributes != null) ...attributes,
     },
     children: children,

diff --git a/app/lib/frontend/templates/misc.dart b/app/lib/frontend/templates/misc.dart
@@ -33,9 +33,8 @@ final _helpScoringMarkdown = _readDocContent('help-scoring.md');
 final _helpSearchMarkdown = _readDocContent('help-search.md');
 final _helpPublishingMarkdown = _readDocContent('help-publishing.md');
 
-late final _sideImage = d.Image(
+late final _sideImage = d.Image.presentation(
   src: static_files.staticUrls.packagesSideImage,
-  alt: 'cover image decorating the page',
   width: 400,
   height: 400,
 );

diff --git a/app/lib/frontend/templates/package_misc.dart b/app/lib/frontend/templates/package_misc.dart
@@ -21,9 +21,8 @@ final coreLibraryBadgeNode = packageBadgeNode(label: 'Core library');
 /// Renders the Flutter Favorite badge, used by package listing.
 final flutterFavoriteBadgeNode = packageBadgeNode(
   label: 'Flutter Favorite',
-  icon: d.Image(
+  icon: d.Image.presentation(
     src: staticUrls.flutterLogo32x32,
-    alt: 'Flutter logo',
     width: 13,
     height: 13,
   ),

diff --git a/app/lib/frontend/templates/views/landing/page.dart b/app/lib/frontend/templates/views/landing/page.dart
@@ -36,9 +36,8 @@ d.Node landingPageNode({
     if (_isNotEmptyList(mostPopularPackages))
       _block(
         shortId: 'mp',
-        image: d.Image(
+        image: d.Image.presentation(
           src: staticUrls.getAssetUrl('/static/img/landing-01.webp'),
-          alt: 'decoration image for package section',
           width: 351,
           height: 240,
         ),
@@ -52,9 +51,8 @@ d.Node landingPageNode({
     if (_isNotEmptyList(topFlutterPackages))
       _block(
         shortId: 'tf',
-        image: d.Image(
+        image: d.Image.presentation(
           src: staticUrls.getAssetUrl('/static/img/landing-02.webp'),
-          alt: 'decoration image for package section',
           width: 306,
           height: 240,
         ),
@@ -69,9 +67,8 @@ d.Node landingPageNode({
     if (_isNotEmptyList(topDartPackages))
       _block(
         shortId: 'td',
-        image: d.Image(
+        image: d.Image.presentation(
           src: staticUrls.getAssetUrl('/static/img/landing-03.webp'),
-          alt: 'decoration image for package section',
           width: 370,
           height: 240,
         ),

diff --git a/app/lib/frontend/templates/views/shared/detail/header.dart b/app/lib/frontend/templates/views/shared/detail/header.dart
@@ -36,21 +36,19 @@ d.Node detailHeaderNode({
                 d.img(
                   classes: ['ff-banner', 'ff-banner-desktop'],
                   title: 'Package is a Flutter Favorite',
-                  image: d.Image(
+                  image: d.Image.presentation(
                     src: staticUrls
                         .getAssetUrl('/static/img/ff-banner-desktop-2x.png'),
-                    alt: 'large Flutter Favorite logo',
                     width: 150,
                     height: 218,
                   ),
                 ),
                 d.img(
                   classes: ['ff-banner', 'ff-banner-mobile'],
                   title: 'Package is a Flutter Favorite',
-                  image: d.Image(
+                  image: d.Image.presentation(
                     src: staticUrls
                         .getAssetUrl('/static/img/ff-banner-mobile-2x.png'),
-                    alt: 'small Flutter Favorite logo',
                     width: 94,
                     height: 116,
                   ),

diff --git a/app/lib/frontend/templates/views/shared/layout.dart b/app/lib/frontend/templates/views/shared/layout.dart
@@ -198,9 +198,8 @@ d.Node pageLayoutNode({
                         ),
                         d.img(
                           classes: ['logo'],
-                          image: d.Image(
+                          image: d.Image.presentation(
                             src: staticUrls.pubDevLogoSvg,
-                            alt: 'pub.dev package manager',
                             width: 328,
                             height: 70,
                           ),

diff --git a/app/lib/frontend/templates/views/shared/site_header.dart b/app/lib/frontend/templates/views/shared/site_header.dart
@@ -24,9 +24,8 @@ d.Node siteHeaderNode({
           href: '/',
           child: d.img(
             classes: ['site-logo'],
-            image: d.Image(
+            image: d.Image.presentation(
               src: staticUrls.pubDevLogoSvg,
-              alt: 'pub logo',
               width: 140,
               height: 30,
             ),

diff --git a/app/test/frontend/golden/authorized_page.html b/app/test/frontend/golden/authorized_page.html
@@ -35,7 +35,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/consent_page.html b/app/test/frontend/golden/consent_page.html
@@ -35,7 +35,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/create_publisher_page.html b/app/test/frontend/golden/create_publisher_page.html
@@ -34,7 +34,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/error_page.html b/app/test/frontend/golden/error_page.html
@@ -34,7 +34,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/help_page.html b/app/test/frontend/golden/help_page.html
@@ -35,7 +35,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>
@@ -108,7 +108,7 @@ <h3 class="foldable-button">
     <main class="container">
       <div class="standalone-wrapper -has-side-image">
         <div class="standalone-side-image-block">
-          <img class="standalone-side-image" src="/static/hash-%%etag%%/img/packages-side.webp" alt="cover image decorating the page" width="400" height="400"/>
+          <img class="standalone-side-image" src="/static/hash-%%etag%%/img/packages-side.webp" alt="" width="400" height="400" role="presentation"/>
         </div>
         <div class="standalone-content">
           <h1 class="hash-header" id="help">

diff --git a/app/test/frontend/golden/landing_page.html b/app/test/frontend/golden/landing_page.html
@@ -102,7 +102,7 @@ <h3 class="foldable-button">
     <div class="_banner-bg">
       <div class="container home-banner">
         <h2 class="_visuallyhidden">pub.dev package manager</h2>
-        <img class="logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub.dev package manager" width="328" height="70"/>
+        <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"/>
           <button class="icon" aria-label="search"></button>
@@ -144,7 +144,7 @@ <h3>flutter_titanium</h3>
       </div>
       <div class="home-block home-block-mp">
         <div class="home-block-image">
-          <img src="/static/hash-%%etag%%/img/landing-01.webp" alt="decoration image for package section" width="351" height="240" loading="lazy"/>
+          <img src="/static/hash-%%etag%%/img/landing-01.webp" alt="" width="351" height="240" loading="lazy" role="presentation"/>
         </div>
         <div class="home-block-content">
           <h1 class="home-block-title">Most popular packages</h1>

diff --git a/app/test/frontend/golden/my_activity_log_page.html b/app/test/frontend/golden/my_activity_log_page.html
@@ -35,7 +35,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/my_liked_packages.html b/app/test/frontend/golden/my_liked_packages.html
@@ -36,7 +36,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/my_packages.html b/app/test/frontend/golden/my_packages.html
@@ -35,7 +35,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/my_publishers.html b/app/test/frontend/golden/my_publishers.html
@@ -35,7 +35,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/pkg_activity_log_page.html b/app/test/frontend/golden/pkg_activity_log_page.html
@@ -37,7 +37,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/pkg_admin_page.html b/app/test/frontend/golden/pkg_admin_page.html
@@ -37,7 +37,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/pkg_changelog_page.html b/app/test/frontend/golden/pkg_changelog_page.html
@@ -37,7 +37,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/pkg_example_page.html b/app/test/frontend/golden/pkg_example_page.html
@@ -37,7 +37,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/pkg_index_page.html b/app/test/frontend/golden/pkg_index_page.html
@@ -35,7 +35,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/pkg_install_page.html b/app/test/frontend/golden/pkg_install_page.html
@@ -37,7 +37,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/pkg_score_page.html b/app/test/frontend/golden/pkg_score_page.html
@@ -37,7 +37,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/pkg_show_page.html b/app/test/frontend/golden/pkg_show_page.html
@@ -37,7 +37,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/pkg_show_page_discontinued.html b/app/test/frontend/golden/pkg_show_page_discontinued.html
@@ -37,7 +37,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/pkg_show_page_flutter_plugin.html b/app/test/frontend/golden/pkg_show_page_flutter_plugin.html
@@ -37,7 +37,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/pkg_show_page_publisher.html b/app/test/frontend/golden/pkg_show_page_publisher.html
@@ -37,7 +37,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/pkg_show_page_retracted.html b/app/test/frontend/golden/pkg_show_page_retracted.html
@@ -37,7 +37,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

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
@@ -37,7 +37,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/pkg_show_version_page.html b/app/test/frontend/golden/pkg_show_version_page.html
@@ -37,7 +37,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/pkg_versions_page.html b/app/test/frontend/golden/pkg_versions_page.html
@@ -37,7 +37,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>

diff --git a/app/test/frontend/golden/publisher_activity_log_page.html b/app/test/frontend/golden/publisher_activity_log_page.html
@@ -36,7 +36,7 @@
     <div class="site-header">
       <button class="hamburger" aria-label="menu toggle"></button>
       <a class="logo" href="/">
-        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="pub logo" width="140" height="30"/>
+        <img class="site-logo" src="/static/hash-%%etag%%/img/pub-dev-logo.svg" alt="" width="140" height="30" role="presentation"/>
       </a>
       <div class="site-header-space"></div>
       <div class="site-header-mask"></div>