Botframework-webchat: bug: The WebChat container's role should not always be 'complementary' [screen reader accessibility]

[nfreear]

Hi,

• Relates to :~ #3655.

Screenshots

Version

• WebChat.js version :~ 4.10.1;
• JS :~ https://cdn.botframework.com/botframework-webchat/4.10.1/webchat.js;

Describe the bug

Sometimes a Chat-bot will be _additional_ content on the Web-page, set apart from the main content. However, other times a Chat-bot will be the only or main focus of the Web-page.

In these cases role=complementary is not appropriate, and will confuse screen reader users, who may rely on landmark roles for navigation.

Steps to reproduce

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

Give implementors / developers the option to modify the container-role via defaultStyleOptions.js:

   containerRole: 'complementary', // WAI-ARIA landmark role. Suggestions: 'complementary' or 'region'. Defaults to 'complementary'.

The value would be used in :~ https://github.com/microsoft/BotFramework-WebChat/blob/v4.11.0/packages/component/src/BasicWebChat.js#L71;

For example, role={containerRole}:

  return (
    <AccessKeySinkSurface ... ... >
      <TypeFocusSinkBox
        className={sinkClassName}
        disabled={disabled}
        ref={transcriptFocusRef}
        role={containerRole}
        sendFocusRef={sendBoxFocusRef}
      >
        // ...
      </TypeFocusSinkBox>
    </AccessKeySinkSurface>
  );

Please let me know what you think of this proposal.

Yours,

Nick

Additional context

[Bug]

[gabog]

Hi @compulim, can you review this issue?

[nfreear]

Hi @compulim,

I'm working on a fix based on my proposal above ... hopefully have a pull-request to follow ;).

Nick

[corinagum]

Assigning to @nfreear. In the future, please provide repro steps as requested in the template.

[compulim]

I think it is better to put role attribute on the <ReactWebChat>, for example:

<ReactWebChat directLine={...} role="region" />

My arguments:

• We do have dir and disabled attributes too, they are not using style options
• It seems more natural and intuitive

For composition version of Web Chat, it will be on the <BasicWebChat> component.

<Composer directLine={...}>
  <BasicWebChat role="region" />
</Composer>

[nfreear]

Hi @compulim,

Thanks for the suggestion -- accepted.

Can I check my understanding? You're saying implement the role attribute in ReactWebChat.js ~ line 17:

  <BasicWebChat className={className} role={containerRole} />

Is that correct?

Thanks,

Nick

[nfreear]

Hi @compulim & @corinagum,

I have a question in my previous comment ... @compulim Are you able to answer so I can complete PR #3669, and get it reviewed please?

Thanks,

Nick

[compulim]

It will become:

const ReactWebChat = ({ className, role, ...composerProps }) => (
  <Composer {...composerProps}>
    <BasicWebChat className={className} role={role} />
  </Composer>
);

When end-developer render Web Chat, their call will looks like:

ReactDOM.render(
  <ReactWebChat
    className="my-chat-ui"
    directLine={...}
    role="region"
  />
);