3

Here is my issue in terms of the adaptive cards.

Issue

Nested interactive controls are not announced by screen readers (nested-interactive)

Element path

#card_875c3295-31b4-eb11-8237-00224822ed9c9c945a9b-31b4-eb11-8237-00224822ed9c > .ac-adaptiveCard.ac-container > .ac-container > .ac-columnSet:nth-child(1) > .ac-selectable.ac-container[role="button"]

Snippet

div class="ac-container ac-selectable" tabindex="0" role="button" aria-label="Open knowledge article, Order Shipping Time" style="display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; min-width: 0px; flex: 1 1 50px...

How to fix

Fix any of the following:

  • Element has focusable descendants

Screenshots

Error visualization

DOM

user15986742
  • 31
  • 1
  • 3
  • Hi can you post your complete CSS and HTML for this issue, the code you have posted is incomplete (no button, no element with the id, etc). – Nathaniel Flick May 24 '21 at 18:31
  • 2
    So there is an issue with nesting interactive controls - which one should be activated when you press Enter for example. Have a look at [this answer I gave on nested interactive elements](https://stackoverflow.com/a/62092618/2702894) and see if that helps you understand why it is a bad idea. I am guessing within the card (which you have told a screen reader to treat as a ` – GrahamTheDev May 24 '21 at 19:30
  • Hi thanks for replying. I appended a screenshot for the DOM. I understand the issue that the button nests a focusable href. The UI is rendered by Adaptive Card (adaptivecards.js version 1.3.0). The card title here is an Action.Submit where it calls APIs. I'd appreciate it if you guys could offer some pointers. (I'm trying not to upgrade the version to the latest 2.9.0. It's a little bit expensive at the moment). – user15986742 May 26 '21 at 23:05
  • 1
    The only pointer I can give is that you contact the developers of Adaptive Card and request that they fix this. Buttons simply should not contain hyperlinks. If the framework you are using does this in a way that can't be prevented, there's a bug in the framework. – brennanyoung Jun 01 '21 at 13:31
  • The template embeds a href in the title. This can be fixed from our side. Thanks for replying. – user15986742 Jun 02 '21 at 14:52

0 Answers0