BotFramework-WebChat/__tests__/html2/accessibility/adaptiveCard/hack.roleMod.ariaLabelFromTextContent.html at dd9cbfde6de8f2367cdcc379f48e6922c3cac50a · uzirthapa/BotFramework-WebChat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script>
      run(async function () {
        const { directLine, store } = testHelpers.createDirectLineEmulator();

        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));

        await pageConditions.uiConnected();

        await directLine.emulateIncomingActivity({
          attachments: [
            {
              content: {
                type: 'AdaptiveCard',
                $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
                version: '1.5',
                body: [
                  {
                    type: 'TextBlock',
                    text: 'Flight Status Update'
                  },
                  {
                    type: 'TextBlock',
                    text: 'Flight AA1234 from Seattle to New York'
                  }
                ]
              },
              contentType: 'application/vnd.microsoft.card.adaptive'
            },
            {
              content: {
                type: 'AdaptiveCard',
                $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
                version: '1.5',
                speak: 'Custom speak text for screen readers',
                body: [
                  {
                    type: 'TextBlock',
                    text: 'This text should not be the aria-label'
                  }
                ]
              },
              contentType: 'application/vnd.microsoft.card.adaptive'
            },
            {
              content: {
                type: 'AdaptiveCard',
                $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
                version: '1.5',
                body: [
                  {
                    type: 'Input.Text',
                    id: 'name',
                    label: 'Your Name',
                    placeholder: 'Enter your name'
                  }
                ]
              },
              contentType: 'application/vnd.microsoft.card.adaptive'
            }
          ]
        });

        await pageConditions.numActivitiesShown(1);

        const [cardNoSpeak, cardWithSpeak, cardFormNoSpeak] = Array.from(
          document.querySelectorAll('.ac-adaptiveCard')
        );

        // Card without speak: aria-label should be derived from visible text content.
        expect(cardNoSpeak.getAttribute('aria-label')).toContain('Flight Status Update');
        expect(cardNoSpeak.getAttribute('aria-label')).toContain('Flight AA1234');
        expect(cardNoSpeak.getAttribute('role')).toBe('figure');

        // Card with speak: aria-label should use the speak property value.
        expect(cardWithSpeak.getAttribute('aria-label')).toBe('Custom speak text for screen readers');
        expect(cardWithSpeak.getAttribute('role')).toBe('figure');

        // Card with form inputs and no speak: aria-label should be derived from text content,
        // but role should be "figure" (not "form") to avoid duplicate form landmarks on the page.
        expect(cardFormNoSpeak.getAttribute('aria-label')).toBeTruthy();
        expect(cardFormNoSpeak.getAttribute('role')).toBe('figure');
      });
    </script>
  </body>
</html>