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

dart-lang · Feb 10, 2025 · 16039fb · 16039fb
1 parent 4ae697c
commit 16039fb
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 59 deletions.
diff --git a/app/lib/frontend/templates/views/pkg/score_tab.dart b/app/lib/frontend/templates/views/pkg/score_tab.dart
@@ -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,
                 ),
@@ -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');
 }

diff --git a/app/test/frontend/golden/pkg_score_page.html b/app/test/frontend/golden/pkg_score_page.html
@@ -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">
@@ -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>
@@ -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">
@@ -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>

diff --git a/app/test/frontend/golden/pkg_score_page_with_downloads_chart.html b/app/test/frontend/golden/pkg_score_page_with_downloads_chart.html
@@ -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">
@@ -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>
@@ -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">
@@ -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>

diff --git a/app/test/task/testdata/goldens/packages/oxygen/score.html b/app/test/task/testdata/goldens/packages/oxygen/score.html
@@ -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">
@@ -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>
@@ -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>
@@ -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">
@@ -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>
@@ -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>
@@ -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">
@@ -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>
                               ,
@@ -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>
@@ -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">
@@ -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>
@@ -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">
@@ -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>
@@ -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>