From 8b8d0a0a0938907ffd9cef1d76f1b0faedabb6c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20V=C3=A9lez?= <pablovv2012@gmail.com>
Date: Fri, 13 Dec 2024 15:07:58 -0500
Subject: [PATCH] MM-61897 - fix duplicated role dialog in boostrap modals
 (#29507)

* MM-61897 - fix duplicated role dialog in modals

* fix linter
---
 .../get_link_modal.test.tsx.snap              |   8 +-
 .../post_deleted_modal.test.tsx.snap          |   2 +-
 .../about_build_modal/about_build_modal.tsx   |   2 +-
 .../about_build_modal_cloud.tsx               |   2 +-
 .../access_history_modal.test.tsx.snap        |   4 +-
 .../access_history_modal.tsx                  |   2 +-
 .../activity_log_modal.test.tsx.snap          |   4 +-
 .../activity_log_modal/activity_log_modal.tsx |   2 +-
 .../add_user_to_channel_modal.test.tsx.snap   |   2 +-
 .../add_user_to_channel_modal.tsx             |   2 +-
 .../add_users_to_group_modal.test.tsx.snap    |   2 +-
 .../add_users_to_group_modal.tsx              |   2 +-
 .../full_log_event_modal.tsx                  |   2 +-
 .../manage_roles_modal/manage_roles_modal.tsx |   2 +-
 .../manage_teams_modal.test.tsx.snap          |   2 +-
 .../manage_teams_modal/manage_teams_modal.tsx |   2 +-
 .../manage_tokens_modal.test.tsx.snap         |   6 +-
 .../manage_tokens_modal.tsx                   |   2 +-
 .../edit_post_time_limit_modal.tsx            |   2 +-
 .../reset_email_modal.test.tsx.snap           |   4 +-
 .../reset_email_modal/reset_email_modal.tsx   |   2 +-
 .../reset_password_modal.test.tsx.snap        |   2 +-
 .../reset_password_modal.tsx                  |   2 +-
 .../group_members_modal.test.tsx.snap         |   2 +-
 .../group/group_members_modal.tsx             |   2 +-
 .../users_to_be_removed_modal.tsx             |   2 +-
 .../apps_form_component.test.tsx.snap         |   2 +-
 .../apps_form/apps_form_component.tsx         |   2 +-
 .../channel_invite_modal.test.tsx.snap        |   6 +-
 .../channel_invite_modal.tsx                  |   2 +-
 .../channel_members_modal.test.tsx.snap       |   4 +-
 .../channel_members_modal.tsx                 |   2 +-
 .../channel_notifications_modal.test.tsx.snap |  12 +-
 .../channel_notifications_modal.tsx           |   2 +-
 .../channel_selector_modal.test.tsx.snap      |   4 +-
 .../channel_selector_modal.tsx                |   2 +-
 .../__snapshots__/success.test.tsx.snap       |   2 +-
 .../channels/src/components/confirm_modal.tsx |   2 +-
 .../convert_channel_modal.tsx                 |   2 +-
 .../create_user_groups_modal.test.tsx.snap    |   4 +-
 .../create_user_groups_modal.tsx              |   2 +-
 .../delete_channel_modal.test.tsx.snap        |   2 +-
 .../delete_channel_modal.tsx                  |   2 +-
 .../delete_post_modal.test.tsx.snap           |   6 +-
 .../delete_post_modal/delete_post_modal.tsx   |   2 +-
 .../edit_channel_header_modal.test.tsx.snap   |  10 +-
 .../edit_channel_header_modal.tsx             |   2 +-
 .../edit_channel_purpose_modal.test.tsx.snap  |  14 +-
 .../edit_channel_purpose_modal.tsx            |   2 +-
 .../file_preview_modal.test.tsx.snap          |  24 +-
 .../file_preview_modal/file_preview_modal.tsx |   2 +-
 .../src/components/get_link_modal.tsx         |   2 +-
 ...ct_outgoing_oauth_connection.test.tsx.snap |   4 +-
 ...dd_outgoing_oauth_connection.test.tsx.snap |   2 +-
 ...it_outgoing_oauth_connection.test.tsx.snap |  12 +-
 .../interactive_dialog/interactive_dialog.tsx |   2 +-
 .../invitation_modal/invitation_modal.tsx     |   2 +-
 .../keyboard_shortcuts_modal.test.tsx.snap    |   4 +-
 .../keyboard_shortcuts_modal.tsx              |   2 +-
 .../leave_team_modal.test.tsx.snap            |   2 +-
 .../leave_team_modal/leave_team_modal.tsx     |   2 +-
 .../more_direct_channels.test.tsx.snap        |   4 +-
 .../more_direct_channels.tsx                  |   2 +-
 .../onboarding_video_modal.tsx                |   2 +-
 .../marketplace_modal.test.tsx.snap           |  14 +-
 .../src/components/post_deleted_modal.tsx     |   2 +-
 .../src/components/pricing_modal/index.tsx    |   2 +-
 .../quick_switch_modal.test.tsx.snap          |   2 +-
 .../quick_switch_modal/quick_switch_modal.tsx |   2 +-
 .../removed_from_channel_modal.test.tsx.snap  |   2 +-
 .../removed_from_channel_modal.tsx            |   2 +-
 .../rename_channel_modal.test.tsx.snap        |   2 +-
 .../rename_channel_modal.tsx                  |   2 +-
 .../start_trial_form_modal.test.tsx.snap      |   2 +-
 .../air_gapped_modal.tsx                      |   2 +-
 .../start_trial_form_modal/index.tsx          |   2 +-
 .../team_members_modal.test.tsx.snap          |   2 +-
 .../team_members_modal/team_members_modal.tsx |   2 +-
 .../team_selector_modal.tsx                   |   2 +-
 .../team_settings_modal.tsx                   |   2 +-
 .../unarchive_channel_modal.test.tsx.snap     |   2 +-
 .../unarchive_channel_modal.tsx               |   2 +-
 .../update_user_group_modal.test.tsx.snap     |   2 +-
 .../update_user_group_modal.tsx               |   2 +-
 .../user_groups_modal.test.tsx.snap           |   4 +-
 .../user_groups_modal/user_groups_modal.tsx   |   2 +-
 .../view_user_group_modal.test.tsx.snap       |   2 +-
 .../view_user_group_modal.tsx                 |   2 +-
 .../__snapshots__/submenu_modal.test.tsx.snap |   2 +-
 .../submenu_modal/submenu_modal.tsx           |   2 +-
 .../widgets/modals/full_screen_modal.test.tsx | 234 +++++++++---------
 .../widgets/modals/full_screen_modal.tsx      |   2 +-
 .../src/generic_modal/generic_modal.tsx       |   2 +-
 93 files changed, 265 insertions(+), 265 deletions(-)

diff --git a/webapp/channels/src/components/__snapshots__/get_link_modal.test.tsx.snap b/webapp/channels/src/components/__snapshots__/get_link_modal.test.tsx.snap
index 6372fda945c..1605e402999 100644
--- a/webapp/channels/src/components/__snapshots__/get_link_modal.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/get_link_modal.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`components/GetLinkModal should have called onHide 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -122,7 +122,7 @@ exports[`components/GetLinkModal should have called onHide 2`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -208,7 +208,7 @@ exports[`components/GetLinkModal should match snapshot when all props is set 1`]
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -299,7 +299,7 @@ exports[`components/GetLinkModal should match snapshot when helpText is not set
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/__snapshots__/post_deleted_modal.test.tsx.snap b/webapp/channels/src/components/__snapshots__/post_deleted_modal.test.tsx.snap
index a112f04e0bf..a99b9fdbbc1 100644
--- a/webapp/channels/src/components/__snapshots__/post_deleted_modal.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/post_deleted_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`components/ChannelInfoModal should match snapshot 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/about_build_modal/about_build_modal.tsx b/webapp/channels/src/components/about_build_modal/about_build_modal.tsx
index 57aab101921..35464ba1981 100644
--- a/webapp/channels/src/components/about_build_modal/about_build_modal.tsx
+++ b/webapp/channels/src/components/about_build_modal/about_build_modal.tsx
@@ -237,7 +237,7 @@ export default class AboutBuildModal extends React.PureComponent<Props, State> {
                 show={this.state.show}
                 onHide={this.doHide}
                 onExited={this.props.onExited}
-                role='dialog'
+                role='none'
                 aria-labelledby='aboutModalLabel'
             >
                 <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/about_build_modal/about_build_modal_cloud/about_build_modal_cloud.tsx b/webapp/channels/src/components/about_build_modal/about_build_modal_cloud/about_build_modal_cloud.tsx
index 7742065a5a4..388d0f5ff30 100644
--- a/webapp/channels/src/components/about_build_modal/about_build_modal_cloud/about_build_modal_cloud.tsx
+++ b/webapp/channels/src/components/about_build_modal/about_build_modal_cloud/about_build_modal_cloud.tsx
@@ -63,7 +63,7 @@ export default function AboutBuildModalCloud(props: Props) {
             show={props.show}
             onHide={props.doHide}
             onExited={props.onExited}
-            role='dialog'
+            role='none'
             aria-labelledby='aboutModalLabel'
         >
             <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/access_history_modal/__snapshots__/access_history_modal.test.tsx.snap b/webapp/channels/src/components/access_history_modal/__snapshots__/access_history_modal.test.tsx.snap
index 945a069e72b..254dcabb148 100644
--- a/webapp/channels/src/components/access_history_modal/__snapshots__/access_history_modal.test.tsx.snap
+++ b/webapp/channels/src/components/access_history_modal/__snapshots__/access_history_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`components/AccessHistoryModal should match snapshot when audits exist 1
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -109,7 +109,7 @@ exports[`components/AccessHistoryModal should match snapshot when no audits exis
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/access_history_modal/access_history_modal.tsx b/webapp/channels/src/components/access_history_modal/access_history_modal.tsx
index 8188f961381..931fb98bc72 100644
--- a/webapp/channels/src/components/access_history_modal/access_history_modal.tsx
+++ b/webapp/channels/src/components/access_history_modal/access_history_modal.tsx
@@ -59,7 +59,7 @@ const AccessHistoryModal = ({
             onHide={onCloseClick}
             onExited={onHide}
             bsSize='large'
-            role='dialog'
+            role='none'
             aria-labelledby='accessHistoryModalLabel'
         >
             <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/activity_log_modal/__snapshots__/activity_log_modal.test.tsx.snap b/webapp/channels/src/components/activity_log_modal/__snapshots__/activity_log_modal.test.tsx.snap
index ffaa24aab9b..9295ca93872 100644
--- a/webapp/channels/src/components/activity_log_modal/__snapshots__/activity_log_modal.test.tsx.snap
+++ b/webapp/channels/src/components/activity_log_modal/__snapshots__/activity_log_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`components/ActivityLogModal should match snapshot 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -110,7 +110,7 @@ exports[`components/ActivityLogModal should match snapshot when submitRevoke is
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/activity_log_modal/activity_log_modal.tsx b/webapp/channels/src/components/activity_log_modal/activity_log_modal.tsx
index 50d5e40b6b8..89bf41a0e67 100644
--- a/webapp/channels/src/components/activity_log_modal/activity_log_modal.tsx
+++ b/webapp/channels/src/components/activity_log_modal/activity_log_modal.tsx
@@ -115,7 +115,7 @@ export default class ActivityLogModal extends React.PureComponent<Props, State>
                 onHide={this.onHide}
                 onExited={this.props.onHide}
                 bsSize='large'
-                role='dialog'
+                role='none'
                 aria-labelledby='activityLogModalLabel'
             >
                 <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap b/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap
index 255c76bb9cd..43b5ad4745d 100644
--- a/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`components/AddUserToChannelModal should match snapshot 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/add_user_to_channel_modal/add_user_to_channel_modal.tsx b/webapp/channels/src/components/add_user_to_channel_modal/add_user_to_channel_modal.tsx
index 69fe07e98f1..c6efcc77df7 100644
--- a/webapp/channels/src/components/add_user_to_channel_modal/add_user_to_channel_modal.tsx
+++ b/webapp/channels/src/components/add_user_to_channel_modal/add_user_to_channel_modal.tsx
@@ -287,7 +287,7 @@ export default class AddUserToChannelModal extends React.PureComponent<Props, St
                 onHide={this.onHide}
                 onExited={this.onExited}
                 enforceFocus={true}
-                role='dialog'
+                role='none'
                 aria-labelledby='addChannelModalLabel'
             >
                 <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap b/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
index 99adbebb930..4a505886b10 100644
--- a/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_users_to_group_modal/__snapshots__/add_users_to_group_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`component/add_users_to_group_modal should match snapshot 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx b/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx
index 8f0cc0e8a7d..1935a53add4 100644
--- a/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx
+++ b/webapp/channels/src/components/add_users_to_group_modal/add_users_to_group_modal.tsx
@@ -93,7 +93,7 @@ const AddUsersToGroupModal = (props: Props) => {
             show={show}
             onHide={doHide}
             onExited={props.onExited}
-            role='dialog'
+            role='none'
             aria-labelledby='createUserGroupsModalLabel'
             id='addUsersToGroupsModal'
         >
diff --git a/webapp/channels/src/components/admin_console/full_log_event_modal/full_log_event_modal.tsx b/webapp/channels/src/components/admin_console/full_log_event_modal/full_log_event_modal.tsx
index 9f22e0f3e41..46ba846d161 100644
--- a/webapp/channels/src/components/admin_console/full_log_event_modal/full_log_event_modal.tsx
+++ b/webapp/channels/src/components/admin_console/full_log_event_modal/full_log_event_modal.tsx
@@ -65,7 +65,7 @@ export default class FullLogEventModal extends React.PureComponent<Props, State>
                 show={this.props.show}
                 onHide={this.props.onModalDismissed}
                 dialogClassName='a11y__modal full-log-event'
-                role='dialog'
+                role='none'
                 aria-labelledby='fullLogEventModalLabel'
             >
                 <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/admin_console/manage_roles_modal/manage_roles_modal.tsx b/webapp/channels/src/components/admin_console/manage_roles_modal/manage_roles_modal.tsx
index d1012b8e116..a34b4d77476 100644
--- a/webapp/channels/src/components/admin_console/manage_roles_modal/manage_roles_modal.tsx
+++ b/webapp/channels/src/components/admin_console/manage_roles_modal/manage_roles_modal.tsx
@@ -356,7 +356,7 @@ export default class ManageRolesModal extends React.PureComponent<Props, State>
                 onHide={this.onHide}
                 onExited={this.props.onExited}
                 dialogClassName='a11y__modal manage-teams'
-                role='dialog'
+                role='none'
                 aria-labelledby='manageRolesModalLabel'
             >
                 <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/admin_console/manage_teams_modal/__snapshots__/manage_teams_modal.test.tsx.snap b/webapp/channels/src/components/admin_console/manage_teams_modal/__snapshots__/manage_teams_modal.test.tsx.snap
index ae9f5517bd4..c22f6417558 100644
--- a/webapp/channels/src/components/admin_console/manage_teams_modal/__snapshots__/manage_teams_modal.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/manage_teams_modal/__snapshots__/manage_teams_modal.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`ManageTeamsModal should match snapshot init 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/admin_console/manage_teams_modal/manage_teams_modal.tsx b/webapp/channels/src/components/admin_console/manage_teams_modal/manage_teams_modal.tsx
index 3937835126a..17369801373 100644
--- a/webapp/channels/src/components/admin_console/manage_teams_modal/manage_teams_modal.tsx
+++ b/webapp/channels/src/components/admin_console/manage_teams_modal/manage_teams_modal.tsx
@@ -191,7 +191,7 @@ const ManageTeamsModal = ({locale, onExited, user, actions}: Props) => {
             onHide={onModalDismissed}
             onExited={onExited}
             dialogClassName='a11y__modal manage-teams modal--overflow-visible'
-            role='dialog'
+            role='none'
             aria-labelledby='manageTeamsModalLabel'
         >
             <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/admin_console/manage_tokens_modal/__snapshots__/manage_tokens_modal.test.tsx.snap b/webapp/channels/src/components/admin_console/manage_tokens_modal/__snapshots__/manage_tokens_modal.test.tsx.snap
index 6e3d8e48dc7..2477484a277 100644
--- a/webapp/channels/src/components/admin_console/manage_tokens_modal/__snapshots__/manage_tokens_modal.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/manage_tokens_modal/__snapshots__/manage_tokens_modal.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx in
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -123,7 +123,7 @@ exports[`components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx sh
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -288,7 +288,7 @@ exports[`components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx sh
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx b/webapp/channels/src/components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx
index 37c0b082365..0237e759365 100644
--- a/webapp/channels/src/components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx
+++ b/webapp/channels/src/components/admin_console/manage_tokens_modal/manage_tokens_modal.tsx
@@ -185,7 +185,7 @@ export default class ManageTokensModal extends React.PureComponent<Props, State>
                 onHide={this.onModalDismissed}
                 onExited={this.props.onExited}
                 dialogClassName='a11y__modal manage-teams'
-                role='dialog'
+                role='none'
                 aria-labelledby='manageTokensModalLabel'
             >
                 <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/edit_post_time_limit_modal/edit_post_time_limit_modal.tsx b/webapp/channels/src/components/admin_console/permission_schemes_settings/edit_post_time_limit_modal/edit_post_time_limit_modal.tsx
index db362a4fcc5..9ac5b87dc1f 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/edit_post_time_limit_modal/edit_post_time_limit_modal.tsx
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/edit_post_time_limit_modal/edit_post_time_limit_modal.tsx
@@ -69,7 +69,7 @@ export default function EditPostTimeLimitModal(props: Props) {
         <Modal
             dialogClassName='a11y__modal admin-modal edit-post-time-limit-modal'
             show={props.show}
-            role='dialog'
+            role='none'
             aria-labelledby='editPostTimeModalLabel'
             onHide={props.onClose}
         >
diff --git a/webapp/channels/src/components/admin_console/reset_email_modal/__snapshots__/reset_email_modal.test.tsx.snap b/webapp/channels/src/components/admin_console/reset_email_modal/__snapshots__/reset_email_modal.test.tsx.snap
index 659561673b0..55977537246 100644
--- a/webapp/channels/src/components/admin_console/reset_email_modal/__snapshots__/reset_email_modal.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/reset_email_modal/__snapshots__/reset_email_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`components/admin_console/reset_email_modal/reset_email_modal.tsx should
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -143,7 +143,7 @@ exports[`components/admin_console/reset_email_modal/reset_email_modal.tsx should
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/admin_console/reset_email_modal/reset_email_modal.tsx b/webapp/channels/src/components/admin_console/reset_email_modal/reset_email_modal.tsx
index 06de9439d9f..0d48203ac7c 100644
--- a/webapp/channels/src/components/admin_console/reset_email_modal/reset_email_modal.tsx
+++ b/webapp/channels/src/components/admin_console/reset_email_modal/reset_email_modal.tsx
@@ -141,7 +141,7 @@ export default class ResetEmailModal extends React.PureComponent<Props, State> {
                 show={this.state.show}
                 onHide={this.doCancel}
                 onExited={this.props.onExited}
-                role='dialog'
+                role='none'
                 aria-labelledby='resetEmailModalLabel'
                 data-testid='resetEmailModal'
             >
diff --git a/webapp/channels/src/components/admin_console/reset_password_modal/__snapshots__/reset_password_modal.test.tsx.snap b/webapp/channels/src/components/admin_console/reset_password_modal/__snapshots__/reset_password_modal.test.tsx.snap
index f56bf0b6221..1fbb00e11d2 100644
--- a/webapp/channels/src/components/admin_console/reset_password_modal/__snapshots__/reset_password_modal.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/reset_password_modal/__snapshots__/reset_password_modal.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`components/admin_console/reset_password_modal/reset_password_modal.tsx
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/admin_console/reset_password_modal/reset_password_modal.tsx b/webapp/channels/src/components/admin_console/reset_password_modal/reset_password_modal.tsx
index d7726d49770..30470c06417 100644
--- a/webapp/channels/src/components/admin_console/reset_password_modal/reset_password_modal.tsx
+++ b/webapp/channels/src/components/admin_console/reset_password_modal/reset_password_modal.tsx
@@ -179,7 +179,7 @@ export default class ResetPasswordModal extends React.PureComponent<Props, State
                 show={this.state.show}
                 onHide={this.doCancel}
                 onExited={this.props.onExited}
-                role='dialog'
+                role='none'
                 aria-labelledby='resetPasswordModalLabel'
             >
                 <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/group/__snapshots__/group_members_modal.test.tsx.snap b/webapp/channels/src/components/admin_console/team_channel_settings/group/__snapshots__/group_members_modal.test.tsx.snap
index f8265097345..d5494c35840 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/group/__snapshots__/group_members_modal.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/group/__snapshots__/group_members_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`admin_console/team_channel_settings/group/GroupList should match snapsh
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/group/group_members_modal.tsx b/webapp/channels/src/components/admin_console/team_channel_settings/group/group_members_modal.tsx
index 42f18c88852..bdcc856ecd3 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/group/group_members_modal.tsx
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/group/group_members_modal.tsx
@@ -45,7 +45,7 @@ const GroupMembersModal: React.FC<Props> = ({
             show={show}
             onHide={handleHide}
             onExited={handleExit}
-            role='dialog'
+            role='none'
             aria-labelledby='groupMemberModalLabel'
             id='groupMembersModal'
         >
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/users_to_be_removed_modal.tsx b/webapp/channels/src/components/admin_console/team_channel_settings/users_to_be_removed_modal.tsx
index 6adc8e9dcc7..f9716cb70d3 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/users_to_be_removed_modal.tsx
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/users_to_be_removed_modal.tsx
@@ -82,7 +82,7 @@ const UsersToBeRemovedModal = ({total, scope, scopeId, users, onExited}: Props)
             onHide={handleHide}
             onExited={onExited}
             id='confirmModal'
-            role='dialog'
+            role='none'
             aria-labelledby='confirmModalLabel'
         >
             <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap b/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap
index aa20143c293..3786ed8cf38 100644
--- a/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap
+++ b/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`AppsFormComponent should set match snapshot 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <form
diff --git a/webapp/channels/src/components/apps_form/apps_form_component.tsx b/webapp/channels/src/components/apps_form/apps_form_component.tsx
index 629b639da35..aed3de2100a 100644
--- a/webapp/channels/src/components/apps_form/apps_form_component.tsx
+++ b/webapp/channels/src/components/apps_form/apps_form_component.tsx
@@ -370,7 +370,7 @@ export class AppsForm extends React.PureComponent<Props, State> {
                 onHide={this.onHide}
                 onExited={this.props.onExited}
                 backdrop='static'
-                role='dialog'
+                role='none'
                 aria-labelledby='appsModalLabel'
             >
                 <form
diff --git a/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap b/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
index d23aad026a1..fa0a44ba20f 100644
--- a/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
+++ b/webapp/channels/src/components/channel_invite_modal/__snapshots__/channel_invite_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -190,7 +190,7 @@ exports[`components/channel_invite_modal should match snapshot for channel_invit
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -374,7 +374,7 @@ exports[`components/channel_invite_modal should match snapshot with exclude and
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
index f10edda8dbf..d84e66763c2 100644
--- a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
+++ b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
@@ -542,7 +542,7 @@ export class ChannelInviteModal extends React.PureComponent<Props, State> {
                 show={this.state.show}
                 onHide={this.onHide}
                 onExited={this.props.onExited}
-                role='dialog'
+                role='none'
                 aria-labelledby='channelInviteModalLabel'
             >
                 <Modal.Header
diff --git a/webapp/channels/src/components/channel_members_modal/__snapshots__/channel_members_modal.test.tsx.snap b/webapp/channels/src/components/channel_members_modal/__snapshots__/channel_members_modal.test.tsx.snap
index ce834efe386..51c7cd7405e 100644
--- a/webapp/channels/src/components/channel_members_modal/__snapshots__/channel_members_modal.test.tsx.snap
+++ b/webapp/channels/src/components/channel_members_modal/__snapshots__/channel_members_modal.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`components/ChannelMembersModal should match snapshot 1`] = `
     onHide={[Function]}
     renderBackdrop={[Function]}
     restoreFocus={true}
-    role="dialog"
+    role="none"
     show={true}
   >
     <ModalHeader
@@ -123,7 +123,7 @@ exports[`components/ChannelMembersModal should match snapshot with archived chan
     onHide={[Function]}
     renderBackdrop={[Function]}
     restoreFocus={true}
-    role="dialog"
+    role="none"
     show={true}
   >
     <ModalHeader
diff --git a/webapp/channels/src/components/channel_members_modal/channel_members_modal.tsx b/webapp/channels/src/components/channel_members_modal/channel_members_modal.tsx
index 3cef021298f..208253c2479 100644
--- a/webapp/channels/src/components/channel_members_modal/channel_members_modal.tsx
+++ b/webapp/channels/src/components/channel_members_modal/channel_members_modal.tsx
@@ -74,7 +74,7 @@ export default class ChannelMembersModal extends React.PureComponent<Props, Stat
                     show={this.state.show}
                     onHide={this.handleHide}
                     onExited={this.props.onExited}
-                    role='dialog'
+                    role='none'
                     aria-labelledby='channelMembersModalLabel'
                     id='channelMembersModal'
                 >
diff --git a/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap b/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap
index 6a7dfc6a0b2..e1499eec419 100644
--- a/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap
+++ b/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap
@@ -11,7 +11,7 @@ Object {
       aria-hidden="true"
     />
     <div
-      role="dialog"
+      role="none"
     >
       <div
         class="fade modal-backdrop"
@@ -430,7 +430,7 @@ Object {
       aria-hidden="true"
     />
     <div
-      role="dialog"
+      role="none"
     >
       <div
         class="fade modal-backdrop"
@@ -987,7 +987,7 @@ Object {
       aria-hidden="true"
     />
     <div
-      role="dialog"
+      role="none"
     >
       <div
         class="fade modal-backdrop"
@@ -1291,7 +1291,7 @@ Object {
       aria-hidden="true"
     />
     <div
-      role="dialog"
+      role="none"
     >
       <div
         class="fade modal-backdrop"
@@ -1791,7 +1791,7 @@ Object {
       aria-hidden="true"
     />
     <div
-      role="dialog"
+      role="none"
     >
       <div
         class="fade modal-backdrop"
@@ -2291,7 +2291,7 @@ Object {
       aria-hidden="true"
     />
     <div
-      role="dialog"
+      role="none"
     >
       <div
         class="fade modal-backdrop"
diff --git a/webapp/channels/src/components/channel_notifications_modal/channel_notifications_modal.tsx b/webapp/channels/src/components/channel_notifications_modal/channel_notifications_modal.tsx
index f9ceb89a877..52bbf8a0bab 100644
--- a/webapp/channels/src/components/channel_notifications_modal/channel_notifications_modal.tsx
+++ b/webapp/channels/src/components/channel_notifications_modal/channel_notifications_modal.tsx
@@ -350,7 +350,7 @@ export default function ChannelNotificationsModal(props: Props) {
             show={show}
             onHide={handleHide}
             onExited={props.onExited}
-            role='dialog'
+            role='none'
             aria-labelledby='channelNotificationModalLabel'
             style={{display: 'flex', placeItems: 'center'}}
         >
diff --git a/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap b/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap
index b636018badb..9c2ae99c14d 100644
--- a/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap
+++ b/webapp/channels/src/components/channel_selector_modal/__snapshots__/channel_selector_modal.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`components/ChannelSelectorModal exclude already selected 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -192,7 +192,7 @@ exports[`components/ChannelSelectorModal should match snapshot 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx b/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx
index b20ce01f3b7..3d0dc0f7d7b 100644
--- a/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx
+++ b/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx
@@ -226,7 +226,7 @@ export class ChannelSelectorModal extends React.PureComponent<Props, State> {
                 show={this.state.show}
                 onHide={this.handleHide}
                 onExited={this.handleExit}
-                role='dialog'
+                role='none'
                 aria-labelledby='channelSelectorModalLabel'
             >
                 <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/cloud_subscribe_result_modal/__snapshots__/success.test.tsx.snap b/webapp/channels/src/components/cloud_subscribe_result_modal/__snapshots__/success.test.tsx.snap
index 42691638be3..6798272cb33 100644
--- a/webapp/channels/src/components/cloud_subscribe_result_modal/__snapshots__/success.test.tsx.snap
+++ b/webapp/channels/src/components/cloud_subscribe_result_modal/__snapshots__/success.test.tsx.snap
@@ -96,7 +96,7 @@ exports[`components/pricing_modal/downgrade_team_removal_modal matches snapshot
               <div
                 aria-modal={true}
                 className="FullScreenModal"
-                role="dialog"
+                role="none"
                 tabIndex={-1}
               >
                 <button
diff --git a/webapp/channels/src/components/confirm_modal.tsx b/webapp/channels/src/components/confirm_modal.tsx
index f4fdc8c00c5..782c1db9a32 100644
--- a/webapp/channels/src/components/confirm_modal.tsx
+++ b/webapp/channels/src/components/confirm_modal.tsx
@@ -174,7 +174,7 @@ export default class ConfirmModal extends React.Component<Props, State> {
                 show={this.props.show}
                 onHide={this.handleCancel}
                 onExited={this.props.onExited}
-                role='dialog'
+                role='none'
                 aria-modal={true}
                 aria-labelledby='confirmModalLabel'
                 aria-describedby='confirmModalBody'
diff --git a/webapp/channels/src/components/convert_channel_modal/convert_channel_modal.tsx b/webapp/channels/src/components/convert_channel_modal/convert_channel_modal.tsx
index e1f92fecb54..61cce837d1c 100644
--- a/webapp/channels/src/components/convert_channel_modal/convert_channel_modal.tsx
+++ b/webapp/channels/src/components/convert_channel_modal/convert_channel_modal.tsx
@@ -63,7 +63,7 @@ export default class ConvertChannelModal extends React.PureComponent<Props, Stat
                 show={this.state.show}
                 onHide={this.onHide}
                 onExited={onExited}
-                role='dialog'
+                role='none'
                 aria-labelledby='convertChannelModalLabel'
             >
                 <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap b/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap
index 00d6bba9275..ed8d12601ed 100644
--- a/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap
+++ b/webapp/channels/src/components/create_user_groups_modal/__snapshots__/create_user_groups_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`component/create_user_groups_modal should match snapshot with back butt
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -175,7 +175,7 @@ exports[`component/create_user_groups_modal should match snapshot without back b
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx b/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx
index ba29eac95c6..f32a0b99f2e 100644
--- a/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx
+++ b/webapp/channels/src/components/create_user_groups_modal/create_user_groups_modal.tsx
@@ -214,7 +214,7 @@ export class CreateUserGroupsModal extends React.PureComponent<Props, State> {
                 show={this.state.show}
                 onHide={this.doHide}
                 onExited={this.props.onExited}
-                role='dialog'
+                role='none'
                 aria-labelledby='createUserGroupsModalLabel'
                 id='createUserGroupsModal'
             >
diff --git a/webapp/channels/src/components/delete_channel_modal/__snapshots__/delete_channel_modal.test.tsx.snap b/webapp/channels/src/components/delete_channel_modal/__snapshots__/delete_channel_modal.test.tsx.snap
index d6224283f0d..5d7e6831319 100644
--- a/webapp/channels/src/components/delete_channel_modal/__snapshots__/delete_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/delete_channel_modal/__snapshots__/delete_channel_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`components/delete_channel_modal should match snapshot for delete_channe
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/delete_channel_modal/delete_channel_modal.tsx b/webapp/channels/src/components/delete_channel_modal/delete_channel_modal.tsx
index 3bde51091f4..cf4628edebf 100644
--- a/webapp/channels/src/components/delete_channel_modal/delete_channel_modal.tsx
+++ b/webapp/channels/src/components/delete_channel_modal/delete_channel_modal.tsx
@@ -57,7 +57,7 @@ export default class DeleteChannelModal extends React.PureComponent<Props, State
                 show={this.state.show}
                 onHide={this.onHide}
                 onExited={this.props.onExited}
-                role='dialog'
+                role='none'
                 aria-labelledby='deleteChannelModalLabel'
                 id='deleteChannelModal'
             >
diff --git a/webapp/channels/src/components/delete_post_modal/__snapshots__/delete_post_modal.test.tsx.snap b/webapp/channels/src/components/delete_post_modal/__snapshots__/delete_post_modal.test.tsx.snap
index 3f856f662e8..d41518fec17 100644
--- a/webapp/channels/src/components/delete_post_modal/__snapshots__/delete_post_modal.test.tsx.snap
+++ b/webapp/channels/src/components/delete_post_modal/__snapshots__/delete_post_modal.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`components/delete_post_modal should match snapshot for delete_post_moda
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -117,7 +117,7 @@ exports[`components/delete_post_modal should match snapshot for delete_post_moda
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -215,7 +215,7 @@ exports[`components/delete_post_modal should match snapshot for post with 1 comm
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/delete_post_modal/delete_post_modal.tsx b/webapp/channels/src/components/delete_post_modal/delete_post_modal.tsx
index 6b010bf95b7..32d73518df5 100644
--- a/webapp/channels/src/components/delete_post_modal/delete_post_modal.tsx
+++ b/webapp/channels/src/components/delete_post_modal/delete_post_modal.tsx
@@ -162,7 +162,7 @@ export default class DeletePostModal extends React.PureComponent<Props, State> {
                 onHide={this.onHide}
                 onExited={this.props.onExited}
                 id='deletePostModal'
-                role='dialog'
+                role='none'
                 aria-labelledby='deletePostModalLabel'
             >
                 <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap b/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap
index 617d24e61b8..91fd7272035 100644
--- a/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap
+++ b/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`components/EditChannelHeaderModal edit direct message channel 1`] = `
   onKeyDown={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -154,7 +154,7 @@ exports[`components/EditChannelHeaderModal error with intl message 1`] = `
   onKeyDown={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -302,7 +302,7 @@ exports[`components/EditChannelHeaderModal error without intl message 1`] = `
   onKeyDown={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -442,7 +442,7 @@ exports[`components/EditChannelHeaderModal should match snapshot, init 1`] = `
   onKeyDown={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -572,7 +572,7 @@ exports[`components/EditChannelHeaderModal submitted 1`] = `
   onKeyDown={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx b/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx
index 8dbb2b02f41..c1e0f093c7c 100644
--- a/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx
+++ b/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx
@@ -214,7 +214,7 @@ export class EditChannelHeaderModal extends React.PureComponent<Props, State> {
                 onHide={this.hideModal}
                 onEntering={this.handleEntering}
                 onExited={this.props.onExited}
-                role='dialog'
+                role='none'
                 aria-labelledby='editChannelHeaderModalLabel'
             >
                 <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/edit_channel_purpose_modal/__snapshots__/edit_channel_purpose_modal.test.tsx.snap b/webapp/channels/src/components/edit_channel_purpose_modal/__snapshots__/edit_channel_purpose_modal.test.tsx.snap
index 0f627b6a5ae..5980e04ad97 100644
--- a/webapp/channels/src/components/edit_channel_purpose_modal/__snapshots__/edit_channel_purpose_modal.test.tsx.snap
+++ b/webapp/channels/src/components/edit_channel_purpose_modal/__snapshots__/edit_channel_purpose_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`comoponents/EditChannelPurposeModal clear error on next 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -141,7 +141,7 @@ exports[`comoponents/EditChannelPurposeModal match with modal error 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -254,7 +254,7 @@ exports[`comoponents/EditChannelPurposeModal match with modal error with fake id
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -367,7 +367,7 @@ exports[`comoponents/EditChannelPurposeModal should match for private channel 1`
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -470,7 +470,7 @@ exports[`comoponents/EditChannelPurposeModal should match on init 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -581,7 +581,7 @@ exports[`comoponents/EditChannelPurposeModal should match submitted 1`] = `
     dialogClassName="a11y__modal"
     handleDialogMouseDown={[Function]}
     onClick={[Function]}
-    role="dialog"
+    role="none"
     style={Object {}}
   >
     <ModalHeader
@@ -685,7 +685,7 @@ exports[`comoponents/EditChannelPurposeModal should match with display name 1`]
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/edit_channel_purpose_modal/edit_channel_purpose_modal.tsx b/webapp/channels/src/components/edit_channel_purpose_modal/edit_channel_purpose_modal.tsx
index 36651c490dc..2fc1f29800f 100644
--- a/webapp/channels/src/components/edit_channel_purpose_modal/edit_channel_purpose_modal.tsx
+++ b/webapp/channels/src/components/edit_channel_purpose_modal/edit_channel_purpose_modal.tsx
@@ -163,7 +163,7 @@ export class EditChannelPurposeModal extends React.PureComponent<Props, State> {
                 onHide={this.onHide}
                 onEntering={this.handleEntering}
                 onExited={this.props.onExited}
-                role='dialog'
+                role='none'
                 aria-labelledby='editChannelPurposeModalLabel'
             >
                 <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/file_preview_modal/__snapshots__/file_preview_modal.test.tsx.snap b/webapp/channels/src/components/file_preview_modal/__snapshots__/file_preview_modal.test.tsx.snap
index 3013dead60d..9d023a9efa1 100644
--- a/webapp/channels/src/components/file_preview_modal/__snapshots__/file_preview_modal.test.tsx.snap
+++ b/webapp/channels/src/components/file_preview_modal/__snapshots__/file_preview_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`components/FilePreviewModal should fall back to default preview if plug
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
   style={
     Object {
@@ -168,7 +168,7 @@ exports[`components/FilePreviewModal should match snapshot 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
   style={
     Object {
@@ -308,7 +308,7 @@ exports[`components/FilePreviewModal should match snapshot for external file 1`]
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
   style={
     Object {
@@ -448,7 +448,7 @@ exports[`components/FilePreviewModal should match snapshot when plugin overrides
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
   style={
     Object {
@@ -626,7 +626,7 @@ exports[`components/FilePreviewModal should match snapshot, loaded 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
   style={
     Object {
@@ -777,7 +777,7 @@ exports[`components/FilePreviewModal should match snapshot, loaded and showing f
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
   style={
     Object {
@@ -928,7 +928,7 @@ exports[`components/FilePreviewModal should match snapshot, loaded with .js file
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
   style={
     Object {
@@ -1081,7 +1081,7 @@ exports[`components/FilePreviewModal should match snapshot, loaded with .m4a fil
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
   style={
     Object {
@@ -1232,7 +1232,7 @@ exports[`components/FilePreviewModal should match snapshot, loaded with .mov fil
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
   style={
     Object {
@@ -1383,7 +1383,7 @@ exports[`components/FilePreviewModal should match snapshot, loaded with footer 1
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
   style={
     Object {
@@ -1534,7 +1534,7 @@ exports[`components/FilePreviewModal should match snapshot, loaded with image 1`
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
   style={
     Object {
@@ -1685,7 +1685,7 @@ exports[`components/FilePreviewModal should match snapshot, loaded with other fi
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
   style={
     Object {
diff --git a/webapp/channels/src/components/file_preview_modal/file_preview_modal.tsx b/webapp/channels/src/components/file_preview_modal/file_preview_modal.tsx
index bd915dc9b23..d177e9c448a 100644
--- a/webapp/channels/src/components/file_preview_modal/file_preview_modal.tsx
+++ b/webapp/channels/src/components/file_preview_modal/file_preview_modal.tsx
@@ -406,7 +406,7 @@ export default class FilePreviewModal extends React.PureComponent<Props, State>
                 dialogClassName={dialogClassName}
                 animation={true}
                 backdrop={false}
-                role='dialog'
+                role='none'
                 style={{paddingLeft: 0}}
                 aria-labelledby='viewImageModalLabel'
             >
diff --git a/webapp/channels/src/components/get_link_modal.tsx b/webapp/channels/src/components/get_link_modal.tsx
index f6148402559..c656f388e38 100644
--- a/webapp/channels/src/components/get_link_modal.tsx
+++ b/webapp/channels/src/components/get_link_modal.tsx
@@ -115,7 +115,7 @@ export default class GetLinkModal extends React.PureComponent<Props, State> {
                 show={this.props.show}
                 onHide={this.onHide}
                 onExited={this.props.onExited}
-                role='dialog'
+                role='none'
                 aria-labelledby='getLinkModalLabel'
             >
                 <Modal.Header
diff --git a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/abstract_outgoing_oauth_connection.test.tsx.snap b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/abstract_outgoing_oauth_connection.test.tsx.snap
index d568d14b5f7..c98d8c94727 100644
--- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/abstract_outgoing_oauth_connection.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/abstract_outgoing_oauth_connection.test.tsx.snap
@@ -527,7 +527,7 @@ exports[`components/integrations/AbstractOutgoingOAuthConnection should match sn
               onHide={[Function]}
               renderBackdrop={[Function]}
               restoreFocus={true}
-              role="dialog"
+              role="none"
               show={false}
             >
               <Modal
@@ -1114,7 +1114,7 @@ exports[`components/integrations/AbstractOutgoingOAuthConnection should match sn
               onHide={[Function]}
               renderBackdrop={[Function]}
               restoreFocus={true}
-              role="dialog"
+              role="none"
               show={false}
             >
               <Modal
diff --git a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/add_outgoing_oauth_connection.test.tsx.snap b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/add_outgoing_oauth_connection.test.tsx.snap
index bf6e134c438..6acb49568d2 100644
--- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/add_outgoing_oauth_connection.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/add_outgoing_oauth_connection.test.tsx.snap
@@ -516,7 +516,7 @@ exports[`components/integrations/AddOutgoingOAuthConnection should match snapsho
                 onHide={[Function]}
                 renderBackdrop={[Function]}
                 restoreFocus={true}
-                role="dialog"
+                role="none"
                 show={false}
               >
                 <Modal
diff --git a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/edit_outgoing_oauth_connection.test.tsx.snap b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/edit_outgoing_oauth_connection.test.tsx.snap
index 7c94df7dedf..5268a3a62ad 100644
--- a/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/edit_outgoing_oauth_connection.test.tsx.snap
+++ b/webapp/channels/src/components/integrations/outgoing_oauth_connections/__snapshots__/edit_outgoing_oauth_connection.test.tsx.snap
@@ -577,7 +577,7 @@ https://myothersite.com/api/v2"
                       onHide={[Function]}
                       renderBackdrop={[Function]}
                       restoreFocus={true}
-                      role="dialog"
+                      role="none"
                       show={false}
                     >
                       <Modal
@@ -678,7 +678,7 @@ https://myothersite.com/api/v2"
                 onHide={[Function]}
                 renderBackdrop={[Function]}
                 restoreFocus={true}
-                role="dialog"
+                role="none"
                 show={false}
               >
                 <Modal
@@ -1297,7 +1297,7 @@ https://myothersite.com/api/v2"
                       onHide={[Function]}
                       renderBackdrop={[Function]}
                       restoreFocus={true}
-                      role="dialog"
+                      role="none"
                       show={false}
                     >
                       <Modal
@@ -1398,7 +1398,7 @@ https://myothersite.com/api/v2"
                 onHide={[Function]}
                 renderBackdrop={[Function]}
                 restoreFocus={true}
-                role="dialog"
+                role="none"
                 show={false}
               >
                 <Modal
@@ -2016,7 +2016,7 @@ https://myothersite.com/api/v2"
                       onHide={[Function]}
                       renderBackdrop={[Function]}
                       restoreFocus={true}
-                      role="dialog"
+                      role="none"
                       show={false}
                     >
                       <Modal
@@ -2117,7 +2117,7 @@ https://myothersite.com/api/v2"
                 onHide={[Function]}
                 renderBackdrop={[Function]}
                 restoreFocus={true}
-                role="dialog"
+                role="none"
                 show={false}
               >
                 <Modal
diff --git a/webapp/channels/src/components/interactive_dialog/interactive_dialog.tsx b/webapp/channels/src/components/interactive_dialog/interactive_dialog.tsx
index f5f1bd53cc8..8915050a5b6 100644
--- a/webapp/channels/src/components/interactive_dialog/interactive_dialog.tsx
+++ b/webapp/channels/src/components/interactive_dialog/interactive_dialog.tsx
@@ -203,7 +203,7 @@ export default class InteractiveDialog extends React.PureComponent<Props, State>
                 onHide={this.onHide}
                 onExited={this.props.onExited}
                 backdrop='static'
-                role='dialog'
+                role='none'
                 aria-labelledby='interactiveDialogModalLabel'
             >
                 <form
diff --git a/webapp/channels/src/components/invitation_modal/invitation_modal.tsx b/webapp/channels/src/components/invitation_modal/invitation_modal.tsx
index 0d97fa3193f..c68e84661a6 100644
--- a/webapp/channels/src/components/invitation_modal/invitation_modal.tsx
+++ b/webapp/channels/src/components/invitation_modal/invitation_modal.tsx
@@ -424,7 +424,7 @@ export default class InvitationModal extends React.PureComponent<Props, State> {
                 show={this.state.show}
                 onHide={this.handleHide}
                 onExited={this.props.onExited}
-                role='dialog'
+                role='none'
                 backdrop={this.getBackdrop()}
                 aria-modal='true'
                 aria-labelledby='invitation_modal_title'
diff --git a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap
index 6d30b132a9a..10f1c640a7b 100644
--- a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap
+++ b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/__snapshots__/keyboard_shortcuts_modal.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <div
@@ -674,7 +674,7 @@ exports[`components/KeyboardShortcutsModal should match snapshot modal with Call
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <div
diff --git a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx
index ecde1d8fa09..f098fa4363a 100644
--- a/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx
+++ b/webapp/channels/src/components/keyboard_shortcuts/keyboard_shortcuts_modal/keyboard_shortcuts_modal.tsx
@@ -115,7 +115,7 @@ const KeyboardShortcutsModal = ({onExited}: Props): JSX.Element => {
             show={show}
             onHide={handleHide}
             onExited={onExited}
-            role='dialog'
+            role='none'
             aria-labelledby='shortcutsModalLabel'
         >
             <div className='shortcuts-content'>
diff --git a/webapp/channels/src/components/leave_team_modal/__snapshots__/leave_team_modal.test.tsx.snap b/webapp/channels/src/components/leave_team_modal/__snapshots__/leave_team_modal.test.tsx.snap
index 2c9e43c1ed8..c19ba633cbf 100644
--- a/webapp/channels/src/components/leave_team_modal/__snapshots__/leave_team_modal.test.tsx.snap
+++ b/webapp/channels/src/components/leave_team_modal/__snapshots__/leave_team_modal.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`components/LeaveTeamModal should render the leave team model 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/leave_team_modal/leave_team_modal.tsx b/webapp/channels/src/components/leave_team_modal/leave_team_modal.tsx
index a66ccd38ebb..ebacb84f66a 100644
--- a/webapp/channels/src/components/leave_team_modal/leave_team_modal.tsx
+++ b/webapp/channels/src/components/leave_team_modal/leave_team_modal.tsx
@@ -158,7 +158,7 @@ export default class LeaveTeamModal extends React.PureComponent<Props, State> {
                 onExited={this.props.onExited}
                 onHide={this.handleHide}
                 id='leaveTeamModal'
-                role='dialog'
+                role='none'
                 aria-labelledby='leaveTeamModalLabel'
             >
                 <Modal.Header closeButton={false}>
diff --git a/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap b/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
index 8a817dd3754..8a60a88ea5c 100644
--- a/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
+++ b/webapp/channels/src/components/more_direct_channels/__snapshots__/more_direct_channels.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`components/MoreDirectChannels should exclude deleted users if there is
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
@@ -320,7 +320,7 @@ exports[`components/MoreDirectChannels should match snapshot 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
index fa2bb9c1ceb..950b4b9a1b7 100644
--- a/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
+++ b/webapp/channels/src/components/more_direct_channels/more_direct_channels.tsx
@@ -291,7 +291,7 @@ export default class MoreDirectChannels extends React.PureComponent<Props, State
                 onHide={this.handleHide}
                 onExited={this.handleExit}
                 onEntered={this.loadModalData}
-                role='dialog'
+                role='none'
                 aria-labelledby='moreDmModalLabel'
                 id='moreDmModal'
             >
diff --git a/webapp/channels/src/components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal.tsx b/webapp/channels/src/components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal.tsx
index c5a0c34520c..fbe88450fcf 100644
--- a/webapp/channels/src/components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal.tsx
+++ b/webapp/channels/src/components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal.tsx
@@ -39,7 +39,7 @@ const OnBoardingVideoModal = ({onExited}: Props) => {
             onHide={handleHide}
             onExited={onExited}
             enforceFocus={false}
-            role='dialog'
+            role='none'
             aria-labelledby='onBoardingVideoModal'
         >
             <Modal.Header
diff --git a/webapp/channels/src/components/plugin_marketplace/__snapshots__/marketplace_modal.test.tsx.snap b/webapp/channels/src/components/plugin_marketplace/__snapshots__/marketplace_modal.test.tsx.snap
index 2ada7c2e660..681dab9f297 100644
--- a/webapp/channels/src/components/plugin_marketplace/__snapshots__/marketplace_modal.test.tsx.snap
+++ b/webapp/channels/src/components/plugin_marketplace/__snapshots__/marketplace_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`components/marketplace/ doesn't show web marketplace banner in FeatureF
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <div
@@ -118,7 +118,7 @@ exports[`components/marketplace/ hides search, shows web marketplace banner in F
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <div
@@ -209,7 +209,7 @@ exports[`components/marketplace/ should render default 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <div
@@ -351,7 +351,7 @@ exports[`components/marketplace/ should render with error banner 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <div
@@ -510,7 +510,7 @@ exports[`components/marketplace/ should render with no plugins available 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <div
@@ -660,7 +660,7 @@ exports[`components/marketplace/ should render with plugins available 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <div
@@ -828,7 +828,7 @@ exports[`components/marketplace/ should render with plugins installed 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <div
diff --git a/webapp/channels/src/components/post_deleted_modal.tsx b/webapp/channels/src/components/post_deleted_modal.tsx
index 034e1551a18..71eb9661c82 100644
--- a/webapp/channels/src/components/post_deleted_modal.tsx
+++ b/webapp/channels/src/components/post_deleted_modal.tsx
@@ -22,7 +22,7 @@ const PostDeletedModal = ({
             show={show}
             onHide={handleHide}
             onExited={onExited}
-            role='dialog'
+            role='none'
             aria-labelledby='postDeletedModalLabel'
             data-testid='postDeletedModal'
         >
diff --git a/webapp/channels/src/components/pricing_modal/index.tsx b/webapp/channels/src/components/pricing_modal/index.tsx
index 6f4b7d66ea2..5bd18719086 100644
--- a/webapp/channels/src/components/pricing_modal/index.tsx
+++ b/webapp/channels/src/components/pricing_modal/index.tsx
@@ -64,7 +64,7 @@ function PricingModal(props: Props) {
             data-testid='pricingModal'
             dialogClassName='a11y__modal'
             onHide={onHide}
-            role='dialog'
+            role='none'
             aria-modal='true'
             aria-labelledby='pricing_modal_title'
         >
diff --git a/webapp/channels/src/components/quick_switch_modal/__snapshots__/quick_switch_modal.test.tsx.snap b/webapp/channels/src/components/quick_switch_modal/__snapshots__/quick_switch_modal.test.tsx.snap
index 055c5e94a52..0754ce1572f 100644
--- a/webapp/channels/src/components/quick_switch_modal/__snapshots__/quick_switch_modal.test.tsx.snap
+++ b/webapp/channels/src/components/quick_switch_modal/__snapshots__/quick_switch_modal.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`components/QuickSwitchModal should match snapshot 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={false}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx b/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx
index 75e440c9d60..d9ee86acaf7 100644
--- a/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx
+++ b/webapp/channels/src/components/quick_switch_modal/quick_switch_modal.tsx
@@ -203,7 +203,7 @@ export default class QuickSwitchModal extends React.PureComponent<Props, State>
                 onHide={this.hideOnCancel}
                 enforceFocus={false}
                 restoreFocus={false}
-                role='dialog'
+                role='none'
                 aria-labelledby='quickSwitchHeader'
                 aria-describedby='quickSwitchHeaderWithHint'
                 animation={false}
diff --git a/webapp/channels/src/components/removed_from_channel_modal/__snapshots__/removed_from_channel_modal.test.tsx.snap b/webapp/channels/src/components/removed_from_channel_modal/__snapshots__/removed_from_channel_modal.test.tsx.snap
index 1225da50535..94ec1275a9e 100644
--- a/webapp/channels/src/components/removed_from_channel_modal/__snapshots__/removed_from_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/removed_from_channel_modal/__snapshots__/removed_from_channel_modal.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`components/RemoveFromChannelModal should match snapshot 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/removed_from_channel_modal/removed_from_channel_modal.tsx b/webapp/channels/src/components/removed_from_channel_modal/removed_from_channel_modal.tsx
index a988e8f7c2f..89a738872b6 100644
--- a/webapp/channels/src/components/removed_from_channel_modal/removed_from_channel_modal.tsx
+++ b/webapp/channels/src/components/removed_from_channel_modal/removed_from_channel_modal.tsx
@@ -61,7 +61,7 @@ export default class RemovedFromChannelModal extends React.PureComponent<Props,
                 show={this.state.show}
                 onHide={this.onHide}
                 onExited={this.props.onExited}
-                role='dialog'
+                role='none'
                 aria-labelledby='removeFromChannelModalLabel'
             >
                 <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap b/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
index 4461507bfd3..660502cee28 100644
--- a/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`components/RenameChannelModal should match snapshot 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx b/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
index 59582e0ab43..45b5772d749 100644
--- a/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
+++ b/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
@@ -263,7 +263,7 @@ export class RenameChannelModal extends React.PureComponent<Props, State> {
                 onHide={this.handleCancel}
                 onEntering={this.handleEntering}
                 onExited={this.props.onExited}
-                role='dialog'
+                role='none'
                 aria-labelledby='renameChannelModalLabel'
             >
                 <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap b/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap
index d7a24da305d..36ba7d65709 100644
--- a/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap
+++ b/webapp/channels/src/components/start_trial_form_modal/__snapshots__/start_trial_form_modal.test.tsx.snap
@@ -11,7 +11,7 @@ Object {
       aria-hidden="true"
     />
     <div
-      role="dialog"
+      role="none"
     >
       <div
         class="fade modal-backdrop in"
diff --git a/webapp/channels/src/components/start_trial_form_modal/air_gapped_modal.tsx b/webapp/channels/src/components/start_trial_form_modal/air_gapped_modal.tsx
index e1257af1f53..bc708abbe0f 100644
--- a/webapp/channels/src/components/start_trial_form_modal/air_gapped_modal.tsx
+++ b/webapp/channels/src/components/start_trial_form_modal/air_gapped_modal.tsx
@@ -30,7 +30,7 @@ function AirGappedModal({onClose}: Props) {
             dialogClassName={'AirGappedModal__dialog'}
             show={true}
             id='airGappedModal'
-            role='dialog'
+            role='none'
             onHide={() => onClose?.()}
         >
             <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/start_trial_form_modal/index.tsx b/webapp/channels/src/components/start_trial_form_modal/index.tsx
index c3ff998613f..600a1bed569 100644
--- a/webapp/channels/src/components/start_trial_form_modal/index.tsx
+++ b/webapp/channels/src/components/start_trial_form_modal/index.tsx
@@ -267,7 +267,7 @@ function StartTrialFormModal(props: Props): JSX.Element | null {
             dialogClassName='a11y__modal'
             show={show}
             id='StartTrialFormModal'
-            role='dialog'
+            role='none'
             onHide={handleOnClose}
         >
             <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/team_members_modal/__snapshots__/team_members_modal.test.tsx.snap b/webapp/channels/src/components/team_members_modal/__snapshots__/team_members_modal.test.tsx.snap
index 6a83511637a..8622195bddd 100644
--- a/webapp/channels/src/components/team_members_modal/__snapshots__/team_members_modal.test.tsx.snap
+++ b/webapp/channels/src/components/team_members_modal/__snapshots__/team_members_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`components/TeamMembersModal should match snapshot 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/team_members_modal/team_members_modal.tsx b/webapp/channels/src/components/team_members_modal/team_members_modal.tsx
index 76e1af16d5c..b74543ed9fa 100644
--- a/webapp/channels/src/components/team_members_modal/team_members_modal.tsx
+++ b/webapp/channels/src/components/team_members_modal/team_members_modal.tsx
@@ -72,7 +72,7 @@ export default class TeamMembersModal extends React.PureComponent<Props, State>
                 show={this.state.show}
                 onHide={this.handleHide}
                 onExited={this.props.onExited}
-                role='dialog'
+                role='none'
                 aria-labelledby='teamMemberModalLabel'
                 id='teamMembersModal'
             >
diff --git a/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx b/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx
index bcb0fb41a91..1a1cab14f59 100644
--- a/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx
+++ b/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx
@@ -278,7 +278,7 @@ export class TeamSelectorModal extends React.PureComponent<Props, State> {
                 show={this.state.show}
                 onHide={this.handleHide}
                 onExited={this.handleExit}
-                role='dialog'
+                role='none'
                 aria-labelledby='teamSelectorModalLabel'
             >
                 <Modal.Header closeButton={true}>
diff --git a/webapp/channels/src/components/team_settings_modal/team_settings_modal.tsx b/webapp/channels/src/components/team_settings_modal/team_settings_modal.tsx
index 0aa75da164f..38f4affff49 100644
--- a/webapp/channels/src/components/team_settings_modal/team_settings_modal.tsx
+++ b/webapp/channels/src/components/team_settings_modal/team_settings_modal.tsx
@@ -61,7 +61,7 @@ const TeamSettingsModal = ({onExited, canInviteUsers}: Props) => {
             show={show}
             onHide={handleHide}
             onExited={handleClose}
-            role='dialog'
+            role='none'
             aria-labelledby='teamSettingsModalLabel'
             id='teamSettingsModal'
         >
diff --git a/webapp/channels/src/components/unarchive_channel_modal/__snapshots__/unarchive_channel_modal.test.tsx.snap b/webapp/channels/src/components/unarchive_channel_modal/__snapshots__/unarchive_channel_modal.test.tsx.snap
index 153470e12c0..998ffbcf225 100644
--- a/webapp/channels/src/components/unarchive_channel_modal/__snapshots__/unarchive_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/unarchive_channel_modal/__snapshots__/unarchive_channel_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`components/unarchive_channel_modal should match snapshot for unarchive_
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/unarchive_channel_modal/unarchive_channel_modal.tsx b/webapp/channels/src/components/unarchive_channel_modal/unarchive_channel_modal.tsx
index 1b932a28073..c246b27ca72 100644
--- a/webapp/channels/src/components/unarchive_channel_modal/unarchive_channel_modal.tsx
+++ b/webapp/channels/src/components/unarchive_channel_modal/unarchive_channel_modal.tsx
@@ -51,7 +51,7 @@ export default class UnarchiveChannelModal extends React.PureComponent<Props, St
                 show={this.state.show}
                 onHide={this.onHide}
                 onExited={this.props.onExited}
-                role='dialog'
+                role='none'
                 aria-labelledby='unarchiveChannelModalLabel'
                 id='unarchiveChannelModal'
             >
diff --git a/webapp/channels/src/components/update_user_group_modal/__snapshots__/update_user_group_modal.test.tsx.snap b/webapp/channels/src/components/update_user_group_modal/__snapshots__/update_user_group_modal.test.tsx.snap
index ba69b8ac2e8..ca76d1af443 100644
--- a/webapp/channels/src/components/update_user_group_modal/__snapshots__/update_user_group_modal.test.tsx.snap
+++ b/webapp/channels/src/components/update_user_group_modal/__snapshots__/update_user_group_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`component/update_user_group_modal should match snapshot 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalHeader
diff --git a/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.tsx b/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.tsx
index 00c8b465096..81e702bcbca 100644
--- a/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.tsx
+++ b/webapp/channels/src/components/update_user_group_modal/update_user_group_modal.tsx
@@ -166,7 +166,7 @@ const UpdateUserGroupModal = ({
             show={show}
             onHide={doHide}
             onExited={onExited}
-            role='dialog'
+            role='none'
             aria-labelledby='createUserGroupsModalLabel'
             id='createUserGroupsModal'
         >
diff --git a/webapp/channels/src/components/user_groups_modal/__snapshots__/user_groups_modal.test.tsx.snap b/webapp/channels/src/components/user_groups_modal/__snapshots__/user_groups_modal.test.tsx.snap
index 1db24705976..695d666449a 100644
--- a/webapp/channels/src/components/user_groups_modal/__snapshots__/user_groups_modal.test.tsx.snap
+++ b/webapp/channels/src/components/user_groups_modal/__snapshots__/user_groups_modal.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`component/user_groups_modal should match snapshot with groups 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <Connect(Component)
@@ -154,7 +154,7 @@ exports[`component/user_groups_modal should match snapshot without groups 1`] =
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <Connect(Component)
diff --git a/webapp/channels/src/components/user_groups_modal/user_groups_modal.tsx b/webapp/channels/src/components/user_groups_modal/user_groups_modal.tsx
index a974692479e..b2482e9b7a1 100644
--- a/webapp/channels/src/components/user_groups_modal/user_groups_modal.tsx
+++ b/webapp/channels/src/components/user_groups_modal/user_groups_modal.tsx
@@ -186,7 +186,7 @@ const UserGroupsModal = (props: Props) => {
             show={show}
             onHide={doHide}
             onExited={props.onExited}
-            role='dialog'
+            role='none'
             aria-labelledby='userGroupsModalLabel'
             id='userGroupsModal'
         >
diff --git a/webapp/channels/src/components/view_user_group_modal/__snapshots__/view_user_group_modal.test.tsx.snap b/webapp/channels/src/components/view_user_group_modal/__snapshots__/view_user_group_modal.test.tsx.snap
index 3b9acae069d..30e93b0dd68 100644
--- a/webapp/channels/src/components/view_user_group_modal/__snapshots__/view_user_group_modal.test.tsx.snap
+++ b/webapp/channels/src/components/view_user_group_modal/__snapshots__/view_user_group_modal.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`component/view_user_group_modal should match snapshot 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <Connect(Component)
diff --git a/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.tsx b/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.tsx
index 3960e5d5e11..a991af518c0 100644
--- a/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.tsx
+++ b/webapp/channels/src/components/view_user_group_modal/view_user_group_modal.tsx
@@ -198,7 +198,7 @@ export default class ViewUserGroupModal extends React.PureComponent<Props, State
                 show={this.state.show}
                 onHide={this.doHide}
                 onExited={onExited}
-                role='dialog'
+                role='none'
                 aria-labelledby='viewUserGroupModalLabel'
             >
                 <ViewUserGroupModalHeader
diff --git a/webapp/channels/src/components/widgets/menu/menu_modals/submenu_modal/__snapshots__/submenu_modal.test.tsx.snap b/webapp/channels/src/components/widgets/menu/menu_modals/submenu_modal/__snapshots__/submenu_modal.test.tsx.snap
index cf706f20289..05a716020ed 100644
--- a/webapp/channels/src/components/widgets/menu/menu_modals/submenu_modal/__snapshots__/submenu_modal.test.tsx.snap
+++ b/webapp/channels/src/components/widgets/menu/menu_modals/submenu_modal/__snapshots__/submenu_modal.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`components/submenu_modal should match snapshot 1`] = `
   onHide={[Function]}
   renderBackdrop={[Function]}
   restoreFocus={true}
-  role="dialog"
+  role="none"
   show={true}
 >
   <ModalBody
diff --git a/webapp/channels/src/components/widgets/menu/menu_modals/submenu_modal/submenu_modal.tsx b/webapp/channels/src/components/widgets/menu/menu_modals/submenu_modal/submenu_modal.tsx
index 1f75c74c3b9..fb3f79c4114 100644
--- a/webapp/channels/src/components/widgets/menu/menu_modals/submenu_modal/submenu_modal.tsx
+++ b/webapp/channels/src/components/widgets/menu/menu_modals/submenu_modal/submenu_modal.tsx
@@ -53,7 +53,7 @@ const SubMenuModal = ({
             onExited={onExited}
             enforceFocus={false}
             id='submenuModal'
-            role='dialog'
+            role='none'
         >
             <Modal.Body
                 data-testid={'SubMenuModalBody'}
diff --git a/webapp/channels/src/components/widgets/modals/full_screen_modal.test.tsx b/webapp/channels/src/components/widgets/modals/full_screen_modal.test.tsx
index 6c72e4f12cc..fee2c1b6604 100644
--- a/webapp/channels/src/components/widgets/modals/full_screen_modal.test.tsx
+++ b/webapp/channels/src/components/widgets/modals/full_screen_modal.test.tsx
@@ -19,42 +19,42 @@ describe('components/widgets/modals/FullScreenModal', () => {
             </FullScreenModal>,
         );
         expect(wrapper).toMatchInlineSnapshot(`
-<CSSTransition
-  appear={true}
-  classNames="FullScreenModal"
-  in={true}
-  mountOnEnter={true}
-  timeout={100}
-  unmountOnExit={true}
->
-  <div
-    aria-label="test"
-    aria-modal={true}
-    className="FullScreenModal"
-    role="dialog"
-    tabIndex={-1}
-  >
-    <button
-      aria-label="Close"
-      className="close-x"
-      onClick={[Function]}
-    >
-      <CloseIcon
-        id="closeIcon"
-      />
-    </button>
-    test
-  </div>
-  <div
-    style={
-      Object {
-        "display": "none",
-      }
-    }
-    tabIndex={0}
-  />
-</CSSTransition>
-`);
+            <CSSTransition
+              appear={true}
+              classNames="FullScreenModal"
+              in={true}
+              mountOnEnter={true}
+              timeout={100}
+              unmountOnExit={true}
+            >
+              <div
+                aria-label="test"
+                aria-modal={true}
+                className="FullScreenModal"
+                role="none"
+                tabIndex={-1}
+              >
+                <button
+                  aria-label="Close"
+                  className="close-x"
+                  onClick={[Function]}
+                >
+                  <CloseIcon
+                    id="closeIcon"
+                  />
+                </button>
+                test
+              </div>
+              <div
+                style={
+                  Object {
+                    "display": "none",
+                  }
+                }
+                tabIndex={0}
+              />
+            </CSSTransition>
+        `);
     });
     test('not showing content', () => {
         const wrapper = shallowWithIntl(
@@ -67,42 +67,42 @@ describe('components/widgets/modals/FullScreenModal', () => {
             </FullScreenModal>,
         );
         expect(wrapper).toMatchInlineSnapshot(`
-<CSSTransition
-  appear={true}
-  classNames="FullScreenModal"
-  in={false}
-  mountOnEnter={true}
-  timeout={100}
-  unmountOnExit={true}
->
-  <div
-    aria-label="test"
-    aria-modal={true}
-    className="FullScreenModal"
-    role="dialog"
-    tabIndex={-1}
-  >
-    <button
-      aria-label="Close"
-      className="close-x"
-      onClick={[Function]}
-    >
-      <CloseIcon
-        id="closeIcon"
-      />
-    </button>
-    test
-  </div>
-  <div
-    style={
-      Object {
-        "display": "none",
-      }
-    }
-    tabIndex={0}
-  />
-</CSSTransition>
-`);
+            <CSSTransition
+              appear={true}
+              classNames="FullScreenModal"
+              in={false}
+              mountOnEnter={true}
+              timeout={100}
+              unmountOnExit={true}
+            >
+              <div
+                aria-label="test"
+                aria-modal={true}
+                className="FullScreenModal"
+                role="none"
+                tabIndex={-1}
+              >
+                <button
+                  aria-label="Close"
+                  className="close-x"
+                  onClick={[Function]}
+                >
+                  <CloseIcon
+                    id="closeIcon"
+                  />
+                </button>
+                test
+              </div>
+              <div
+                style={
+                  Object {
+                    "display": "none",
+                  }
+                }
+                tabIndex={0}
+              />
+            </CSSTransition>
+        `);
     });
     test('with back icon', () => {
         const wrapper = shallowWithIntl(
@@ -116,51 +116,51 @@ describe('components/widgets/modals/FullScreenModal', () => {
             </FullScreenModal>,
         );
         expect(wrapper).toMatchInlineSnapshot(`
-<CSSTransition
-  appear={true}
-  classNames="FullScreenModal"
-  in={true}
-  mountOnEnter={true}
-  timeout={100}
-  unmountOnExit={true}
->
-  <div
-    aria-label="test"
-    aria-modal={true}
-    className="FullScreenModal"
-    role="dialog"
-    tabIndex={-1}
-  >
-    <button
-      aria-label="Back"
-      className="back"
-      onClick={[MockFunction]}
-    >
-      <BackIcon
-        id="backIcon"
-      />
-    </button>
-    <button
-      aria-label="Close"
-      className="close-x"
-      onClick={[Function]}
-    >
-      <CloseIcon
-        id="closeIcon"
-      />
-    </button>
-    test
-  </div>
-  <div
-    style={
-      Object {
-        "display": "none",
-      }
-    }
-    tabIndex={0}
-  />
-</CSSTransition>
-`);
+            <CSSTransition
+              appear={true}
+              classNames="FullScreenModal"
+              in={true}
+              mountOnEnter={true}
+              timeout={100}
+              unmountOnExit={true}
+            >
+              <div
+                aria-label="test"
+                aria-modal={true}
+                className="FullScreenModal"
+                role="none"
+                tabIndex={-1}
+              >
+                <button
+                  aria-label="Back"
+                  className="back"
+                  onClick={[MockFunction]}
+                >
+                  <BackIcon
+                    id="backIcon"
+                  />
+                </button>
+                <button
+                  aria-label="Close"
+                  className="close-x"
+                  onClick={[Function]}
+                >
+                  <CloseIcon
+                    id="closeIcon"
+                  />
+                </button>
+                test
+              </div>
+              <div
+                style={
+                  Object {
+                    "display": "none",
+                  }
+                }
+                tabIndex={0}
+              />
+            </CSSTransition>
+        `);
     });
 
     test('close on close icon click', () => {
diff --git a/webapp/channels/src/components/widgets/modals/full_screen_modal.tsx b/webapp/channels/src/components/widgets/modals/full_screen_modal.tsx
index f68436af395..fd81521bb06 100644
--- a/webapp/channels/src/components/widgets/modals/full_screen_modal.tsx
+++ b/webapp/channels/src/components/widgets/modals/full_screen_modal.tsx
@@ -84,7 +84,7 @@ class FullScreenModal extends React.PureComponent<Props> {
                         aria-modal={true}
                         aria-label={this.props.ariaLabel}
                         aria-labelledby={this.props.ariaLabelledBy}
-                        role='dialog'
+                        role='none'
                     >
                         {this.props.onGoBack &&
                             <button
diff --git a/webapp/platform/components/src/generic_modal/generic_modal.tsx b/webapp/platform/components/src/generic_modal/generic_modal.tsx
index d7dc17c9190..a48a16768ee 100644
--- a/webapp/platform/components/src/generic_modal/generic_modal.tsx
+++ b/webapp/platform/components/src/generic_modal/generic_modal.tsx
@@ -179,7 +179,7 @@ export class GenericModal extends React.PureComponent<Props, State> {
         return (
             <Modal
                 id={this.props.id}
-                role='dialog'
+                role='none'
                 aria-label={this.props.ariaLabel}
                 aria-labelledby={this.props.ariaLabel ? undefined : 'genericModalLabel'}
                 dialogClassName={classNames(