ARIA roles used must conform to valid values

[snzmarco]

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. Feature requests can be raised on the Azure Feedback Forum.

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.