fix(footer): ensure IBM logo icon is visible

packages/web-components/src/components/footer/footer-logo.ts

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, customElement, LitElement } from 'lit-element';
+import { html, svg, property, customElement, LitElement } from 'lit-element';
 import settings from 'carbon-components/es/globals/js/settings';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import FocusMixin from 'carbon-web-components/es/globals/mixins/focus.js';
@@ -48,9 +48,15 @@ class DDSFooterLogo extends StableSelectorMixin(FocusMixin(LitElement)) {
   render() {
     const { href } = this;
     return html`
-      <a class="${prefix}--footer-logo__link" aria-label="IBM logo" href="${ifNonNull(href)}"
-        >${IBM8BarLogoH65White()}<slot></slot
-      ></a>
+      <a class="${prefix}--footer-logo__link" aria-label="IBM logo" href="${ifNonNull(href)}">
+        ${IBM8BarLogoH65White({
+          class: `${prefix}--footer-logo__logo`,
+          role: 'img',
+          'aria-labelledby': 'footer-logo',
+          children: svg`<title id="footer-logo">IBM Logo</title>`,
+        })}
+        <slot></slot>
+      </a>
     `;
   }
 

packages/web-components/tools/descriptor-from-svg.js

@@ -69,12 +69,12 @@ function svg2JSAsync(data) {
  * @param {string} svg A `<svg>` string.
  * @returns {object} The JSON version of the given `<svg>` string.
  */
-async function svgResultCarbonIconLoader(svg) {
+async function descriptorFromSVG(svg) {
   const svgNode = findRootNode(await svg2JSAsync(svg));
   if (!svgNode) {
     throw new Error(`Wrong SVG2JS result found in: ${svg}`);
   }
   return convertAttrs(svgNode);
 }
 
-module.exports = svgResultCarbonIconLoader;
+module.exports = descriptorFromSVG;

packages/web-components/tools/svg-result-from-icon-descriptor.js

@@ -11,6 +11,13 @@
 
 const { getAttributes, formatAttributes } = require('@carbon/icon-helpers');
 
+// For `@carbon/ibmdotcom-web-components`, we let our consumers set those attributes
+const omitAttrs = {
+  class: true,
+  role: true,
+  'aria-labelledby': true,
+};
+
 /**
  * @param {object} descriptor Object representation of an SVG icon as generated by @carbon/icons
  * @returns {string} The `lit-html` template string version of the given SVG icon descriptor.
@@ -33,12 +40,31 @@ const toString = descriptor => {
  * @param {object} descriptor Object representation of an SVG icon as generated by @carbon/icons
  */
 const icon = descriptor => {
-  descriptor.attrs = getAttributes(
+  const attrs = getAttributes(
     Object.assign(descriptor.attrs, {
       '...': '${spread(attrs)}', // eslint-disable-line no-template-curly-in-string
     })
   );
-  descriptor.content.unshift('${children}'); // eslint-disable-line no-template-curly-in-string
+  descriptor.attrs = Object.keys(attrs).reduce(
+    (acc, attr) =>
+      typeof attrs[attr] === 'undefined' || omitAttrs[attr]
+        ? acc
+        : {
+            ...acc,
+            [attr]: attrs[attr],
+          },
+    {}
+  );
+  descriptor.content = descriptor.content.reduce(
+    (acc, item) => {
+      // For `@carbon/ibmdotcom-web-components`, we let our consumers set the `<title>`
+      if (item.elem !== 'title') {
+        acc.push(item);
+      }
+      return acc;
+    },
+    ['${children}'] // eslint-disable-line no-template-curly-in-string
+  );
   return `({ children, ...attrs } = {}) => svg\`${toString(descriptor)}\``;
 };
 

packages/web-components/tools/svg-result-ibmdotcom-icon-loader.js

@@ -10,7 +10,7 @@
 'use strict';
 
 const svg2js = require('svgo/lib/svgo/svg2js');
-const createSVGResultFromCarbonIcon = require('./svg-result-carbon-icon');
+const createSVGResultFromIconDescriptor = require('./svg-result-from-icon-descriptor');
 
 /**
  * @param {object} node The node in SVG2JS result.
@@ -68,7 +68,7 @@ function svgResultIBMDotcomIconLoader(content) {
           `
           import { svg } from 'lit-html';
           import spread from 'carbon-web-components/es/globals/directives/spread';
-          const svgResultCarbonIcon = ${createSVGResultFromCarbonIcon(convertAttrs(svgNode))};
+          const svgResultCarbonIcon = ${createSVGResultFromIconDescriptor(convertAttrs(svgNode))};
           export default svgResultCarbonIcon;
         `
         );