Brooklyne.finni/accessibility

[brooklynebkbk]

What does this PR do?

Updates Code Tab and Code Lang Tab links and content in an effort to make tab content more accessible

• adding aria-role and aria-label attributes to list of tabs
• adding aria-role and aria-controls attributes to clickable list items
• adding id value to tab content/panel - corresponding with the clickable list item's aria-controls value

Motivation

https://datadoghq.atlassian.net/browse/WEB-2432

https://docs-staging.datadoghq.com/brooklyne.finni/accessibility/

Changes to the layouts/shortcodes/tab.html, layouts/shortcodes/tabs.html, assets/scripts/components/codetabs.js files can be observed on any pages that use the tabs shortcode
ex: https://docs-staging.datadoghq.com/brooklyne.finni/accessibility/account_management/authn_mapping/?tab=example

and changes to the layouts/shortcodes/programming-lang.html and layouts/partials/code-lang-tabs.html can be observed on api pages with tabbed content
ex: https://docs-staging.datadoghq.com/brooklyne.finni/accessibility/api/latest/

Additional Notes

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls

---

Reviewer checklist

• Review the changed files.
• Review the URLs listed in the Preview section.
• Check images for PII
• Review any mentions of "Contact Datadog support" for internal support documentation.

[bgdeutsch]

confirming there are 0 a11y errors on the authn_mapping page now. tab functionality still looks good as well. 👍

[drichards-87]

Created DOCS-5057 for the Docs team review.

[drichards-87]

@brooklynebkbk Quick question. Is there anything in this PR that you'd like the Docs team to test?