diff --git a/app/lib/dartdoc/dartdoc_page.dart b/app/lib/dartdoc/dartdoc_page.dart index 00ba494598..7583097005 100644 --- 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 index edb39bb1b2..b9195687ae 100644 --- 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 `` 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 index 694f8fe14c..cbc11818e7 100644 --- 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 index 96ec7c47c7..69d6169056 100644 --- 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 index 059458b6ff..9f7f824099 100644 --- 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 index 70f35493b3..ceace283aa 100644 --- a/app/lib/frontend/templates/views/shared/detail/header.dart +++ b/app/lib/frontend/templates/views/shared/detail/header.dart @@ -36,10 +36,9 @@ 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, ), @@ -47,10 +46,9 @@ d.Node detailHeaderNode({ 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 index 710fb76586..d521595655 100644 --- 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 index e6f79051e2..e42e5b555a 100644 --- 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 index c27fbf18f2..0c61e84a4d 100644 --- a/app/test/frontend/golden/authorized_page.html +++ b/app/test/frontend/golden/authorized_page.html @@ -35,7 +35,7 @@