'alt' property for describing image element in a herocard is not working

[madbeher]

We are trying to add descriptive text to an image element in hero card using 'alt' property of 'CardImage' object as mentioned in the below document.

https://docs.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-reference#hero-card

https://docs.microsoft.com/en-us/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#cardimage-object

I have attached screenshot of implemented logic
Herocard_LG_Template.zip
for the same.After implementing as shown in the attach image 'alt' property for image is not working and image is not getting displayed as well.

[v-kydela]

Thank you for the report, @madbeher. What channel are you using?

[madbeher]

Hi,
As of now I am doing testing in Bot Emulator in local machine only.

Thanks.....

[v-kydela]

@madbeher - Hero cards don't have an image property. What happens if you try using images instead?

Also, it would help if you posted your code as code instead of a screenshot

[tdurnford]

@v-kydela Hero cards can have an image. Take a look at the Hero Card documentation.

@madbeher I'm going to transfer this issue to the Web Chat repo since this looks like an issue with Web Chat not adding the altText to images in cards.

AdaptiveCardBuilder

-addImage(url: string, container?: Container, selectAction?: CardAction) {
+addImage(url: string, container?: Container, selectAction?: CardAction, altText?: string) {
    container = container || this.container;

    const image = new Image();

+   image.altText = altText;
    image.url = url;
    image.selectAction = selectAction && addCardAction(selectAction);
    image.size = Size.Stretch;

    container.addItem(image);
}

HeroCardContent - Note, this probably needs to be fixed in all of the card attachments.

const HeroCardContent = ({ actionPerformedClassName, content, disabled }) => {

    ....
    const builder = new AdaptiveCardBuilder(adaptiveCardsPackage, styleOptions, direction);

    if (content) {
-      (content.images || []).forEach(image => builder.addImage(image.url, null, image.tap));
+      (content.images || []).forEach(image => builder.addImage(image.url, null, image.tap, image.altText));
      builder.addCommon(content);

      return builder.card;
    }
  }, [adaptiveCardsPackage, content, direction, styleOptions]);
    ....   
};

Additional Context

AdaptiveCards addImage documentation

[v-kydela]

@tdurnford - Sorry I'm not sure what you mean when you say hero cards can have an image. Are you just agreeing with what I said about the cards having an images property, or are you saying they have an image property as well? I'm only seeing an images property. Can you show me where the image property is documented?