Merge pull request #507 from dijitali/a11y/add-icon-img-alt

Add "alt" attributes to generated HTML icon img elements
creativecommons · Apr 12, 2024 · 5dd9c45 · 5dd9c45
2 parents 6f647af + 8f0b337
commit 5dd9c45
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 5 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Want to license your work with Creative Commons, but not sure where to start, or which license is right for you? Use our license chooser!"><link rel="icon" href="/favicon.ico"><link rel="icon" type="image/png" href="https://creativecommons.org/wp-content/uploads/2016/05/cc-site-icon-300x300.png" sizes="192x192"><link rel="apple-touch-icon-precomposed" href="https://creativecommons.org/wp-content/uploads/2016/05/cc-site-icon-300x300.png"><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@creativecommons"><meta name="twitter:creator" content="@creativecommons"><meta property="og:url" content="https://beta-chooser.creativecommons.org"><meta property="og:title" content="Choose a License"><meta property="og:type" content="website"><meta property="og:description" content="Want to license your work with Creative Commons, but not sure where to start, or which license is right for you? Use our license chooser!"><meta property="og:image" content="https://mirrors.creativecommons.org/presskit/logos/cc.logo.large.png"><meta property="og:locale" content="en_US"><meta property="og:locale:alternate" content="ru_RU"><title>Choose a License</title><link href="/css/chunk-87a74b80.493fcced.css" rel="prefetch"><link href="/js/chunk-87a74b80.6e5f111e.js" rel="prefetch"><link href="/css/app.2fdce638.css" rel="preload" as="style"><link href="/js/app.afe83491.js" rel="preload" as="script"><link href="/js/chunk-vendors.58f5ae05.js" rel="preload" as="script"><link href="/css/app.2fdce638.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but License Chooser doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.58f5ae05.js"></script><script src="/js/app.afe83491.js"></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Want to license your work with Creative Commons, but not sure where to start, or which license is right for you? Use our license chooser!"><link rel="icon" href="/favicon.ico"><link rel="icon" type="image/png" href="https://creativecommons.org/wp-content/uploads/2016/05/cc-site-icon-300x300.png" sizes="192x192"><link rel="apple-touch-icon-precomposed" href="https://creativecommons.org/wp-content/uploads/2016/05/cc-site-icon-300x300.png"><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@creativecommons"><meta name="twitter:creator" content="@creativecommons"><meta property="og:url" content="https://beta-chooser.creativecommons.org"><meta property="og:title" content="Choose a License"><meta property="og:type" content="website"><meta property="og:description" content="Want to license your work with Creative Commons, but not sure where to start, or which license is right for you? Use our license chooser!"><meta property="og:image" content="https://mirrors.creativecommons.org/presskit/logos/cc.logo.large.png"><meta property="og:locale" content="en_US"><meta property="og:locale:alternate" content="ru_RU"><title>Choose a License</title><link href="/css/chunk-87a74b80.493fcced.css" rel="prefetch"><link href="/js/chunk-87a74b80.6e5f111e.js" rel="prefetch"><link href="/css/app.2fdce638.css" rel="preload" as="style"><link href="/js/app.213f71ad.js" rel="preload" as="script"><link href="/js/chunk-vendors.58f5ae05.js" rel="preload" as="script"><link href="/css/app.2fdce638.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but License Chooser doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.58f5ae05.js"></script><script src="/js/app.213f71ad.js"></script></body></html>
diff --git a/docs/js/app.213f71ad.js b/docs/js/app.213f71ad.js
diff --git a/docs/js/app.afe83491.js.map → docs/js/app.213f71ad.js.map b/docs/js/app.afe83491.js.map → docs/js/app.213f71ad.js.map
diff --git a/docs/js/app.afe83491.js b/docs/js/app.afe83491.js
diff --git a/src/utils/license-utilities.js b/src/utils/license-utilities.js
@@ -262,7 +262,7 @@ function generateLicenseLink(licenseIcons, licenseUrl, licenseName) {
   const iconSrc = attr =>
     `${ICON_BASE_URL}/${attr.toLowerCase()}.svg${assetPathRef}`;
   const icons = licenseIcons
-    .map(attr => `<img ${iconStyle} src="${iconSrc(attr)}">`)
+    .map(attr => `<img ${iconStyle} src="${iconSrc(attr)}" alt="">`)
     .join('');
 
   const linkHref = `href="${licenseUrl}${assetPathRef}"`;

diff --git a/tests/unit/specs/components/LicenseHTML.spec.js b/tests/unit/specs/components/LicenseHTML.spec.js
@@ -55,6 +55,11 @@ describe('LicenseHTML.vue', () => {
 
     const licenseIcons = wrapper.findAll('img');
     expect(licenseIcons.length).toBe(2);
+    // Icon img elements should have the following attributes: source, style and alt
+    const licenseIconsArray = licenseIcons.wrappers;
+    licenseIconsArray.forEach((img) => {
+      expect(Object.keys(img.attributes()).length).toBe(3);
+    });
   });
 
   it('has correct information when all attribution data is provided', async () => {
@@ -96,5 +101,10 @@ describe('LicenseHTML.vue', () => {
 
     const licenseIcons = wrapper.findAll('img');
     expect(licenseIcons.length).toBe(2);
+    // Icon img elements should have the following attributes: source, style and alt
+    const licenseIconsArray = licenseIcons.wrappers;
+    licenseIconsArray.forEach((img) => {
+      expect(Object.keys(img.attributes()).length).toBe(3);
+    });
   });
 });
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Want to license your work with Creative Commons, but not sure where to start, or which license is right for you? Use our license chooser!"><link rel="icon" href="/favicon.ico"><link rel="icon" type="image/png" href="https://creativecommons.org/wp-content/uploads/2016/05/cc-site-icon-300x300.png" sizes="192x192"><link rel="apple-touch-icon-precomposed" href="https://creativecommons.org/wp-content/uploads/2016/05/cc-site-icon-300x300.png"><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@creativecommons"><meta name="twitter:creator" content="@creativecommons"><meta property="og:url" content="https://beta-chooser.creativecommons.org"><meta property="og:title" content="Choose a License"><meta property="og:type" content="website"><meta property="og:description" content="Want to license your work with Creative Commons, but not sure where to start, or which license is right for you? Use our license chooser!"><meta property="og:image" content="https://mirrors.creativecommons.org/presskit/logos/cc.logo.large.png"><meta property="og:locale" content="en_US"><meta property="og:locale:alternate" content="ru_RU"><title>Choose a License</title><link href="/css/chunk-87a74b80.493fcced.css" rel="prefetch"><link href="/js/chunk-87a74b80.6e5f111e.js" rel="prefetch"><link href="/css/app.2fdce638.css" rel="preload" as="style"><link href="/js/app.afe83491.js" rel="preload" as="script"><link href="/js/chunk-vendors.58f5ae05.js" rel="preload" as="script"><link href="/css/app.2fdce638.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but License Chooser doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.58f5ae05.js"></script><script src="/js/app.afe83491.js"></script></body></html>
		<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Want to license your work with Creative Commons, but not sure where to start, or which license is right for you? Use our license chooser!"><link rel="icon" href="/favicon.ico"><link rel="icon" type="image/png" href="https://creativecommons.org/wp-content/uploads/2016/05/cc-site-icon-300x300.png" sizes="192x192"><link rel="apple-touch-icon-precomposed" href="https://creativecommons.org/wp-content/uploads/2016/05/cc-site-icon-300x300.png"><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@creativecommons"><meta name="twitter:creator" content="@creativecommons"><meta property="og:url" content="https://beta-chooser.creativecommons.org"><meta property="og:title" content="Choose a License"><meta property="og:type" content="website"><meta property="og:description" content="Want to license your work with Creative Commons, but not sure where to start, or which license is right for you? Use our license chooser!"><meta property="og:image" content="https://mirrors.creativecommons.org/presskit/logos/cc.logo.large.png"><meta property="og:locale" content="en_US"><meta property="og:locale:alternate" content="ru_RU"><title>Choose a License</title><link href="/css/chunk-87a74b80.493fcced.css" rel="prefetch"><link href="/js/chunk-87a74b80.6e5f111e.js" rel="prefetch"><link href="/css/app.2fdce638.css" rel="preload" as="style"><link href="/js/app.213f71ad.js" rel="preload" as="script"><link href="/js/chunk-vendors.58f5ae05.js" rel="preload" as="script"><link href="/css/app.2fdce638.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but License Chooser doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.58f5ae05.js"></script><script src="/js/app.213f71ad.js"></script></body></html>