microsoft / BotFramework-WebChat

A highly-customizable web-based client for Azure Bot Services.
https://www.botframework.com/
MIT License
1.6k stars 1.54k forks source link

Accessibility: A11y_Live Chat Widget_Let's Chat-Chat Window_AI4W: Ensures all ARIA attributes have valid values (#webchat__toaster__list__ttqz6) #3051

Closed compulim closed 4 years ago

compulim commented 4 years ago

Copied from #1750232.

1750232_A11y_Live Chat Widget_Let's Chat-Chat Window_AI4W

“Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier.”

Environment Details:

Application Name: Live Chat Widget

URL:https://xxx.blob.core.windows.net/portals/democ2suggestedaction.htmll

Browser Versions: Microsoft Edge Version 80.0.361.54 (Official build) (64-bit)

Windows Version: Windows10

Chrome Version: Version 80.0.3987.132 (Official Build) (64-bit)

Repro Steps: ​​

1)Launch the application url : https://xxx.blob.core.windows.net/portals/democ2suggestedaction.html

2)Let's Chat icon Button get open and Click on it.3)"Chat Form" screen get open.

4)Fill all the mandatory detail and then Click on "Submit" Button

5)now "Chat Window" get open.

6)Run AI4W and check the issue.

Issue: Ensures all ARIA attributes have valid values (aria-valid-attr-value - https://dequeuniversity.com/rules/axe/3.5/aria-valid-attr-value?application=msftAI)

Target application: Test Page For Suggested Actions - https://xxx.blob.core.windows.net/portals/democ2suggestedaction.html

Element path: #Microsoft_Omnichannel_LCWidget_Chat_Iframe_Window;#webchattoasterlist__ttqz6

Snippet:

How to fix:

Fix all of the following:

Invalid ARIA attribute value: aria-labelledby="webchattoasterheader__ps0ge"

Environment: Chrome version 80.0.3987.149

====

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

Recommendations:

Refer below link which is repository of bug fixes code snippets:

https://microsoft.sharepoint.com/teams/msenable/mas/pages/browse-fixes.aspx

MAS Reference:

MAS 4.1.1:Parsing

https://microsoft.sharepoint.com/:w:/r/teams/msenable/_layouts/15/WopiFrame.aspx?sourcedoc={2e2a1540-aaf7-48a0-a53e-8f10cf309999}

MAS 4.1.2:

https://microsoft.sharepoint.com/:w:/r/teams/msenable/_layouts/15/WopiFrame.aspx?sourcedoc={248054a6-5e68-4771-9e1e-242fb5025730}

compulim commented 4 years ago

This is dupe of #3054.