microsoft / microsoft/AdaptiveCards

[Adaptive Cards -Text Block] : 'Try It Yourself' link appear as Button when high contrast is enabled in 'Text Block' screen.

Open
#8,543 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

A11yMissing_HCLReviewed A11yRT A11yUsable AdaptiveCards_Web Area-Accessibility Area-Renderers Bug HCL-AdaptiveCards-Web HCL-E+D MissingReviewedDeprecated Product-AC
Dominant language
C#
Stars
2k
Forks
595
Avg merge
1d 19h
Merged PRs (30d)
1

Description

Target Platforms

Other

SDK Version

1.5

Application Name

Adaptive Cards

Problem Description

Test Environment:
OS Version: 23H2 (OS Build 25381.1)
URL: https://adaptivecards.io/explorer/TextBlock.html
Browser: Edge Dev Version 115.0.1880.3 (Official build) dev (64-bit)

Pre-Requisite:
Settings -> Accessibility -> Contrast themes ->Aquatic and Dessert modes. (High contrast Black/White mode).

Repro Steps:

  1. Open the above URL in the edge dev browser.
  2. Navigate to 'Text Block' under Card Elements and press enter key to activate it.
  3. Navigate to the Try It Yourself link under example and observe the issue.

Actual Result:
'Try It Yourself' link appear as Button when high contrast is enabled in 'Text Block' screen.

Expected Result:
Correct role should be defined for the 'Community Call - October 2022' element and it should be link.

Note:
This issue is repro throughout the application for 'Try it Yourself' link.

User Impact:
When button controls appear as Button in high contrast modes, users who rely on that feature are blocked from information and functionality of the full user experience within the site/app.

“Have feedback to share on Bugs? Please help fill Trusted Tester Bug Feedback (office.com)

Screenshots

WCAG4 3 1-'Try It Yourself' link appear as Button when high contrast is enabled in 'Text Block' screens

WCAG4 3 1-'Try It Yourself' link appear as Button when high contrast is enabled in 'Text Block' screen

image

Card JSON
NA
Sample Code Language

No response

Sample Code

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Open https://adaptivecards.io/explorer/TextBlock.html in Edge with a high-contrast theme enabled and reproduce the issue by navigating to the Text Block example. Inspect the implementation behind the Text Block explorer and verify that “Try It Yourself” exposes a link role rather than a button role, then retest the affected examples.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
accessibility, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.