microsoft / microsoft/AdaptiveCards
[Adaptive Cards > Designer] While navigating to date picker, screen reader is announcing the Date label infomration multiple times.
Open
Nobody has claimed this yet.
A11yMissing_HCLReviewed
A11ySev3
A11yWCAG
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.6
Application Name
Adaptive Cards
Problem Description
Test Environment:
OS Build: Windows 11
Version: 23H2 (OS Build 26040.1000)
Browser: Edge dev.
URL: https://adaptivecards.io/designer/
Browser Version 123.0.2380.0 (Official build) dev (64-bit)
Screen Reader: NVDA
Repro Steps:
- Open the above URL on Edge Dev URL.
- Press tab key and navigate to the 'New Card' and press enter key to activate it.
- New Card dialog will be appeared.
- Press tab key and navigate to the Date picker control and observe the issue.
Actual Result:
NVDA is announcing the label name multiple times on date edit field. NVDA speech: Date date edit required Day Date spin button 29. Month Date spin button 01, Year Date spin button 2024.
Expected Result:
NVDA should not announce the label name multiple times on date edit field. NVDA should announce like Date current value is Monday 01, 29th 2024 grouping required Day spin button 29, Month spin button 01, Year spin button 2024.
Note:
Same issue is repro with Narrator.
User Impact:
The Users who depends on Screen Readers will be impacted if NVDA is announcing the label name multiple times on date edit field.
WCAG Reference:
https://www.w3.org/WAI/WCAG21/Techniques/html/H48.html
Have feedback to share on Bugs ? please tag bug as “A11yRCA” and add your feedback in the comment section
Screenshots
https://github.com/microsoft/AdaptiveCards/assets/95913748/ac232c68-4d61-4883-b82b-7d7314aac464
Card JSON
{
"schema": "http=//adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.5",
"body": [
{
"id": "",
"type": "Container",
"items": [
{
"id": "",
"spacing": "None",
"width": "stretch",
"type": "Container",
"bleed": true,
"verticalContentAlignment": "Center",
"rtl": false,
"backgroundImage": {
"url": "https://localhost:4321/node_modules/myhub-viva-library/dist/HeaderLine_77d65ccd075fa6644bc29b64bd426343.png"
}
},
{
"id": "",
"spacing": "None",
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"spacing": "None",
"verticalContentAlignment": "Center",
"width": "stretch",
"rtl": false,
"items": [
{
"id": "",
"spacing": "None",
"type": "TextBlock",
"style": "heading",
"wrap": true,
"text": ""
}
]
}
]
}
],
"verticalContentAlignment": "Center",
"rtl": false,
"headerType": "basic"
},
{
"id": "",
"type": "Container",
"items": [
{
"id": "step1ImageId",
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"verticalContentAlignment": "Center",
"rtl": false,
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"url": "https://localhost:4321/dist/IdentificationStep1_Light_4c5bd64b60d8413ef04f7321bcff04b1.svg",
"altText": "Create incident identification step 1 of 4 in progress. Details and reporting and review steps are pending.",
"height": "88px",
"width": "320px"
}
],
"width": "stretch"
}
]
},
{
"id": "",
"spacing": "None",
"type": "TextBlock",
"style": "default",
"wrap": true,
"text": "Tell us more about the incident",
"weight": "Bolder",
"size": "Medium",
"horizontalAlignment": "Left"
},
{
"id": "incidentIdentificationPlaceholderId",
"type": "Input.Text",
"isRequired": true,
"value": "",
"placeholder": "Enter a title for the injury or illness",
"maxLength": 150,
"label": "Provide a title",
"errorMessage": "Please enter a title for this incident/near miss."
},
{
"id": "",
"isVisible": false,
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"verticalContentAlignment": "Center",
"width": "stretch",
"rtl": false,
"items": [
{
"id": "incidentIdentificationStepTitleValiId",
"type": "TextBlock",
"style": "default",
"wrap": true,
"text": "Special characters are not allowed in this field.",
"weight": "Default",
"size": "Default",
"color": "Attention"
}
]
}
]
},
{
"id": "",
"type": "RichTextBlock",
"horizontalAlignment": "Left",
"inlines": [
{
"type": "TextRun",
"color": "Default",
"fontType": "Default",
"isHighlighted": false,
"strikedThrough": false,
"isSubtle": false,
"size": "Default",
"weight": "Default",
"text": "Location"
},
{
"type": "TextRun",
"color": "Attention",
"fontType": "Default",
"isHighlighted": false,
"strikedThrough": false,
"isSubtle": false,
"size": "Default",
"weight": "Default",
"text": " *"
}
]
},
{
"id": "locationFocusId",
"spacing": "Medium",
"type": "Container",
"items": [
{
"id": "",
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"spacing": "ExtraLarge",
"verticalContentAlignment": "Center",
"rtl": false,
"items": [
{
"id": "",
"type": "TextBlock",
"style": "default",
"wrap": true,
"text": "Select location",
"weight": "Default",
"size": "Small"
}
],
"width": "stretch"
},
{
"type": "Column",
"verticalContentAlignment": "Center",
"width": "auto",
"rtl": false,
"items": [
{
"id": "",
"width": "15px",
"type": "Image",
"height": "15px",
"horizontalAlignment": "Right",
"url": "https://localhost:4321/node_modules/myhub-viva-library/dist/Chevron-right_568d82caab07be9ae6d8e1bbef6bfdca.svg",
"altText": "Required to Select location"
}
]
}
]
}
],
"verticalContentAlignment": "Center",
"rtl": false,
"selectAction": {
"style": "positive",
"id": "Location_Id",
"title": "Required to Select location",
"tooltip": "Required to Select location",
"type": "Action.Submit",
"associatedInputs": "auto",
"data": {
"id": "Location_Id"
}
}
},
{
"id": "",
"isVisible": false,
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"verticalContentAlignment": "Center",
"width": "stretch",
"rtl": false,
"items": [
{
"id": "incidentIdentificationStepLocationValiId",
"type": "TextBlock",
"style": "default",
"wrap": true,
"text": "Please select a location where this incident/near miss occurred.",
"weight": "Default",
"size": "Default",
"color": "Attention"
}
]
}
]
},
{
"id": "",
"separator": true,
"spacing": "Medium",
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"verticalContentAlignment": "Center",
"rtl": false,
"items": [
{
"id": "Date_Id",
"type": "Input.Date",
"isRequired": true,
"value": "2024-02-05",
"max": "2024-02-05",
"placeholder": "date",
"label": "Date",
"errorMessage": "Please select the current date or date in the past."
}
],
"width": "stretch"
},
{
"type": "Column",
"verticalContentAlignment": "Center",
"rtl": false,
"items": [
{
"id": "Time_Id",
"type": "Input.Time",
"isRequired": true,
"value": "12:57",
"placeholder": "time",
"max": "12:57",
"label": "Time",
"errorMessage": "Please select the current time or time in the past."
}
],
"width": "stretch"
}
]
},
{
"id": "",
"isVisible": false,
"spacing": "Medium",
"width": "stretch",
"type": "Container",
"items": [
{
"id": "",
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"verticalContentAlignment": "Center",
"width": "stretch",
"rtl": false,
"items": [
{
"id": "",
"type": "TextBlock",
"style": "default",
"wrap": true,
"text": "Warning",
"color": "Dark",
"weight": "Bolder"
},
{
"id": "warningPromptCancelTextId",
"type": "TextBlock",
"style": "default",
"wrap": true,
"text": "Are you sure?",
"size": "Small",
"color": "Dark"
},
{
"id": "",
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"verticalContentAlignment": "Center",
"rtl": false,
"items": [
{
"id": "",
"type": "ActionSet",
"actions": [
{
"id": "incidentIdentificationWarningBack",
"title": "Back",
"tooltip": "Click here to stay on same step",
"type": "Action.Submit",
"associatedInputs": "none",
"data": {
"id": "incidentIdentificationWarningBack"
}
}
]
}
],
"width": "stretch"
},
{
"type": "Column",
"verticalContentAlignment": "Center",
"rtl": false,
"items": [
{
"id": "",
"type": "ActionSet",
"actions": [
{
"style": "positive",
"id": "incidentIdentificationWarningOk",
"title": "Confirm",
"tooltip": "Click here to cancel the request and navigate to home page",
"type": "Action.Submit",
"associatedInputs": "none",
"data": {
"id": "incidentIdentificationWarningOk"
}
}
]
}
],
"width": "stretch"
}
]
}
]
}
]
}
],
"verticalContentAlignment": "Center",
"rtl": false,
"style": "warning"
},
{
"id": "",
"spacing": "Large",
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"verticalContentAlignment": "Center",
"rtl": false,
"items": [
{
"id": "",
"type": "ActionSet",
"actions": [
{
"id": "incidentIdentificationCancelId",
"title": "Cancel",
"tooltip": "Click here to get the cancel confirmation alert",
"type": "Action.Submit",
"associatedInputs": "none",
"data": {
"id": "incidentIdentificationCancelId"
}
}
]
}
],
"width": "stretch"
},
{
"type": "Column",
"verticalContentAlignment": "Center",
"rtl": false,
"items": [
{
"id": "",
"type": "ActionSet",
"actions": [
{
"style": "positive",
"id": "incidentIdentificationNextId",
"title": "Next",
"tooltip": "Click here to navigate next step",
"type": "Action.Submit",
"associatedInputs": "auto",
"data": {
"id": "incidentIdentificationNextId"
}
}
]
}
],
"width": "stretch"
}
]
}
],
"verticalContentAlignment": "Center",
"rtl": false
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
}
Sample Code Language
No response
Sample Code
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue at https://adaptivecards.io/designer/ with Edge Dev and NVDA, then compare the Date picker announcements with Narrator. Trace the Adaptive Cards Designer behavior responsible for the repeated Date label. Done means the label is announced once while the required day, month, and year controls remain understandable.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- csharp
- Domain
- accessibility
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100