microsoft / AdaptiveCards

A new way for developers to exchange card content in a common and consistent way.
https://adaptivecards.io
MIT License
1.75k stars 550 forks source link

[Rendering] Accessibility Screen Reader does not focus individual hyperlinks in a text block #6744

Closed manujai closed 2 years ago

manujai commented 2 years ago

Target Platforms

Android

SDK Version

2.8.0

Application Name

Cisco Webex, Visualizer App

Problem Description

Android Screen reader does not focus on individual hyperlinks in a TextBlock but instead selects the entire text block and reads all the hyperlinks in it out loud.

This is not convenient from an accessibility point of view as the user will not be able to select and visit the links.

Screenshots

Screenshot 2021-11-16 at  24 31 11PM

Screenshot 2021-11-16 at  28 39 11PM

Card JSON

{
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "TextBlock",
      "text": "Lesson 9: Buttons and Actions",
      "size": "medium",
      "weight": "bolder"
    },
    {
      "type": "Image",
      "altText": "Button",
      "url": "https://cardschool.webexbots.cloud/images/buttons.png",
      "horizontalAlignment": "Center",
      "size": "large"
    },
    {
      "type": "TextBlock",
      "text": "OK. We have been talking a lot about Cards, but what about Buttons? Buttons are one of the ways that users interact with cards, and the only way your application will get notified about this interaction.",
      "wrap": true
    },
    {
      "type": "TextBlock",
      "text": "As a designer, you create buttons by adding an Action to your card. Webex Teams supports three types of Actions:",
      "wrap": true
    },
    {
      "type": "TextBlock",
      "text": "* `Action.OpenUrl` - When clicked the client will open the user's browser to the specified URL.\n* `Action.ShowCard` - When clicked the client will \"expand\" the card to show a sub-card associated with the Activity. The \"Helpful Resources\" button on this card is an example of this.\n* `Action.Submit` - When clicked, the application that posted a card will get a notification that includes any data associated with the Action along with the data associated with the button, plus any info collected from any of the Input elements in the card.\n",
      "wrap": true
    },
    {
      "type": "TextBlock",
      "text": "In the next lesson, we will cover how to configure your application to process these `Action.Sumbit` button press notifications, which are called `attachmentAction` events.",
      "wrap": true
    },
    {
      "type": "Input.ChoiceSet",
      "id": "myCardIndex",
      "value": "9",
      "isMultiSelect": false,
      "isVisible": false,
      "choices": [
        {
          "title": "This hidden choice ensures that myCardIndex is returned with every Action.Submit attachmentAction",
          "value": "9"
        }
      ]
    },
    {
      "type": "Container",
      "items": [
        {
          "type": "ActionSet",
          "horizontalAlignment": "Center",
          "actions": [
            {
              "type": "Action.Submit",
              "title": "Next Lesson: Registering for Button Press Events",
              "data": {
                "nextLesson": true,
                "lessonIndex": 10
              }
            }
          ]
        }
      ]
    }
  ],
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "actions": [
    {
      "type": "Action.ShowCard",
      "title": "Pick Another Lesson",
      "card": {
        "type": "AdaptiveCard",
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "body": [
          {
            "type": "Container",
            "items": [
              {
                "type": "TextBlock",
                "text": "Available Lessons:"
              },
              {
                "type": "Input.ChoiceSet",
                "id": "jumpToLessonIndex",
                "value": "10",
                "choices": [
                  {
                    "title": "Introduction",
                    "value": "0"
                  },
                  {
                    "title": "Lesson 1: What is a Card?",
                    "value": "1"
                  },
                  {
                    "title": "Lesson 2: Advantages of Using Cards",
                    "value": "2"
                  },
                  {
                    "title": "Lesson 3: Card Specifications",
                    "value": "3"
                  },
                  {
                    "title": "Lesson 4: Designing a Card",
                    "value": "4"
                  },
                  {
                    "title": "Lesson 5: Webex Card Designer Tool",
                    "value": "5"
                  },
                  {
                    "title": "Lesson 6: Sending A Card to Webex Teams",
                    "value": "6"
                  },
                  {
                    "title": "Lesson 7: How This App Sends Cards",
                    "value": "7"
                  },
                  {
                    "title": "Lesson 8: Displaying Dynamic Content",
                    "value": "8"
                  },
                  {
                    "title": "Lesson 9: Buttons and Actions",
                    "value": "9"
                  },
                  {
                    "title": "Lesson 10: Registering for Button Press Events",
                    "value": "10"
                  },
                  {
                    "title": "Lesson 11: Processing Button Events",
                    "value": "11"
                  },
                  {
                    "title": "Lesson 12: How This App Handles Events",
                    "value": "12"
                  },
                  {
                    "title": "Lesson 13: Form with Buttons Demo",
                    "value": "13"
                  },
                  {
                    "title": "Lesson 14: Lesson 14: Guidelines & Best Practices",
                    "value": "14"
                  }
                ]
              },
              {
                "type": "ActionSet",
                "actions": [
                  {
                    "type": "Action.Submit",
                    "title": "Go To Lesson!",
                    "id": "gotoLesson",
                    "data": {
                      "nextLesson": false,
                      "pickAnotherLesson": true
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    {
      "type": "Action.ShowCard",
      "title": "Helpful Resources",
      "card": {
        "type": "AdaptiveCard",
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "body": [
          {
            "type": "TextBlock",
            "text": "* [Join the 'Ask B&C School' Webex Teams Space](https://eurl.io/#SJiS9VKTH)\n* [View the Source for This Card](https://developer.webex.com/buttons-and-cards-designer/lesson-9)\n* [View the Source for This App](https://github.com/WebexSamples/webex-card-school)\n* [Official Developer Guide](https://developer.webex.com/docs/api/guides/cards)\n* [Buttons and Cards Designer](https://developer.webex.com/buttons-and-cards-designer)\n* [Adaptive Card Schema Explorer](https://adaptivecards.io/explorer/)\n* [Cisco DevNet: Card Sample App](https://developer.cisco.com/codeexchange/github/repo/CiscoDevNet/webex-card-sample/) ",
            "wrap": true
          },
          {
            "type": "Container",
            "items": [
              {
                "type": "TextBlock",
                "text": "Do you have questions, comments or suggestions?\n\nWe'd love to get your feedback on this bot or any aspect of the Webex Teams Buttons and Cards feature.",
                "wrap": true
              },
              {
                "type": "Input.Text",
                "id": "feedback",
                "isMultiline": true,
                "placeholder": "Enter your feedback"
              },
              {
                "type": "ActionSet",
                "actions": [
                  {
                    "type": "Action.Submit",
                    "title": "Send Feedback",
                    "data": {}
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  ]
}

Sample Code Language

No response

Sample Code

No response

jonmill commented 2 years ago

@JeanRoca - another WebEx item for you to follow-up on

rankush commented 2 years ago

As per my understanding this is NOT an issue. Android system is having its own behaviour to identify and provide accessibility options to user.

In a case where multiple actionable items are available in a textView, Android system is providing "TAP with THREE fingers" to show a popup which contains all the actions. Now user can navigate in this popup with the same context of textview. User can select actions to perform within the popup.

If you people also feel same, we can close this issue.

Screen Recording 2022-05-23 at 1 40 03 PM

rankush commented 2 years ago

@JeanRoca - another WebEx item for you to follow-up on

We can close this issue !!