[Programmatic Access - Bot Framework Web Chat - Card Restaurant]: Date control does not have a label under the 'Card Restaurant' section.

[KattaBhargav]

Is it an issue related to Adaptive Cards?

No.

What is the PWD impact?

User Experience:

Aria-label attribute or title attribute is used to make details about the control accessible to screen readers. If aria-label or title is not defined descriptively for the controls, then visually impaired users who depend on screen readers will get disoriented and will face difficulty in understanding the control.

Note:

User credentials should NOT be included in the bug.

What browsers and screen readers do this issue affect?

Windows: Edge with Windows Narrator

Are there any code-based customization done to Web Chat?

No, I am using Web Chat without any customizations except "styleOptions".

What version of Web Chat are you using?

Latest production

Which area does this issue affect?

Others or unrelated

What is the public URL for the website?

https://compulim.github.io/webchat-loader/

How to reproduce the issue?

1. Open URL: https://compulim.github.io/webchat-loader/ and sign in using valid credentials.
2. Navigate to web chat page and select 4.18.1-main.20240927.ea7a875 (30/9/2024) version and then select mockBot link under present label and then select open web chat in new window link at bottom.
3. Navigate to white label experience chat page and type Card Restaurant word in type your message text box.
4. Navigate to the results.
5. Turn on AI and verify the issue.

What do you expect?

Date control should have a label under the 'Card Restaurant' section.

What actually happened?

Date control does not have a label under the 'Card Restaurant' section.
Observation: Screen reader (Narrator, NVDA and JAWS) is announcing as 'day spin button 0 min 1 max 31'.

Do you have any screenshots or recordings to repro the issue?

https://github.com/user-attachments/assets/74da6272-2480-4a3b-8fd2-7364319f54aa

Did you find any DOM elements that might have caused the issue?

Issue:

