Allow any role

compulim · compulim · commit 28b438b3b27f · 2025-09-29T18:51:56.000Z
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -142,6 +142,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
    - Bundling vendor chunks, by [@compulim](https://github.com/compulim) in PR [#5595](https://github.com/microsoft/BotFramework-WebChat/pull/5595)
    - Added deprecation notes for legacy imports, by [@compulim](https://github.com/compulim) in PR [#5600](https://github.com/microsoft/BotFramework-WebChat/pull/5600)
       - `import { hooks } from 'botframework-webchat'` should be replaced by `import * as hooks from 'botframework-webchat/hook'`
+- Relaxed `role` prop to allow any string instead of ARIA landmark roles, in PR [#5561](https://github.com/microsoft/BotFramework-WebChat/pull/5561), by [@compulim](https://github.com/compulim)
 
 ### Changed
 
diff --git a/__tests__/html2/accessibility/role.application.html b/__tests__/html2/accessibility/role.application.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <main id="webchat"></main>
+    <script type="importmap">
+      {
+        "imports": {
+          "botframework-webchat": "/__dist__/packages/bundle/static/botframework-webchat.js",
+          "react": "/__dist__/packages/bundle/static/react.baseline.js",
+          "react-dom": "/__dist__/packages/bundle/static/react-dom.baseline.js"
+        }
+      }
+    </script>
+    <script type="module">
+      import '/test-harness.mjs';
+      import '/test-page-object.mjs';
+
+      import { createDirectLine, createStoreWithOptions, renderWebChat } from 'botframework-webchat';
+      import { version } from 'react';
+
+      run(async function () {
+        const {
+          testHelpers: { createDirectLineEmulator }
+        } = window;
+
+        // TODO: This is for `createDirectLineEmulator` only, should find ways to eliminate this line.
+        window.WebChat = { createStoreWithOptions };
+
+        const { directLine, store } = createDirectLineEmulator();
+
+        renderWebChat({ directLine, role: 'application', store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        expect(document.querySelector('#webchat .webchat__surface').getAttribute('role')).toBe('application');
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/component/src/BasicWebChat.tsx b/packages/component/src/BasicWebChat.tsx
@@ -5,7 +5,7 @@ import { validateProps } from '@msinternal/botframework-webchat-react-valibot';
 import { SendBoxMiddlewareProxy, hooks } from 'botframework-webchat-api';
 import classNames from 'classnames';
 import React, { memo } from 'react';
-import { fallback, literal, object, optional, pipe, readonly, string, union, type InferInput } from 'valibot';
+import { object, optional, pipe, readonly, string, type InferInput } from 'valibot';
 
 import BasicConnectivityStatus from './BasicConnectivityStatus';
 import BasicToaster from './BasicToaster';
@@ -42,14 +42,7 @@ const TRANSCRIPT_STYLE = {
 const basicWebChatPropsSchema = pipe(
   object({
     className: optional(string()),
-    role: fallback(
-      optional(
-        // Subset of landmark roles: https://w3.org/TR/wai-aria/#landmark_roles
-        union([literal('complementary'), literal('contentinfo'), literal('form'), literal('main'), literal('region')])
-      ),
-      // Fallback to "complementary" if specified is not a valid landmark role.
-      'complementary'
-    )
+    role: optional(string())
   }),
   readonly()
 );
