Accessibility: Notification bar should not have role="region" on <ul>/<li>

[elopezanaya]

Is it an issue related to Adaptive Cards?

• Yes, this is an Adaptive Card issue but it is specific to Web Chat.

Do you have any screenshots?

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

Bundle (webchat.js)

Which hosting environment does this issue primarily affect?

Dynamics 365 Omnichannel

Which browsers and platforms do the issue happened?

Browser: Edge (latest), Browser: Chrome (latest)

Which area does this issue affect?

Chat history

Is this an accessibility issue?

• Yes, this is an accessibility issue.

Please describe the bug

Accessibility insights for web tool is failing for fast pass report, due to next A11y issues :

Title: ,WCAG 1.3.1,WCAG 4.1.2,Best Practice: Ensures role attribute has an appropriate value for the element (#webchat__toaster__list__23950)
Tags: Accessibility, , WCAG 1.3.1, WCAG 4.1.2, Best Practice, aria-allowed-role

Issue: Ensures role attribute has an appropriate value for the element (aria-allowed-role - https://dequeuniversity.com/rules/axe/4.4/aria-allowed-role?application=msftAI)

Target application: Hello - file:///C:/Users/elopezanaya/OneDrive%20-%20Microsoft/Desktop/A11y_test.html

Element path: #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window;#webchat__toaster__list__23950

Snippet:

How to fix:
Fix any of the following:
ARIA role region is not allowed for given element

Environment: Microsoft Edge version 106.0.1370.52

====

This accessibility issue was found using Accessibility Insights for Web 2.35.0 (axe-core 4.4.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

---

Title: WCAG 1.3.1: Ensures elements with an ARIA role that require child roles contain them (.webchat--css-emppx-1l95nvm)
Tags: Accessibility, WCAG 1.3.1, aria-required-children

Issue: Ensures elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)

Target application: Hello - file:///C:/Users/elopezanaya/OneDrive%20-%20Microsoft/Desktop/A11y_test.html

Element path: #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window;.webchat--css-emppx-1l95nvm

Snippet:

How to fix:
Fix any of the following:
Required ARIA child role not present: article

Environment: Microsoft Edge version 106.0.1370.52

====

This accessibility issue was found using Accessibility Insights for Web 2.35.0 (axe-core 4.4.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Do you see any errors in console log?

no

How to reproduce the issue?

1.- load next script into a html
<script src="https://elastorageredmond.blob.core.windows.net/elopez-dev/test/scripts/LiveChatBootstrapper.js" id="Microsoft_Omnichannel_LCWidget" data-org-id="ed5ece4e-719e-4765-a060-2c30b44ebadd" data-app-id="211aef35-cb50-48a2-9df2-689b26e41aa1" data-org-url="https://unqed5ece4e719e4765a0602c30b44eb-crm.oc.crmlivetie.com" data-lcw-version="test"> </script>

2.- in your browser , run the "Accessibility Inisights for web" tool
3.- in the ad-hoc tool section, enable automated checks
4.- run the fast pass check

What is the expected and actual behavior?

Expected:

No errors reported related to the chat

Actual:

Errors reported in webchat elements

Adaptive Card JSON

No response

Additional context

No response