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.

Sign up for GitHub

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

Jump to bottom

Adaptive Cards: After submitting, all [role="menubar"] must have 1 or more descendant of [role="menuitem"] #3947

Closed
compulim opened this issue Jun 15, 2021 · 0 comments · Fixed by #3950
Closed

Adaptive Cards: After submitting, all [role="menubar"] must have 1 or more descendant of [role="menuitem"] #3947

compulim opened this issue Jun 15, 2021 · 0 comments · Fixed by #3950
Assignees
@compulim
Labels
bug Indicates an unexpected problem or an unintended behavior.
Milestone
R14

Comments

@compulim
Copy link
Contributor

compulim commented Jun 15, 2021 •
edited
Loading

Related to #3710.

Screenshots

image

Version

4.13.0

(Customer reported on 4.12.0)

Describe the bug

Assume the Adaptive Cards has 1+ action buttons (a.k.a. Action.Submit).

After end-user clicked on the action button to submit the Adaptive Card, for accessibility reason, we need to set aria-pressed="true" to indicate user's selection, in PR #3710.

But AC is rendering all actions as role="menuitem" under a container of role="menubar". That means, we are setting aria-pressed="true" to role="menuitem", which is violating WAI-ARIA. Instead, aria-pressed can only applies to role="button" according to WAI-ARIA 1.1.

So, Web Chat turned the role="menuitem" into role="button". But unfortunately, if the Adaptive Card only contains a single action button, the container with role="menubar" will no longer contains anything with role="menuitem", which is violating another rule of WAI-ARIA.

Before click

Assume there are 2 action buttons.

<div id="container" role="menubar">
  <button role="menuitem">Click me</button>
  <button role="menuitem">Or me</button>
</div>

After click

<div id="container" role="menubar">
  <button role="button" aria-pressed="true">Click me</button>
  <button role="menuitem">Or me</button>
</div>

If there are only 1 button in the card, the #container will no longer have any descendants of role="menuitem", which violated a WCAG rule.

Steps to reproduce

Expand to see the test case 
<!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>
    <div id="webchat"></div>
    <script>
      function createActivity(text) {
        return {
          from: { role: 'bot' },
          id: Math.random().toString(36).substr(2, 5),
          text,
          timestamp: new Date().toISOString(),
          type: 'message'
        };
      }

      run(async function () {
        const directLine = await testHelpers.createDirectLineWithTranscript([
          {
            attachments: [
              {
                contentType: 'application/vnd.microsoft.card.adaptive',
                content: {
                  $schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
                  type: 'AdaptiveCard',
                  version: '1.3',
                  body: [
                    {
                      type: 'TextBlock',
                      text: 'Hello, World!',
                      size: 'Large',
                      weight: 'Bolder',
                      wrap: true
                    }
                  ],
                  actions: [
                    {
                      type: 'Action.Submit',
                      title: 'Okay!'
                    }
                  ]
                }
              }
            ],
            from: {
              id: 'bot',
              role: 'bot'
            },
            id: '1',
            timestamp: new Date().toISOString(),
            type: 'message'
          }
        ]);

        WebChat.renderWebChat(
          {
            directLine,
            store: testHelpers.createStore(),
            styleOptions: {
              autoScrollSnapOnActivity: 1
            }
          },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();
        await pageConditions.numActivitiesShown(1);
        await pageConditions.scrollToBottomCompleted();

        await host.click(document.getElementsByClassName('ac-pushButton')[0]);

        // EXPECT: All `[role="menubar"]` must have at least one descendant of `[role="menuitem"]`.
        [].forEach.call(document.querySelectorAll('[role="menubar"]'), menuBar => {
          if (!menuBar.querySelectorAll('[role="menuitem"]').length) {
            console.log({ menuBar });

            throw new Error('One of the element with role="menubar" does not contains any role="menuitem".');
          }
        });
      });
    </script>
  </body>
</html>

Expected behavior

All elements with role="menubar" should contains ONE OR MORE descendants of role="menuitem".

Additional context

  • We might want to remove role="menubar" and all role="menuitem"
  • We should ask Adaptive Cards team why the actions container and its button have role attribute of menubar and menuitem respectively

[Bug]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@compulim compulim

Labels
bug Indicates an unexpected problem or an unintended behavior.
Projects
None yet
Milestone
R14
1 participant
@compulim