Skip to content

[Adaptive Cards - Designer] - Ensure every ARIA input field has an accessible name (.ms-popup) #9318

@Rishikesh6521

Description

@Rishikesh6521

Target Platforms

Other

SDK Version

1.6

Application Name

Adaptive Cards

Problem Description

Test Environment:
URL: https://adaptivecards.io/
OS Version: 25H2 (OS Build 26200.5761)
Browser Version: Version 145.0.3734.1 (Official build) dev (64-bit)
Tool: Accessibility insights for web, Developer Tool

Repro Steps:

  1. Open the above URL on the Edge Dev browser.
  2. Navigate to the 'Designer' control present on the header section of the page using tab key and activate using enter key.
  3. Navigate to the 'Select host app:' and 'Target version:' combo box field using tab key and activate using enter key.
  4. Press F12 key to open the developer tool and inspect the code or run the fast pass.
  5. Verify that, accessible name is defined for the list box which appears on after activating the 'Select host app:' and 'Target version:' combo box field on the page or not.

Actual Result:
Accessible name is not defined for the list box which appears on after activating the 'Select host app:' and 'Target version:' combo box field on the page.

Note:
There is no any user impact on navigating using screen reader for these both 'Select host app:' and 'Target version:' combo box field. Refer Attachment: NoImpact_ScreenReader

Expected Result:
Issue: Ensure every ARIA input field has an accessible name (aria-input-field-name - https://accessibilityinsights.io/info-examples/web/aria-input-field-name)
A proper, descriptive and relevant accessible name should be defined for the list box which appears on after activating the 'Select host app:' and 'Target version:' combo box field on the page.

Element path: .ms-popup

Snippet: div class="ms-ctrl ms-popup" role="listbox"

How to fix:
Fix any of the following:

  1. aria-label attribute does not exist or is empty
  2. aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
  3. Element has no title attribute

User Experience:
Visually impaired users who rely on screen reader will be impacted if accessible name is not defined for the list box which appears on after activating the 'Select host app:' and 'Target version:' combo box field on the page. Due to which users will not be able to get the purpose of the list box control and might get confused without knowing its purpose.

WCAG Reference:
https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html

Have feedback to share on Bugs ? please tag bug as “A11yRCA” and add your feedback in the comment section

Screenshots

Image

NoImpact_ScreenReader.mp4

Card JSON

NA

Sample Code Language

No response

Sample Code

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions