{Linked:Bug2061724}[Adaptive Card- Designer] - Ensure an element's role supports its ARIA attributes (#\33 0ae_chevronUp) #9150
Labels
A11yAuto
For the AI Tool bug
A11ySev3
Accessibility issue with severity 3
A11yWCAG
Accessibility issue that affects compliance
AdaptiveCards_Web
a11y tag
Area-Accessibility
Bugs around feature accessibility
Area-Renderers
Bug
HCL-AdaptiveCards-Web
Used by accessibility team for scorecard categorization
HCL-E+D
Comments
vagpt
added
A11yAuto
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
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.
https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdev.azure.com%2Fmsazuredev%2FHealthcare%2F_workitems%2Fedit%2F2061724&data=05%7C02%7Cv-vaibgu%40microsoft.com%7C0fd610e9c2824752603708dd727abd79%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C638792593694161853%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=1ygPSfk1ri84oO4FacFDO0UOnX4sTP3Cse13eVEmACM%3D&reserved=0
The text was updated successfully, but these errors were encountered: