Azure / Azure/api-management-developer-portal
ARIA roles used must conform to valid values
- Dominant language
- TypeScript
- Stars
- 545
- Forks
- 360
- PR merge metrics
- No merged PRs in 30d
Description
> [!IMPORTANT]
> **PLEASE DO NOT CREATE ISSUES RELATED TO MANAGED DEVELOPER PORTAL IN THIS REPOSITORY**. Issues related to "Managed developer portal" will be closed automatically. Managed developer portal issues should be created directly in Azure Support + Troubleshooting in Azure portal. Contact Azure support (or) submit a post [on Stack Overflow](http://aka.ms/apimso). Feature requests can be raised [on the Azure Feedback Forum](https://aka.ms/apimwish).
Every self-hosted developer bug report should have precise description and reproduction steps; console traces (or) source code references are appreciated.
## Bug description
### [Accessibility] ARIA roles used must conform to valid values
Ensure all elements with a role attribute use a valid value. In this case , the HTML attribute `role="aside"` is incorrect according to Web Content Accessibility Guidelines (WCAG) 2.1. Using the Axe DevTools extension we can see in the example screenshot that the HTML code failed the checks.
**Reference**:
- https://dequeuniversity.com/rules/axe/4.11/aria-roles?application=AxeChrome
- https://www.w3.org/TR/html-aria/#docconformance
## Reproduction steps
1. Create a new API Management Service
2. Wait for it to finish its deployment
3. Go to Developer Portal and make sure you can see the default website
4. Click Publish site
5. Open the published site's URL in your browser.
6. From your browser, install the Axe DevTools extension. If you are using Google Chrome, this is the direct link to the extension, https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd
7. Once the extension is install, activate it using Dev tools.
8. Click Scan full page button and wait for the results.
9. It should show a similar results as shown in the screenshot above.
## Expected behavior
Using Axe DevTools, we can scan the page and it should pass common accessibility checks.
Based on my initial investigation, the HTML attribute value for the role should be changed from `aside` to either `complementary` or `contentinfo`.
The affected source code or template is probably related to the following files for the fix:
- https://github.com/Azure/api-management-developer-portal/blob/master/src/libraries/block-snippets.json
- https://github.com/Azure/api-management-developer-portal/blob/master/src/libraries/grid-snippets.json
## Is self-hosted portal?
Yes and No
Since this is related to how HTML is generated from pre-defined templates, then this affects both hosted and self-hosted portal.
## Release tag or commit SHA (if using self-hosted version)
This is based on the latest master branch so most likely an existing issue that was never seen before or checked against accessibility tools.
## API Management service name
This is default Portal created and deployed without any custom change, basically out-of-the-box product.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by inspecting the role values in src/libraries/block-snippets.json and src/libraries/grid-snippets.json, then identify where the affected templates generate role="aside". Use the published Developer Portal and Axe DevTools to confirm the invalid-role finding. Done means the generated HTML uses a valid ARIA role and the accessibility scan no longer reports this issue.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100