[Accessibility] [Omnichannel] Omnichannel Chat Widget has an incorrect use of ariaroledescription

[elopezanaya]

https://unify.services.dynamics.com/CRM/Org/69910a2a-c571-417f-be95-816e553720d2/Incident/ServiceDesk/2201200050000888/Home

Scope:

FROM ICYM -> https://portal.microsofticm.com/imp/v3/incidents/details/286723576/home

============
This shall be considered resolved once we determine how to properly implement the aria-roledescription within the Omnichannel Chat Widget

Customer Experience:

This is the customer's statement: Omnichannel Chat Widget has an incorrect use of ariaroledescription="message", it needs to be accompanied by an explicitky stated role as it is not used within an implicit html element type such as img.

Repro Steps:

N/A

Expected Results:

To determine the correct use of ariaroledescription in Omnichannel Chat Widget.

Actual Results:

Omnichannel Chat Widget has an incorrect use of ariaroledescription="message", it needs to be accompanied by a role as it is not used within an implicit html element

Telemetry Information:

Both me and the customers have found the following resource: https://dequeuniversity.com/rules/axe/4.0/aria-roledescription

However, we are unsure of the exact role required for this to work as expected.

Image

We have to adhere to the highest standards of accessability for our govenment content which include using aria tags correctly and according to the w3c standards. "Ariaroledescription" needs to be used in conjunction with "role" where the role is not implicit, for instance, if I had an img element I would not have to give the element a role because it implicitly has a role of image, to use ariaroledescription

https://unify.services.dynamics.com/CRM/Org/69910a2a-c571-417f-be95-816e553720d2/Incident/ServiceDesk/2201200050000888/Home

Scope:

FROM ICYM -> https://portal.microsofticm.com/imp/v3/incidents/details/286723576/home

============
This shall be considered resolved once we determine how to properly implement the aria-roledescription within the Omnichannel Chat Widget

Customer Experience:

This is the customer's statement: Omnichannel Chat Widget has an incorrect use of ariaroledescription="message", it needs to be accompanied by an explicitky stated role as it is not used within an implicit html element type such as img.

Repro Steps:

N/A

Expected Results:

To determine the correct use of ariaroledescription in Omnichannel Chat Widget.

Actual Results:

Omnichannel Chat Widget has an incorrect use of ariaroledescription="message", it needs to be accompanied by a role as it is not used within an implicit html element

Telemetry Information:

Both me and the customers have found the following resource: https://dequeuniversity.com/rules/axe/4.0/aria-roledescription

However, we are unsure of the exact role required for this to work as expected.

Image

We have to adhere to the highest standards of accessability for our govenment content which include using aria tags correctly and according to the w3c standards. "Ariaroledescription" needs to be used in conjunction with "role" where the role is not implicit, for instance, if I had an img element I would not have to give the element a role because it implicitly has a role of image, to use ariaroledescription

Please view our Technical Support Guide before filing a new issue.

Screenshots

Version

To determine what version of Web Chat you are running, open your browser's development tools, and paste the following line of code into the console.

[].map.call(document.head.querySelectorAll('meta[name^="botframework-"]'), function (meta) { return meta.outerHTML; }).join('\n')

If you are using Web Chat outside of a browser, please specify your hosting environment. For example, React Native on iOS, Cordova on Android, SharePoint, PowerApps, etc.

Describe the bug

Steps to reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

Additional context

[Bug]

[compulim]

I am looking at 4.14.1.

We have 5 type of DOM nodes using aria-roledescription attribute (through running document.querySelectorAll('[aria-roledescription]') in the console):

1. <section aria-live="polite" aria-roledescription="transcript" role="log"> (This is live region chat history, not visible/navigable)
2. <ul aria-roledescription="transcript" role="list"> (This is main chat history, visible/navigable)
3. <article aria-roledescription="message" role="region"> (Container of every activity)
4. <div aria-roledescription="activity" role="group"> (Container for every activity)
5. <div aria-roledescription="message" role="group"> (Container for every activity)

I am unaware of which type of DOM nodes is violating the rule. Both role="group" and role="region" are allowed to have aria-roledescription set.

Could you give us more details for this issue?

On the other hand, we have recently reworked part of our DOM tree to improve accessibility (#4108). However, as we don't know the root cause, it may or may not have resolved the issue.

[elopezanaya]

Hi @compulim , from the customer ->

`This is a html element called a div (division) as far as a screen reader is concerned, it doen’t have a role in the same way as an image would (ie ), with an image, it has an implied role of image, a div dosent have this, when using aria-roledescription without a stated role=”whatever” it dosent know what role it is describing.

This link really does tell you everything you need to know about the problem we are facing :- https://dequeuniversity.com/rules/axe/4.0/aria-roledescription`

[compulim]

On my side, this is 4.14.1 and the DOM tree look significantly different.

Can you verify the version of Web Chat used?

In the HTML <head>, there should be a <meta> tag indicating the version of Web Chat loaded.

[compulim]

Me and @elopezanaya discussed offline and this is repro only on 4.9.x, and no longer repro on 4.14.1.