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

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]

[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>

[compulim]

This is fixed in #3287.