Skip to content

Add appropriate alt text to status icons on score page #8543

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 10, 2025
Merged

Add appropriate alt text to status icons on score page #8543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 13 additions & 17 deletions app/lib/frontend/templates/views/pkg/score_tab.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,8 +125,16 @@ d.Node _section(ReportSection section) {
child: d.img(
classes: ['pkg-report-icon'],
image: d.Image(
src: _statusIconUrls[section.status]!,
alt: _statusIconAlts[section.status]!,
src: switch (section.status) {
ReportStatus.passed => staticUrls.reportOKIconGreen,
ReportStatus.partial => staticUrls.reportMissingIconYellow,
ReportStatus.failed => staticUrls.reportMissingIconRed,
},
alt: switch (section.status) {
ReportStatus.passed => 'Passed report section',
ReportStatus.partial => 'Partially passed report section',
ReportStatus.failed => 'Failed report section',
},
width: 18,
height: 18,
),
Expand Down Expand Up @@ -238,36 +246,24 @@ d.Node _downloadsChart(WeeklyVersionDownloadCounts weeklyVersionDownloads) {
]);
}

final _statusIconUrls = {
ReportStatus.passed:
staticUrls.getAssetUrl('/static/img/report-ok-icon-green.svg'),
ReportStatus.partial:
staticUrls.getAssetUrl('/static/img/report-missing-icon-yellow.svg'),
ReportStatus.failed:
staticUrls.getAssetUrl('/static/img/report-missing-icon-red.svg'),
};

final _statusIconAlts = {
ReportStatus.passed: 'OK',
ReportStatus.partial: 'partial',
ReportStatus.failed: 'failed',
};

