Botframework-webchat: '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?

[tdurnford]

@v-kydela Hero cards have an images property - not an image property. You are correct.

[madbeher]

We tried using both 'image' and 'images' property and both are working.But 'alt' property is not working for both of them. Below is the documentation link which mentions that herocard has 'image' property.

https://docs.microsoft.com/en-us/composer/how-to-send-cards

Please find the attached screenshot from above documentation link which mentions that herocard has 'image' property.

[madbeher]

Please find below documentation link specific to hero card.

https://docs.microsoft.com/en-us/composer/how-to-send-cards#herocard

[compulim]

Alt-text are something outside for title, subtitle, and text. And the schema doesn't support it.

We need to bring in the service team to update the schema to provide support on accessibility.

We also have another bug #2675 that need schema update for accessibility support.

[compulim]

Few things:

1. The Composer doc is wrong, there is no image property, but images array.
   
   
   
   • images array has 3 fields: url, alt, and tap
   
   
2. Although Web Chat receive alt, our AdaptiveCardBuilder.ts/addImage does not use the altText field. This should be fixed in Web Chat.

[zxyanliu]

FYI. The HeroCard template in the Composer documentation was referenced from the sample.

[tdurnford]

I believe LG supports both the image and images properties. The BotFramework only supports the images property which is an array of images.