Skip to content

Commit

Permalink
Render presentation images without alt text + role attribute. (#7236)
Browse files Browse the repository at this point in the history
  • Loading branch information
@isoos
isoos authored Nov 30, 2023
1 parent 248c563 commit 2ba97c6
Show file tree
Hide file tree
Showing 87 changed files with 113 additions and 102 deletions.
3 changes: 1 addition & 2 deletions app/lib/dartdoc/dartdoc_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.decorative(
src: staticUrls.dartLogoSvg,
alt: 'Dart',
height: 30,
width: 30,
),
Expand Down
21 changes: 21 additions & 0 deletions app/lib/frontend/dom/dom.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,13 +442,33 @@ 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,
});

/// Decorative images don't add information to the content of a page. For example,
/// the information provided by the image might already be given using adjacent
/// text, or the image might be included to make the website more visually attractive.
/// In these cases, a `null` (empty) alt text should be provided (`alt=""`) so that
/// they can be ignored by assistive technologies, such as screen readers.
///
/// Screen readers also allow the use of WAI-ARIA to hide elements by using
/// `role="presentation"`. However, currently, this feature is not as widely
/// supported as using a `null` `alt` attribute.
///
/// https://www.w3.org/WAI/tutorials/images/decorative/
Image.decorative({
required this.src,
required this.width,
required this.height,
}) : alt = '',
role = 'presentation';
}

/// Creates an `<img>` Element using the default [DomContext].
Expand All @@ -472,6 +492,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,
Expand Down
3 changes: 1 addition & 2 deletions app/lib/frontend/templates/misc.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.decorative(
src: static_files.staticUrls.packagesSideImage,
alt: 'cover image decorating the page',
width: 400,
height: 400,
);
Expand Down
3 changes: 1 addition & 2 deletions app/lib/frontend/templates/package_misc.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.decorative(
src: staticUrls.flutterLogo32x32,
alt: 'Flutter logo',
width: 13,
height: 13,
),
Expand Down
9 changes: 3 additions & 6 deletions app/lib/frontend/templates/views/landing/page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,8 @@ d.Node landingPageNode({
if (_isNotEmptyList(mostPopularPackages))
_block(
shortId: 'mp',
image: d.Image(
image: d.Image.decorative(
src: staticUrls.getAssetUrl('/static/img/landing-01.webp'),
alt: 'decoration image for package section',
width: 351,
height: 240,
),
Expand All @@ -52,9 +51,8 @@ d.Node landingPageNode({
if (_isNotEmptyList(topFlutterPackages))
_block(
shortId: 'tf',
image: d.Image(
image: d.Image.decorative(
src: staticUrls.getAssetUrl('/static/img/landing-02.webp'),
alt: 'decoration image for package section',
width: 306,
height: 240,
),
Expand All @@ -69,9 +67,8 @@ d.Node landingPageNode({
if (_isNotEmptyList(topDartPackages))
_block(
shortId: 'td',
image: d.Image(
image: d.Image.decorative(
src: staticUrls.getAssetUrl('/static/img/landing-03.webp'),
alt: 'decoration image for package section',
width: 370,
height: 240,
),
Expand Down
6 changes: 2 additions & 4 deletions app/lib/frontend/templates/views/shared/detail/header.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.decorative(
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.decorative(
src: staticUrls
.getAssetUrl('/static/img/ff-banner-mobile-2x.png'),
alt: 'small Flutter Favorite logo',
width: 94,
height: 116,
),
Expand Down
3 changes: 1 addition & 2 deletions app/lib/frontend/templates/views/shared/layout.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,9 +198,8 @@ d.Node pageLayoutNode({
),
d.img(
classes: ['logo'],
image: d.Image(
image: d.Image.decorative(
src: staticUrls.pubDevLogoSvg,
alt: 'pub.dev package manager',
width: 328,
height: 70,
),
Expand Down
3 changes: 1 addition & 2 deletions app/lib/frontend/templates/views/shared/site_header.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,8 @@ d.Node siteHeaderNode({
href: '/',
child: d.img(
classes: ['site-logo'],
image: d.Image(
image: d.Image.decorative(
src: staticUrls.pubDevLogoSvg,
alt: 'pub logo',
width: 140,
height: 30,
),
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/authorized_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/consent_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/create_publisher_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/error_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions app/test/frontend/golden/help_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions app/test/frontend/golden/landing_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/my_activity_log_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/my_liked_packages.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/my_packages.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/my_publishers.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_activity_log_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_admin_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_changelog_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_example_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_index_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_install_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_score_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_show_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_show_page_discontinued.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_show_page_flutter_plugin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_show_page_publisher.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_show_page_retracted.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_show_page_retracted_non_retracted_version.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_show_version_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/test/frontend/golden/pkg_versions_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 2ba97c6

Please sign in to comment.