Hi,

• Relates to :~ Accessibility issues found during ADMINS testing #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]