String _updatedSummary(String summary) {
return summary.split('\n').map((line) {
if (!line.startsWith('### ')) return line;
return line
.replaceFirst(
'[*]',
'<img class="report-summary-icon" '
'alt="Passed check" '
'src="${staticUrls.reportOKIconGreen}" />')
.replaceFirst(
'[x]',
'<img class="report-summary-icon" '
'alt="Failed check" '
'src="${staticUrls.reportMissingIconRed}" />')
.replaceFirst(
'[~]',
'<img class="report-summary-icon" '
'alt="Partially passed check" '
'src="${staticUrls.reportMissingIconYellow}" />');
}).join('\n');
}
Expand Down
8 changes: 4 additions & 4 deletions app/test/frontend/golden/pkg_score_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ <h3 class="detail-lead-title">Metadata</h3>
<div class="pkg-report-section foldable">
<div class="pkg-report-header foldable-button" data-ga-click-event="toggle-report-section-convention">
<div class="pkg-report-header-icon">
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-missing-icon-red.svg" alt="failed" width="18" height="18"/>
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-missing-icon-red.svg" alt="Failed report section" width="18" height="18"/>
</div>
<div class="pkg-report-header-title">Fake conventions</div>
<div class="pkg-report-header-score -is-red">
Expand All @@ -255,7 +255,7 @@ <h3 class="detail-lead-title">Metadata</h3>
<div class="pkg-report-content">
<div class="pkg-report-content-summary markdown-body">
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-missing-icon-yellow.svg"/>
<img class="report-summary-icon" alt="Partially passed check" src="/static/hash-%%etag%%/img/report-missing-icon-yellow.svg"/>
18/30 points: Package layout
</h3>
<ul>
Expand All @@ -268,7 +268,7 @@ <h3>
<div class="pkg-report-section foldable">
<div class="pkg-report-header foldable-button" data-ga-click-event="toggle-report-section-documentation">
<div class="pkg-report-header-icon">
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg" alt="OK" width="18" height="18"/>
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg" alt="Passed report section" width="18" height="18"/>
</div>
<div class="pkg-report-header-title">Fake documentation</div>
<div class="pkg-report-header-score">
Expand All @@ -282,7 +282,7 @@ <h3>
<div class="pkg-report-content">
<div class="pkg-report-content-summary markdown-body">
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-missing-icon-yellow.svg"/>
<img class="report-summary-icon" alt="Partially passed check" src="/static/hash-%%etag%%/img/report-missing-icon-yellow.svg"/>
36/40 points: Example
</h3>
<ul>
Expand Down
8 changes: 4 additions & 4 deletions app/test/frontend/golden/pkg_score_page_with_downloads_chart.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ <h3 class="detail-lead-title">Metadata</h3>
<div class="pkg-report-section foldable">
<div class="pkg-report-header foldable-button" data-ga-click-event="toggle-report-section-convention">
<div class="pkg-report-header-icon">
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-missing-icon-red.svg" alt="failed" width="18" height="18"/>
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-missing-icon-red.svg" alt="Failed report section" width="18" height="18"/>
</div>
<div class="pkg-report-header-title">Fake conventions</div>
<div class="pkg-report-header-score -is-red">
Expand All @@ -255,7 +255,7 @@ <h3 class="detail-lead-title">Metadata</h3>
<div class="pkg-report-content">
<div class="pkg-report-content-summary markdown-body">
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-missing-icon-yellow.svg"/>
<img class="report-summary-icon" alt="Partially passed check" src="/static/hash-%%etag%%/img/report-missing-icon-yellow.svg"/>
18/30 points: Package layout
</h3>
<ul>
Expand All @@ -268,7 +268,7 @@ <h3>
<div class="pkg-report-section foldable">
<div class="pkg-report-header foldable-button" data-ga-click-event="toggle-report-section-documentation">
<div class="pkg-report-header-icon">
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg" alt="OK" width="18" height="18"/>
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg" alt="Passed report section" width="18" height="18"/>
</div>
<div class="pkg-report-header-title">Fake documentation</div>
<div class="pkg-report-header-score">
Expand All @@ -282,7 +282,7 @@ <h3>
<div class="pkg-report-content">
<div class="pkg-report-content-summary markdown-body">
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-missing-icon-yellow.svg"/>
<img class="report-summary-icon" alt="Partially passed check" src="/static/hash-%%etag%%/img/report-missing-icon-yellow.svg"/>
36/40 points: Example
</h3>
<ul>
Expand Down
34 changes: 17 additions & 17 deletions app/test/task/testdata/goldens/packages/oxygen/score.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ <h3 class="detail-lead-title">Metadata</h3>
<div class="pkg-report-section foldable">
<div class="pkg-report-header foldable-button" data-ga-click-event="toggle-report-section-convention">
<div class="pkg-report-header-icon">
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-missing-icon-red.svg" alt="failed" width="18" height="18"/>
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-missing-icon-red.svg" alt="Failed report section" width="18" height="18"/>
</div>
<div class="pkg-report-header-title">Follow Dart file conventions</div>
<div class="pkg-report-header-score -is-red">
Expand All @@ -247,7 +247,7 @@ <h3 class="detail-lead-title">Metadata</h3>
<div class="pkg-report-content">
<div class="pkg-report-content-summary markdown-body">
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-missing-icon-red.svg"/>
<img class="report-summary-icon" alt="Failed check" src="/static/hash-%%etag%%/img/report-missing-icon-red.svg"/>
0/10 points: Provide a valid
<code>pubspec.yaml</code>
</h3>
Expand Down Expand Up @@ -298,17 +298,17 @@ <h3>
</p>
</details>
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
<img class="report-summary-icon" alt="Passed check" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
5/5 points: Provide a valid
<code>README.md</code>
</h3>
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
<img class="report-summary-icon" alt="Passed check" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
5/5 points: Provide a valid
<code>CHANGELOG.md</code>
</h3>
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-missing-icon-red.svg"/>
<img class="report-summary-icon" alt="Failed check" src="/static/hash-%%etag%%/img/report-missing-icon-red.svg"/>
0/10 points: Use an OSI-approved license
</h3>
<details>
Expand All @@ -328,7 +328,7 @@ <h3>
<div class="pkg-report-section foldable">
<div class="pkg-report-header foldable-button" data-ga-click-event="toggle-report-section-documentation">
<div class="pkg-report-header-icon">
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg" alt="OK" width="18" height="18"/>
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg" alt="Passed report section" width="18" height="18"/>
</div>
<div class="pkg-report-header-title">Provide documentation</div>
<div class="pkg-report-header-score">
Expand All @@ -342,7 +342,7 @@ <h3>
<div class="pkg-report-content">
<div class="pkg-report-content-summary markdown-body">
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
<img class="report-summary-icon" alt="Passed check" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
10/10 points: 20% or more of the public API has dartdoc comments
</h3>
<p>2 out of 8 API elements (25.0 %) have documentation comments.</p>
Expand All @@ -360,7 +360,7 @@ <h3>
.
</p>
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
<img class="report-summary-icon" alt="Passed check" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
10/10 points: Package has an example and has no issues with screenshots
</h3>
</div>
Expand All @@ -370,7 +370,7 @@ <h3>
<div class="pkg-report-section foldable">
<div class="pkg-report-header foldable-button" data-ga-click-event="toggle-report-section-platform">
<div class="pkg-report-header-icon">
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg" alt="OK" width="18" height="18"/>
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg" alt="Passed report section" width="18" height="18"/>
</div>
<div class="pkg-report-header-title">Platform support</div>
<div class="pkg-report-header-score">
Expand All @@ -384,7 +384,7 @@ <h3>
<div class="pkg-report-content">
<div class="pkg-report-content-summary markdown-body">
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
<img class="report-summary-icon" alt="Passed check" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
20/20 points: Supports 6 of 6 possible platforms (
<strong>iOS</strong>
,
Expand Down Expand Up @@ -420,7 +420,7 @@ <h3>
</li>
</ul>
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
<img class="report-summary-icon" alt="Passed check" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
0/0 points: WASM compatibility
</h3>
<p>
Expand All @@ -440,7 +440,7 @@ <h3>
<div class="pkg-report-section foldable">
<div class="pkg-report-header foldable-button" data-ga-click-event="toggle-report-section-analysis">
<div class="pkg-report-header-icon">
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg" alt="OK" width="18" height="18"/>
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg" alt="Passed report section" width="18" height="18"/>
</div>
<div class="pkg-report-header-title">Pass static analysis</div>
<div class="pkg-report-header-score">
Expand All @@ -454,7 +454,7 @@ <h3>
<div class="pkg-report-content">
<div class="pkg-report-content-summary markdown-body">
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
<img class="report-summary-icon" alt="Passed check" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
50/50 points: code has no errors, warnings, lints, or formatting issues
</h3>
</div>
Expand All @@ -464,7 +464,7 @@ <h3>
<div class="pkg-report-section foldable">
<div class="pkg-report-header foldable-button" data-ga-click-event="toggle-report-section-dependency">
<div class="pkg-report-header-icon">
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg" alt="OK" width="18" height="18"/>
<img class="pkg-report-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg" alt="Passed report section" width="18" height="18"/>
</div>
<div class="pkg-report-header-title">Support up-to-date dependencies</div>
<div class="pkg-report-header-score">
Expand All @@ -478,7 +478,7 @@ <h3>
<div class="pkg-report-content">
<div class="pkg-report-content-summary markdown-body">
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
<img class="report-summary-icon" alt="Passed check" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
10/10 points: All of the package dependencies are supported in the latest version
</h3>
<p>No dependencies.</p>
Expand All @@ -488,11 +488,11 @@ <h3>
.
</p>
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
<img class="report-summary-icon" alt="Passed check" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
10/10 points: Package supports latest stable Dart and Flutter SDKs
</h3>
<h3>
<img class="report-summary-icon" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
<img class="report-summary-icon" alt="Passed check" src="/static/hash-%%etag%%/img/report-ok-icon-green.svg"/>
20/20 points: Compatible with dependency constraint lower bounds
</h3>
<p>
Expand Down
Loading
Loading