microsoft / microsoft/AdaptiveCards

{Freeway-Bug}[Adaptive cards-Sample tab -Inputs with validation]: At reflow settings, the checkbox label is not fully visible on the Inputs with Validation page.

Open
#9,159 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Target Platforms

Other

SDK Version

1.6

Application Name

Adaptive Cards

Problem Description

Test environment:
OS: Win11
OS Version: 23H2 (OS Build 22631.5189)
URL: https://adaptivecards.io/
Edge dev Browser version: 137.0.3255.0 (Official build) dev (64-bit)
Screen reader: Narrator.

Pre requisites:
100% DPI Scaling, set the browser to 200% and bring viewport to 320px

Repro Steps:
1.Open URL in the Edge dev browser & sign in with valid credentials
2.Activate the samples tab
3. Activate the Inputs with validation and observe the issue.

Actual Result:
At reflow settings, label of checkbox (long text) like I accept the terms … is not fully visible in the Inputs with validation page.

Expected Result:
At reflow settings, label of checkbox (long text) like I accept the terms should fully visible in the Inputs with validation page.

User Experience:
Low vision users depends on the zoom levels will be impacted and may find it difficult to keep track of their place while reading, if the content of the check boxes are not visible at 400% zoom.

MAS Reference:
MAS 1.4.10 – Reflow

Screenshots

Link

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

Start at the Adaptive Cards samples tab on adaptivecards.io and reproduce the issue at 200% browser zoom with a 320px viewport, using the Inputs with validation sample. Trace the checkbox label rendering and verify that the full label remains visible at the reported reflow settings without introducing horizontal loss or clipping.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.