microsoft / microsoft/AdaptiveCards
{Linked:Bug2061724}[Adaptive Card- Designer] - Ensure an element's role supports its ARIA attributes (#\33 0ae_chevronUp)
Open
Nobody has claimed this yet.
A11yAuto
A11yMissing_HCLReviewed
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 Card
Problem Description
Test Environment:
OS Build: Windows 11
Version: 24H2(OS Build25276.3281)
Browser: Edge-dev
URL: https://adaptivecards.io/designer/
Browser Version: Edge Dev 136.0.3193.0
Tool: Accessibility Insight For Web
Pre-Reqisite:
Paste the Json on the 'Card payload Editor' section.
Repro Steps:
- Open the above URL on the EDGE Dev.
- Press tab key and navigate Preview button and press enter key to activate it.
- Now run the tool and observe the issue.
Actual Result:
Element's role does not supports its ARIA attributes (#\33 0ae_chevronUp).
Expected Result:
Ensure an element's role supports its ARIA attributes (#\33 0ae_chevronUp).
Element path:
#\33 0ae_chevronUp
Snippet:
How to fix:
Fix all of the following:
ARIA attribute is not allowed: aria-expanded="true"
User Impact:
If an element's assigned role does not support its ARIA attributes, screen readers may ignore the attributes or convey incorrect information.
Users relying on assistive technology might receive incomplete or misleading feedback about the element's purpose or state.
WCAG Reference:
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value
Have feedback to share on Bugs ? please tag bug as “A11yRCA” and add your feedback in the comment section
Screenshots
Card JSON
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.3",
"body": [
{
"type": "Container",
"spacing": "None",
"items": [
{
"id": "generativeText",
"type": "TextBlock",
"wrap": true,
"text": "For managing high fever, over-the-counter medications such as acetaminophen and ibuprofen are commonly used. Acetaminophen is effective in reducing fever and is generally well-tolerated. Ibuprofen, a nonsteroidal anti-inflammatory drug (NSAID), also helps lower fever and relieve pain. It's important to follow dosing instructions carefully and consider any contraindications or potential interactions with other medications."
}
]
},
{
"type": "TextBlock",
"wrap": true,
"separator": true,
"size": "Small",
"weight": "Lighter",
"isSubtle": true,
"text": "Source: [MedlinePlus](https://medlineplus.gov/) - The U.S. National Library of Medicine"
},
{
"type": "TextBlock",
"wrap": true,
"weight": "Lighter",
"isSubtle": true,
"size": "Small",
"separator": true,
"text": "This message is generated by AI and is not intended to provide or replace professional medical advice. It is grounded on information from The U.S. National Library of Medicine. Please make sure the output is accurate and appropriate before relying on this response."
},
{
"type": "ColumnSet",
"id": "30ae",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://hbsstglobalprod.z13.web.core.windows.net/public/1.png",
"altText": "The number 1",
"width": "20px",
"height": "20px"
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Left",
"color": "Accent",
"text": "Fever - MedlinePlus",
"wrap": true
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"id": "30ae_chevronDown",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://hbsstglobalprod.z13.web.core.windows.net/public/ChevronDown.png",
"altText": "Expand",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"30ae_chevronDown",
"30ae_chevronUp",
"30ae_content"
]
},
"horizontalAlignment": "Center",
"width": "25px",
"height": "25px"
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"id": "30ae_chevronUp",
"isVisible": false,
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://hbsstglobalprod.z13.web.core.windows.net/public/ChevronUp.png",
"altText": "Collapse",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"30ae_chevronDown",
"30ae_chevronUp",
"30ae_content"
]
},
"horizontalAlignment": "Center",
"width": "25px",
"height": "25px"
}
],
"verticalContentAlignment": "Center"
}
],
"separator": true
},
{
"type": "Container",
"id": "30ae_content",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "If the fever is very high, your health care provider may recommend taking an over-the-counter medicine such as acetaminophen or ibuprofen. Adults can also take aspirin, but children with fevers should not take aspirin.",
"wrap": true
},
{
"type": "TextBlock",
"horizontalAlignment": "left",
"color": "accent",
"text": "[ - Fever - MedlinePlus - full article](https://medlineplus.gov/fever.html)",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"id": "255e",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://hbsstglobalprod.z13.web.core.windows.net/public/2.png",
"altText": "The number 2",
"width": "20px",
"height": "20px"
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Left",
"color": "Accent",
"text": "Cold and Cough Medicines - MedlinePlus",
"wrap": true
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"id": "255e_chevronDown",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://hbsstglobalprod.z13.web.core.windows.net/public/ChevronDown.png",
"altText": "Expand",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"255e_chevronDown",
"255e_chevronUp",
"255e_content"
]
},
"horizontalAlignment": "Center",
"width": "25px",
"height": "25px"
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"id": "255e_chevronUp",
"isVisible": false,
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://hbsstglobalprod.z13.web.core.windows.net/public/ChevronUp.png",
"altText": "Collapse",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"255e_chevronDown",
"255e_chevronUp",
"255e_content"
]
},
"horizontalAlignment": "Center",
"width": "25px",
"height": "25px"
}
],
"verticalContentAlignment": "Center"
}
],
"separator": true
},
{
"type": "Container",
"id": "255e_content",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Cold and cough medicines can help relieve symptoms of a common cold. The symptoms of a cold can include a sore throat, stuffy or runny nose, sneezing, and coughing. You don't usually need to treat a cold or the cough that it causes. You can't cure a cold, and antibiotics won't help you get better.",
"wrap": true
},
{
"type": "TextBlock",
"horizontalAlignment": "left",
"color": "accent",
"text": "[ - Cold and Cough Medicines - MedlinePlus - full article](https://medlineplus.gov/coldandcoughmedicines.html)",
"wrap": true
}
]
}
]
},
{
"type": "ColumnSet",
"id": "5f53",
"columns": [
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://hbsstglobalprod.z13.web.core.windows.net/public/3.png",
"altText": "The number 3",
"width": "20px",
"height": "20px"
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Left",
"color": "Accent",
"text": "Ibuprofen: MedlinePlus Drug Information",
"wrap": true
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"id": "5f53_chevronDown",
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://hbsstglobalprod.z13.web.core.windows.net/public/ChevronDown.png",
"altText": "Expand",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"5f53_chevronDown",
"5f53_chevronUp",
"5f53_content"
]
},
"horizontalAlignment": "Center",
"width": "25px",
"height": "25px"
}
],
"verticalContentAlignment": "Center"
},
{
"type": "Column",
"id": "5f53_chevronUp",
"isVisible": false,
"width": "auto",
"items": [
{
"type": "Image",
"url": "https://hbsstglobalprod.z13.web.core.windows.net/public/ChevronUp.png",
"altText": "Collapse",
"selectAction": {
"type": "Action.ToggleVisibility",
"targetElements": [
"5f53_chevronDown",
"5f53_chevronUp",
"5f53_content"
]
},
"horizontalAlignment": "Center",
"width": "25px",
"height": "25px"
}
],
"verticalContentAlignment": "Center"
}
],
"separator": true
},
{
"type": "Container",
"id": "5f53_content",
"isVisible": false,
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Nonprescription ibuprofen is used to reduce fever and to relieve minor aches and pain from headaches, muscle aches, arthritis, menstrual periods, the common cold, toothaches, and backaches. Ibuprofen is in a class of medications called NSAIDs.",
"wrap": true
},
{
"type": "TextBlock",
"horizontalAlignment": "left",
"color": "accent",
"text": "[ - Ibuprofen: MedlinePlus Drug Information - full article](https://medlineplus.gov/druginfo/meds/a682159.html)",
"wrap": true
}
]
}
]
}
]
}
Sample Code Language
No response
Sample Code
Originally tracking with below URL.
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 at https://adaptivecards.io/designer/ and reproduce the issue with the provided Card JSON in the Card payload Editor. Inspect the rendered element with id 30ae_chevronUp and its accessibility semantics using Accessibility Insights for Web. Done means the expanded-state control uses ARIA attributes supported by its role and the accessibility violation is no longer reported.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100