BotFramework-WebChat icon indicating copy to clipboard operation
BotFramework-WebChat copied to clipboard

Adaptive Card container should not use role="figure" unless alt text is provided

Open compulim opened this issue 1 year ago • 0 comments

Is it an issue related to Adaptive Cards?

No.

What is the PWD impact?

Today, we are using role="figure" on the container of Adaptive Cards without aria-label (or similar semantics) is applied.

When the customer is focusing on the card, the content of the card is not narrated because role="figure" only allow alternative text computation via "author", instead of "contents" (set by the "Name from" field).

What browsers and screen readers do this issue affect?

Windows: Edge with Windows Narrator

Are there any code-based customization done to Web Chat?

No, I am using Web Chat without any customizations except "styleOptions".

What version of Web Chat are you using?

Latest production

Which area does this issue affect?

Focus management

What is the public URL for the website?

No response

How to reproduce the issue?

  1. Navigate to https://compulim.github.io/webchat-loader and talk to MockBot
  2. Type "card weather" in the send box
  3. Press TAB to focus on the first activity with 2 cards
  4. Press ENTER to focus on the first card

Note: a card without interactive

What do you expect?

When focus is landed on the card, screen reader should narrate the content of the card.

What actually happened?

The content of the first card is not narrated.

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

image

Did you find any DOM elements that might have caused the issue?

<div dir="ltr" class="ac-container ac-adaptiveCard" role="figure" style="display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto; padding: 15px; margin: 0px;">

MAS reference

No response

WCAG reference

No response

WAI-ARIA reference

No response

Adaptive Card JSON

No response

Additional context

If an Adaptive Card with interactive element is present, the role will become form.

Both figure and form has "name from" of "author". This means, the content of the card will not be narrated unless explicitly specified via aria-labelledby/aria-label.

Related to https://github.com/microsoft/BotFramework-WebChat/pull/4704. We should not set "role" when aria-label is not present.

compulim avatar Mar 13 '24 06:03 compulim