Ensures every form element has a label (label - https://accessibilityinsights.io/info-examples/web/label)

Target application:

Web Chat - https://compulim.github.io/webchat-loader/webchat.html?v=4.18.1-main.20240927.ea7a875&p=ws&sr=westus&uid=r_bqr9vf6r6t&cid=B3cRDtaEkLkIMeSle0wp0C-us&dt=eyJhbGciOiJSUzI1NiIsImtpZCI6Ik5MZjUwanFheTN1R0VpQUpOV29EWmZzRnE4QSIsIng1dCI6Ik5MZjUwanFheTN1R0VpQUpOV29EWmZzRnE4QSIsInR5cCI6IkpXVCJ9.eyJib3QiOiJoYXdvLW1vY2tib3Q0LW1vY2stYm90LWJvdCIsInNpdGUiOiJwRVp0UExiaTd5TSIsImNvbnYiOiJCM2NSRHRhRWtMa0lNZVNsZTB3cDBDLXVzIiwibmJmIjoxNzMxMDM4MDM5LCJleHAiOjE3MzEwNDE2MzksImlzcyI6Imh0dHBzOi8vZGlyZWN0bGluZS5ib3RmcmFtZXdvcmsuY29tLyIsImF1ZCI6Imh0dHBzOi8vZGlyZWN0bGluZS5ib3RmcmFtZXdvcmsuY29tLyJ9.NssL0LSIvNEL_hN8TgpY9jj3Me1e8noaCyVy4sJkoCgxnheawvBKi2eMoNCFnS8OlUhbxk-WNlbb6woYPvU7JY4DYalHXflg-wACe94SHJO2Q90L5rbANU4b6S0qp6MOtWSS6UX7pPPJ90bMzr6TPka6YVb1ES-aEcegyXdJkeUpo6_BRSkYzOy5vrKXvSryWuyJeXTMzvUcNdrNaH7iZG4BVyVLcGExJH744siJkxfRxfVZFZahRZYJ8hIqP9VNrZJJ2BmcRPlvzQg58m7Jzpz6rIlRg5VWCMUABtmPnxaYp_LSuHR_X8SMkNy3kYP9cBNoyv-WL2iM6mnDI7p1bw&st=aad%23%2Fsubscriptions%2F51fbc48d-04f1-449a-b50c-b40618411b9f%2FresourceGroups%2Fhawo-mockbot4-rg%2Fproviders%2FMicrosoft.CognitiveServices%2Faccounts%2Fhawo-mockbot4-speech%23eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6IjNQYUs0RWZ5Qk5RdTNDdGpZc2EzWW1oUTVFMCIsImtpZCI6IjNQYUs0RWZ5Qk5RdTNDdGpZc2EzWW1oUTVFMCJ9.eyJhdWQiOiJodHRwczovL2NvZ25pdGl2ZXNlcnZpY2VzLmF6dXJlLmNvbSIsImlzcyI6Imh0dHBzOi8vc3RzLndpbmRvd3MubmV0LzcyZjk4OGJmLTg2ZjEtNDFhZi05MWFiLTJkN2NkMDExZGI0Ny8iLCJpYXQiOjE3MzA5NTM0MjksIm5iZiI6MTczMDk1MzQyOSwiZXhwIjoxNzMxMDQwMTI5LCJhaW8iOiJrMkJnWUNpY3Mzdk80M1huQThMME9UNVVYM0FMQXdBPSIsImFwcGlkIjoiOTE4NGU1OTQtZWIwMi00YmU2LWExMTAtOWIyM2M3MTNlMmRmIiwiYXBwaWRhY3IiOiIyIiwiaWRwIjoiaHR0cHM6Ly9zdHMud2luZG93cy5uZXQvNzJmOTg4YmYtODZmMS00MWFmLTkxYWItMmQ3Y2QwMTFkYjQ3LyIsImlkdHlwIjoiYXBwIiwib2lkIjoiYmZjMzNkMGEtMjBiYS00YTE5LWI4ZTEtYWYxN2JmNDIxYWM5IiwicmgiOiIxLkFCb0F2NGo1Y3ZHR3IwR1JxeTE4MEJIYlI1QWlNWDNJS0R4SG9PMk9VM1NiYlcwYUFBQWFBQS4iLCJzdWIiOiJiZmMzM2QwYS0yMGJhLTRhMTktYjhlMS1hZjE3YmY0MjFhYzkiLCJ0aWQiOiI3MmY5ODhiZi04NmYxLTQxYWYtOTFhYi0yZDdjZDAxMWRiNDciLCJ1dGkiOiJLWUd3dnJocW1FNlVibTVuY3NOc0FRIiwidmVyIjoiMS4wIiwieG1zX2F6X3JpZCI6Ii9zdWJzY3JpcHRpb25zLzUxZmJjNDhkLTA0ZjEtNDQ5YS1iNTBjLWI0MDYxODQxMWI5Zi9yZXNvdXJjZWdyb3Vwcy9oYXdvLW1vY2tib3Q0LXJnL3Byb3ZpZGVycy9NaWNyb3NvZnQuQXBwL2NvbnRhaW5lckFwcHMvaGF3by1tb2NrYm90NC10b2tlbi1hcHAiLCJ4bXNfaWRyZWwiOiIxOCA3IiwieG1zX21pcmlkIjoiL3N1YnNjcmlwdGlvbnMvNTFmYmM0OGQtMDRmMS00NDlhLWI1MGMtYjQwNjE4NDExYjlmL3Jlc291cmNlZ3JvdXBzL2hhd28tbW9ja2JvdDQtcmcvcHJvdmlkZXJzL01pY3Jvc29mdC5NYW5hZ2VkSWRlbnRpdHkvdXNlckFzc2lnbmVkSWRlbnRpdGllcy9oYXdvLW1vY2tib3Q0LXNwZWVjaC1pZGVudGl0eSJ9.gph5qA5AMrifiu_WElsTDrS19wmGlo1yY36MAUabqd-WuAYl2wWwndHpA6CvEKfHCoaD6k5FcquqzccAGjf4eCFzJY5tkeXNVj6hi65hCkk-QokPCa_HM6xnKyFfVDk9vkAms_GDbmuVwCkvOlvSbJhl_HAJZDvOCwzOYcyuuonFS8BTPBiBE07HocFKw7PgzzufqI8jY0mAy7HKVEZoKrrCSp02ytOeqOOdcPC58Fz_f-uVw8HgAYMPXv22Rk2-sebsFXhcFwxIRtFMsrTjN4brD5PYhSzp0RcIEvm0QzitpQb8LWiLzcGmY9av-tjrd8aRKn4GuDARfBJiwDpeIQ

Element path:

#__ac-e2de7b30-29f1-4f71-8370-4640d2aef458

Snippet:

input type="date" tabindex="0" class="ac-input ac-dateInput" id="__ac-e2de7b30-29f1-4f71-8370-4640d2aef458" style="width: 100%; min-width: 0px;"

How to fix:

Fix any of the following:
Form element does not have an implicit (wrapped)
Form element does not have an explicit
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute
Element has no placeholder attribute
Element's default semantics were not overridden with role="none" or role="presentation"

MAS reference

MAS 4.1.2 – Name, Role, Value

WCAG reference

No response

WAI-ARIA reference

No response

Adaptive Card JSON

No response

Additional context

Note:

• Same issue repro for 'Card Richmessage' results
• Same type of issue reproes throughout the application.

[KattaBhargav]

#A11yAuto;#A11yMAS;#A11ySev2;#HCL;#Accessibility;#Benchmark;#BotFrameworkWebChat-Oct24;#K4W;#MAS4.1.2;#Win11-Edge(Chromium);