Allow any ARIA role attribute/prop (#5601)

compulim · web-flow · commit b27f9b7de5b1 · 2025-09-29T13:07:32.000-07:00
* Allow any role

* Allow role of string

* Fix propTypes

* Remove obsoleted tests
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/landmarkRole/invalid.html b/__tests__/html2/accessibility/landmarkRole/invalid.html
diff --git a/__tests__/html2/accessibility/landmarkRole/valid.html b/__tests__/html2/accessibility/landmarkRole/valid.html
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()
 );
diff --git a/packages/component/src/ReactWebChat.tsx b/packages/component/src/ReactWebChat.tsx
@@ -12,13 +12,10 @@ import Composer, { ComposerProps } from './Composer';
 // - They can run hooks outside of activity/attachment middleware
 //   - They will put <Composer> as very top of their page, and allow buttons on their existing page to send message to bot
 
-// Subset of landmark roles: https://w3.org/TR/wai-aria/#landmark_roles
-const ARIA_LANDMARK_ROLES = ['complementary', 'contentinfo', 'form', 'main', 'region'];
-
 type ReactWebChatProps = Readonly<
   Omit<ComposerProps, 'children'> & {
-    className?: string;
-    role?: 'complementary' | 'contentinfo' | 'form' | 'main' | 'region';
+    className?: string | undefined;
+    role?: string | undefined;
   }
 >;
 
@@ -42,9 +39,7 @@ const {
 
 ReactWebChat.propTypes = {
   className: PropTypes.string,
-  // Ignoring deficiencies with TypeScript/PropTypes inference.
-  // @ts-ignore
-  role: PropTypes.oneOf(ARIA_LANDMARK_ROLES),
+  role: PropTypes.string,
   ...composerPropTypesWithoutChildren
 };
 
