fix: [DHIS2-17978] use title instead of alt on missing icons (#3847)

* fix: use title instead of alt on missing icons * chore: fix failing tests
dhis2 · Oct 17, 2024 · c901a17 · c901a17
1 parent 8daf8ac
commit c901a17
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/cypress/e2e/MainPage/MainPage.js b/cypress/e2e/MainPage/MainPage.js
@@ -1,4 +1,4 @@
-import { Given, Then, defineStep as And } from '@badeball/cypress-cucumber-preprocessor';
+import { defineStep as And, Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 
 Given('you are in the search page with Ngelehun and MNCH PNC context', () => {
     cy.visit('/#/search?orgUnitId=DiszpKrYNg8&programId=uy2gU8kT1jF');
@@ -20,13 +20,13 @@ And('you can load the view with the name Events assigned to me', () => {
 });
 
 Then('the icon is rendered as a custom icon', () => {
-    cy.get('[alt="child_program_positive"]')
+    cy.get('[title="child_program_positive"]')
         .invoke('attr', 'src')
         .should('match', /\/icons\/child_program_positive\/icon$/);
 });
 
 Then('the icon is rendered as an svg', () => {
-    cy.get('[alt="child_program_positive"]')
+    cy.get('[title="child_program_positive"]')
         .invoke('attr', 'src')
         .should('match', /\/icons\/child_program_positive\/icon.svg$/);
 });

diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-10-16T14:15:58.172Z\n"
-"PO-Revision-Date: 2024-10-16T14:15:58.172Z\n"
+"POT-Creation-Date: 2024-10-14T14:53:34.553Z\n"
+"PO-Revision-Date: 2024-10-14T14:53:34.553Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."

diff --git a/src/core_modules/capture-ui/NonBundledIcon/NonBundledIcon.component.js b/src/core_modules/capture-ui/NonBundledIcon/NonBundledIcon.component.js
@@ -27,7 +27,9 @@ export const NonBundledIcon = ({
                     <img
                         className={classes.image}
                         src={source}
-                        alt={alternativeText}
+                        title={alternativeText}
+                        // add empty alt to avoid screen readers reading the url
+                        alt={''}
                     />
                 )
             }