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

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]

[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"
  />
);

[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>