MM-61897 - fix duplicated role dialog in boostrap modals (#29507)

* MM-61897 - fix duplicated role dialog in modals

* fix linter

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

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

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}>

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}>

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

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}>

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

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}>

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

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}>

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

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'
         >

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}>

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}>

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

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}>

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

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}>

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}
         >

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

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'
             >

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

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}>

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

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'
         >

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}>

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

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

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

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

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

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'
                 >

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"

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'}}
         >

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

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}>

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

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'

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}>

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

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'
             >

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

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'
             >

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

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}>

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

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}>

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

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}>

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 {

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'
             >

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

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

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

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

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

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'

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

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'>

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

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}>

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

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'
             >

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

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

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'
         >

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'
         >

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

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}

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

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}>

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

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}>

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"

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}>

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}>

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

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'
             >

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}>

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'
         >

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

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'
             >

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

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'
         >

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)

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'
         >

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)

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

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

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'}

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
+            <CSSTransition
-  appear={true}
+              appear={true}
-  classNames="FullScreenModal"
+              classNames="FullScreenModal"
-  in={true}
+              in={true}
-  mountOnEnter={true}
+              mountOnEnter={true}
-  timeout={100}
+              timeout={100}
-  unmountOnExit={true}
+              unmountOnExit={true}
->
+            >
-  <div
+              <div
-    aria-label="test"
+                aria-label="test"
-    aria-modal={true}
+                aria-modal={true}
-    className="FullScreenModal"
+                className="FullScreenModal"
-    role="dialog"
+                role="none"
-    tabIndex={-1}
+                tabIndex={-1}
-  >
+              >
-    <button
+                <button
-      aria-label="Close"
+                  aria-label="Close"
-      className="close-x"
+                  className="close-x"
-      onClick={[Function]}
+                  onClick={[Function]}
-    >
+                >
-      <CloseIcon
+                  <CloseIcon
-        id="closeIcon"
+                    id="closeIcon"
-      />
+                  />
-    </button>
+                </button>
-    test
+                test
-  </div>
+              </div>
-  <div
+              <div
-    style={
+                style={
-      Object {
+                  Object {
-        "display": "none",
+                    "display": "none",
-      }
+                  }
-    }
+                }
-    tabIndex={0}
+                tabIndex={0}
-  />
+              />
-</CSSTransition>
+            </CSSTransition>
-`);
+        `);
     });
     test('not showing content', () => {
         const wrapper = shallowWithIntl(
@@ -67,42 +67,42 @@ describe('components/widgets/modals/FullScreenModal', () => {
             </FullScreenModal>,
         );
         expect(wrapper).toMatchInlineSnapshot(`
-<CSSTransition
+            <CSSTransition
-  appear={true}
+              appear={true}
-  classNames="FullScreenModal"
+              classNames="FullScreenModal"
-  in={false}
+              in={false}
-  mountOnEnter={true}
+              mountOnEnter={true}
-  timeout={100}
+              timeout={100}
-  unmountOnExit={true}
+              unmountOnExit={true}
->
+            >
-  <div
+              <div
-    aria-label="test"
+                aria-label="test"
-    aria-modal={true}
+                aria-modal={true}
-    className="FullScreenModal"
+                className="FullScreenModal"
-    role="dialog"
+                role="none"
-    tabIndex={-1}
+                tabIndex={-1}
-  >
+              >
-    <button
+                <button
-      aria-label="Close"
+                  aria-label="Close"
-      className="close-x"
+                  className="close-x"
-      onClick={[Function]}
+                  onClick={[Function]}
-    >
+                >
-      <CloseIcon
+                  <CloseIcon
-        id="closeIcon"
+                    id="closeIcon"
-      />
+                  />
-    </button>
+                </button>
-    test
+                test
-  </div>
+              </div>
-  <div
+              <div
-    style={
+                style={
-      Object {
+                  Object {
-        "display": "none",
+                    "display": "none",
-      }
+                  }
-    }
+                }
-    tabIndex={0}
+                tabIndex={0}
-  />
+              />
-</CSSTransition>
+            </CSSTransition>
-`);
+        `);
     });
     test('with back icon', () => {
         const wrapper = shallowWithIntl(
@@ -116,51 +116,51 @@ describe('components/widgets/modals/FullScreenModal', () => {
             </FullScreenModal>,
         );
         expect(wrapper).toMatchInlineSnapshot(`
-<CSSTransition
+            <CSSTransition
-  appear={true}
+              appear={true}
-  classNames="FullScreenModal"
+              classNames="FullScreenModal"
-  in={true}
+              in={true}
-  mountOnEnter={true}
+              mountOnEnter={true}
-  timeout={100}
+              timeout={100}
-  unmountOnExit={true}
+              unmountOnExit={true}
->
+            >
-  <div
+              <div
-    aria-label="test"
+                aria-label="test"
-    aria-modal={true}
+                aria-modal={true}
-    className="FullScreenModal"
+                className="FullScreenModal"
-    role="dialog"
+                role="none"
-    tabIndex={-1}
+                tabIndex={-1}
-  >
+              >
-    <button
+                <button
-      aria-label="Back"
+                  aria-label="Back"
-      className="back"
+                  className="back"
-      onClick={[MockFunction]}
+                  onClick={[MockFunction]}
-    >
+                >
-      <BackIcon
+                  <BackIcon
-        id="backIcon"
+                    id="backIcon"
-      />
+                  />
-    </button>
+                </button>
-    <button
+                <button
-      aria-label="Close"
+                  aria-label="Close"
-      className="close-x"
+                  className="close-x"
-      onClick={[Function]}
+                  onClick={[Function]}
-    >
+                >
-      <CloseIcon
+                  <CloseIcon
-        id="closeIcon"
+                    id="closeIcon"
-      />
+                  />
-    </button>
+                </button>
-    test
+                test
-  </div>
+              </div>
-  <div
+              <div
-    style={
+                style={
-      Object {
+                  Object {
-        "display": "none",
+                    "display": "none",
-      }
+                  }
-    }
+                }
-    tabIndex={0}
+                tabIndex={0}
-  />
+              />
-</CSSTransition>
+            </CSSTransition>
-`);
+        `);
     });
 
     test('close on close icon click', () => {

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

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(