fix(image-with-caption): a11y fixes

Fixes `alt` attribute of `<dds-image-with-caption>`` not being
propagated to `<dds-image>` in non-lightbox mode.

Also:

* Introduces `launch-lightbox-button-assistive-text` attribute as the
  assistive text for the launcher button of the lightbox.
* Adds a change to ensure `undefined`/`null` property values won't be
  set to `<dds-image>`, etc.

Refs #4265.

packages/web-components/src/components/image-with-caption/image-with-caption.ts

@@ -11,6 +11,7 @@ import { html, 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 on from 'carbon-components/es/globals/js/misc/on';
+import ifNonNull from 'carbon-web-components/es/globals/directives/if-non-null.js';
 import '../image/image';
 import '../lightbox-media-viewer/lightbox-image-viewer';
 import '../button/button';
@@ -76,6 +77,9 @@ class DDSImageWithCaption extends ModalRenderMixin(LitElement) {
   @property({ reflect: true })
   heading = '';
 
+  @property({ attribute: 'launch-lightbox-button-assistive-text' })
+  launchLightboxButtonAssistiveText = 'launch light box media viewer';
+
   /**
    * The description.
    */
@@ -107,34 +111,40 @@ class DDSImageWithCaption extends ModalRenderMixin(LitElement) {
   }
 
   render() {
+    const { alt, defaultSrc, heading, launchLightboxButtonAssistiveText, lightbox, _handleClick: handleClick } = this;
     return html`
-      ${this.lightbox
+      ${lightbox
         ? html`
-            <button class="${prefix}--image-with-caption__image" @click="${this._handleClick}">
-              <dds-image alt="${this.alt}" default-src="${this.defaultSrc}"><slot></slot></dds-image>
+            <button
+              class="${prefix}--image-with-caption__image"
+              aria-label="${ifNonNull(launchLightboxButtonAssistiveText)}"
+              @click="${handleClick}"
+            >
+              <dds-image alt="${ifNonNull(alt)}" default-src="${ifNonNull(defaultSrc)}"><slot></slot></dds-image>
               <div class="${prefix}--image-with-caption__zoom-button">
                 ${ZoomIn20()}
               </div>
             </button>
           `
         : html`
-            <dds-image default-src="${this.defaultSrc}"><slot></slot></dds-image>
+            <dds-image alt="${ifNonNull(alt)}" default-src="${ifNonNull(defaultSrc)}"><slot></slot></dds-image>
           `}
       <p class="${prefix}--image__caption">
-        ${this.heading}
+        ${heading}
       </p>
     `;
   }
 
   renderModal() {
+    const { alt, copy, defaultSrc, heading, open } = this;
     return html`
-      <dds-modal ?open=${this.open} expressive-size="full-width">
+      <dds-modal ?open=${open} expressive-size="full-width">
         <bx-modal-close-button></bx-modal-close-button>
         <dds-lightbox-image-viewer
-          alt="${this.alt}"
-          default-src="${this.defaultSrc}"
-          description="${this.copy}"
-          title="${this.heading}"
+          alt="${ifNonNull(alt)}"
+          default-src="${ifNonNull(defaultSrc)}"
+          description="${ifNonNull(copy)}"
+          title="${ifNonNull(heading)}"
         >
         </dds-lightbox-image-viewer>
       </dds-modal>