Skip to content

[Adaptive Cards - Designer] - Ensure elements with ARIA roles have all required ARIA attributes (.ms-ctrl-dropdown[role="combobox"][aria-haspopup="listbox"]) #9317

@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:' 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, ensure elements with ARIA roles having all required ARIA attributes or not.

Actual Result:
Ensure elements with ARIA roles not having all required ARIA attributes.

Note:
Same issue replicates for the 'Target version:' combo box control on the page.

Expected Result:
Ensure elements with ARIA roles have all required ARIA attributes (aria-required-attr - https://accessibilityinsights.io/info-examples/web/aria-required-attr)

Element path: .acd-toolbar-choicePicker:nth-child(3) > .ms-ctrl-dropdown[role="combobox"][aria-haspopup="listbox"]

Snippet: div tabindex="0" class="ms-ctrl ms-ctrl-dropdown" aria-labelledby="6e964434-5ed9-4dad-adad-536057b036ff 3101f8ff-491c-4653-b5e0-d8a8ab09c810" role="combobox" aria-haspopup="listbox" aria-expanded="true"

How to fix:
Fix any of the following:

Required ARIA attribute not present: aria-controls

User Experience:
When an element with an ARIA role requires specific child roles but they are missing, it can lead to accessibility issues for users who rely on assistive technologies (AT) like screen readers. The screen reader may not announce the element correctly, leading to confusion about its purpose. Users may miss interactive child elements because the parent role does not expose them properly.

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

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