Allow implementors to change the WAI-ARIA role of the container (#3658)

[nfreear]

Fixes #3658

Changelog Entry

Added

• Resolves #3658. Added new containerRole to default style options, by @nfreear

Description

Added a new attribute role to <ReactWebChat> and renderWebChat, which allows the developer to specify the WAI-ARIA landmark role of the container for the Chat UI. It defaults to complementary, which is the currently hardcoded value.

Design

Specific Changes

1. Modified <ReactWebChat> and <BasicWebChat> to accept role attribute

• Only WAI-ARIA landmark roles are supported
• Fallback to complementary if invalid landmark role is specified

Tests added

1. Added accessibility.landmarkRole.valid.html to make sure role is set correctly
2. Added accessibility.landmarkRole.invalid.html to make sure role will fallback to complementary

• I have added tests and executed them locally;
• I have updated CHANGELOG.md;
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[ghost]

All CLA requirements met.

[corinagum]

Hey, thanks for the PR! I've added it to our project kanban even though it's still in draft - this is to keep it on our radar, not to pressure you on time. 🙂

[nfreear]

Hi @corinagum,

I see that BotFramework-WebChat-CI-PR has failed below above, but when I try to click on details I get a 401 Unauthorized error.

Are you able to screenshot what the failure is please, or give me access or similar?

Note, I'm just waiting for a response to check my understanding ...;)

Many thanks,

Nick

[corinagum]

@nfreear There was one failing test due to timeout as opposed to broken code. I've re-run the pipeline with the expectation that we'll get 100% pass. I'll check on it periodically and rerun if we get more timeouts.

---

Tests now passing

[nfreear]

Thanks @corinagum !

[corinagum]

@nfreear ping! How's it going? We'd definitely like to get your PR in when you're done with it!

[compulim]

I updated the PR as we commented in the original issue.

Instead of using styleOptions, we prefer role attribute, as commented in #3658.

useContainerRole is not needed because:

• Hooks are added only if it benefit developers when they are in composition mode
  • Composition mode = developer bring their own UI, but using Web Chat business logic layer and maybe part of UIs from Web Chat
• For this feature, it's very likely that the role prop is being used only once and reading/sharing the value is not a common scenario for composition mode

[corinagum]

LGTM! Thank you @nfreear for the submission :)

[nfreear]

Hi @corinagum and @compulim,

Apologies I left this unfinished (caught up in other work I'm afraid :() ... And, thank you for modifying @compulim -- I can see how the modifications make sense!

Best wishes,

Nick

[corinagum]

Totally understand about getting caught up! Similarly, we love community contributions but it's hard to fit it into our day-to-day schedule, haha. We'd love your participation in other changes if you ever have the time! Thanks again for your help.