Botframework-webchat: [Accessibility] [Screen Reader]: Multiple readouts of the first message of the chat.

[rp-dev]

Screenshots

Version

meta name="botframework-directlinespeech:version" content="4.8.0"
meta name="botframework-webchat:bundle:variant" content="full-es5"
meta name="botframework-webchat:bundle:version" content="4.8.0"
meta name="botframework-webchat:core:version" content="4.8.0"
meta name="botframework-webchat:ui:version" content="4.8.0"

Describe the bug

Content of the message is not read by a screen reader (likely due to '_aria-hidden-true_' as shown in the screenshot above.) The entire block is content is hidden for screen readers.

Steps to reproduce

1. Reported by customer as they are moving from v3 to v4 for their health bot. The issue does not happen in v3.

Expected behavior

The entire block of instruction text should be readable by screen readers
Suggested Fix: Remove aria-hidden=""true"" (as shown in screenshot)

Additional context

WCAG Violation:
●https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning.html

[Bug]

[rp-dev]

Did some investigation on this, if I use ericmai/accessibility branch, there is an 'aria-label' on parent div, specifically:

<div aria-label="Bot Bot said, Hi, I'm here to guide you ...
. Sent at April 16 at 3:48 PM." class="css-hls04x css-10xzw44 webchat__stacked_indented_content" role="region">

( with the _aria-label_ set, it makes sense to have child elements under this div with _aria-hidden=true_.)

That _aria-label_ is missing if I use health bot that uses released version of webchat which makes me feel that a 'certain change' is in the pipeline, though I have no idea which specific change.

[compulim]

If you expand the node above, you should see the AT-only text inside. And it should contains the text "Bot said, Based on your answers, it's likely ... Sent at April 17 at 10:45 AM.".

This is by-design: AT should read the node I marked, and ignore the (tree of) node you marked in red.

[rp-dev]

Got it, thanks. I am trying to test it with Jaws (the screen reader that customer is using) today and will respond with what I see. Thanks.

[corinagum]

@rp-dev side note, apologies in advance for any JAWS problems. Unfortunately we don't officially support it.

[1Copenut]

@corinagum I have been testing this pattern for a couple of days in several browser + screen reader pairings, and wanted to follow up.

Screen reader and browser pairings

• JAWS + Chrome, IE11 on Win 10
• NVDA + Firefox on Win 10
• VoiceOver + Safari on MacOS Catalina
• VoiceOver + Safari on iOS

MacOS Safari + VoiceOver reads out each chat bubble three times when I navigate from point to point using the Ctrl + Opt + RIGHT_ARROW chord. Best I can tell, it reads the aria-label in your AT only span, but it's also reading the second aria-label inside the div[aria-hidden="true"] erroneously. It is then reading out the aria-label a third time announcing the end of the text group.

Looking at the markup pattern, would it be beneficial to refactor and move the assistive technology <span> tags as siblings to the <p> tag that outputs text to the screen? This could provide benefits because the screen reader outline would match up with the text being read on the page, and should stop text being repeated. Thinking something like this:

<ul class="css-dhu3ty css-7c9av6" role="list">
  <li class="css-1qyo5rb" role="listitem">
    <div class="css-hls04x css-10xzw44 webchat__stacked_indented_content">
      <!-- Start of stacked layout avatar -->
      <div class="webchat__stackedLayout__avatar">
        <div aria-hidden="true" class="css-1aivo0e webchat__defaultAvatar css-2bf20l">
          <div class="css-yb0hx9 webchat__initialsAvatar css-10h6e9z">
            <div class="webchat__initialsAvatar__initials">
              VA
            </div>
          </div>
          <div class="css-nzg3w0 webchat__imageAvatar css-12jrzs">
            <div class="css-1tdb3h1 webchat__imageAvatar__image" style=
            "height: 100%; width: 100%;"><img alt="" src=""></div>
          </div>
        </div>
      </div>

      <!-- Start of stacked layout content -->
      <div class="webchat__stackedLayout__content">
        <div class="webchat__row message">
          <div class="css-1j843a5 css-ageddn bubble">
            <div class="webchat__bubble__content">
              <div class="markdown css-18q9i6z">
                <p>
                  <span clas="css-9ohtah">Bot bot said,</span>
                  This is the message included for all users, with the assistive
                  tech messages before and after it. This will keep the screen
                  reader pointer on the visual text bubbles.
                  <span clas="css-9ohtah">Sent at April 15 at 3:22 PM.</span>
                </p>
              </div>
            </div>
          </div>
          <div class="filler"></div>
        </div>
        <div class="webchat__row">
          <div class="filler"></div>
        </div>
      </div>

      <!-- Start of filler -->
      <div class="filler"></div>
    </div>
  </li>
  <!-- Other chat block <li> -->
</ul>

[rp-dev]

Agree with a comment above, seeing multiple readouts of the same text with focus not being at the appropriate place (Win10, chrome, jaws). Also starts reading the message with "_BotBot_ said..." which is confusing as to what is BotBot specially when the bot has a personality and announces its name in the first message.

[compulim]

This is fixed in #3287.