<HeroCardContent> prop `content.images[].alt` should be optional

Is it an issue related to Adaptive Cards?

No

Is this an accessibility issue?

No

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

NPM

Which hosting environment does this issue primarily affect?

Web apps

Which browsers and platforms do the issue happened?

Others or unrelated

Which area does this issue affect?

Attachment: Other rich cards

What is the public URL for the website?

No response

Please describe the bug

When rendering a hero card with an image without alt, React say prop validation failed because alt is required.

Despite the importance of alt in accessibility, the Direct Line spec did not call out alt as required.

Thus, we should not mark alt as required.

Do you see any errors in console log?

TBD.

How to reproduce the issue?

1. Create a React app using npm install botframework-webchat
   • This only repros when using NPM version of Web Chat because React will only warn on NPM builds
2. Load the following transcript

[
  {
    "attachmentLayout": "carousel",
    "attachments": [
      {
        "contentType": "application/vnd.microsoft.card.hero",
        "content": {
          "title": "Details about image 1",
          "subtitle": "This is the subtitle",
          "text": "Price: $XXX.XX USD",
          "images": [
            {
              "url": "https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface1.jpg"
            }
          ],
          "buttons": [
            {
              "type": "imBack",
              "value": "Place to buy",
              "title": "Places To Buy"
            },
            {
              "type": "imBack",
              "value": "Related Products",
              "title": "Related Products"
            }
          ]
        }
      },
      {
        "contentType": "application/vnd.microsoft.card.hero",
        "content": {
          "title": "Details about image 2",
          "subtitle": "This is the subtitle",
          "text": "Price: $XXX.XX USD",
          "images": [
            {
              "url": "https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface2.jpg"
            }
          ],
          "buttons": [
            {
              "type": "imBack",
              "value": "Place to buy",
              "title": "Places To Buy"
            },
            {
              "type": "imBack",
              "value": "Related Products",
              "title": "Related Products"
            }
          ]
        }
      }
    ],
    "from": {
      "role": "bot"
    },
    "id": "1.0",
    "text": "",
    "timestamp": 0,
    "type": "message"
  }
]

What do you expect?

In console log, it should not print anything.

What actually happened?

It printed about the prop validation failed because content.images[].alt is required but is undefined.

Do you have any screenshots or recordings to repro the issue?

No response

Adaptive Card JSON

No response

Additional context

This cannot be reproduced on Web Chat Loader probably because it uses UMD version of React.

Start by locating the HeroCardContent prop validation for content.images[].alt and reproduce the warning with the transcript in this issue using the NPM distribution. Confirm that a hero-card image without alt no longer produces a React prop-validation warning, while preserving the provided reproduction behavior.