Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Adaptive Cards TextBlock element missing aria-level #4329

Merged
merged 2 commits into from
Jun 28, 2022

Conversation

compulim
Copy link
Contributor

@compulim compulim commented Jun 25, 2022

Fixes #4327.

Changelog Entry

Fixed

  • Fixes #4327. In Adaptive Cards, TextBlock with style="heading" should have aria-level set, by @compulim, in PR #4329

Description

By default, Adaptive Cards generate DOM with role="heading" without aria-level set. This violated WCAG 4.1.2 (ARIA5).

In order to set aria-level, we need to explicitly set ACHostConfig.textBlock.headingLevel to 1. This is an undocumented option introduced by microsoft/AdaptiveCards#5635 and microsoft/AdaptiveCards#5698.

Design

This is code in Adaptive Cards repo card-elements.ts.

image

If the Adaptive Card TextBlock element has style="heading", the role="heading" will be applied. However, aria-level is not set unless ACHostConfig.textBlock.headingLevel is set. This is an undocumented option and required for accessibility. Otherwise, we would fail with WCAG 4.1.2 (ARIA5).

We need to explicitly set ACHostConfig.textBlock.headingLevel to make sure aria-level is set on role="heading". As we do not use heading, we default it to level 1.

Specific Changes

  • Update adaptiveCardHostConfig.ts to add textBlock.headingLevel to 1
  • Update verifyDOMIntegrity.js for verifying our DOM tree is good
  • Add verifyDOMIntegrity() call to all card-related attachments
  • I have added tests and executed them locally
  • I have updated CHANGELOG.md
  • I have updated documentation

Review Checklist

This section is for contributors to review your work.

  • Accessibility reviewed (tab order, content readability, alt text, color contrast)
  • Browser and platform compatibilities reviewed
  • CSS styles reviewed (minimal rules, no z-index)
  • Documents reviewed (docs, samples, live demo)
  • Internationalization reviewed (strings, unit formatting)
  • package.json and package-lock.json reviewed
  • Security reviewed (no data URIs, check for nonce leak)
  • Tests reviewed (coverage, legitimacy)

@compulim compulim marked this pull request as ready for review June 25, 2022 03:56
@compulim compulim added p0 Must Fix. Release-blocker area-accessibility labels Jun 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-accessibility p0 Must Fix. Release-blocker
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Title in Hero Card does not have aria-level specified
2 participants