refactor(chat): Don't display chat inside a dialog

* In order to be able to customize the background of the chat
it had not be displayed inside of a dialog. This also removes
the need to extensively use 'TouchmoveHack' component.

* Adds the ability to change panes (Chat vs Polls) using the keyboard.

* Adds accessibility attributes to panes.

css/_chat.scss

@@ -2,34 +2,39 @@
     background-color: $chatBackgroundColor;
     box-sizing: border-box;
     color: #FFF;
-    display: flex;
-    flex-direction: column;
     height: 100%;
-    left: -$sidebarWidth;
-    overflow: hidden;
     position: absolute;
     top: 0;
     width: $sidebarWidth;
     z-index: $sideToolbarContainerZ;
 
-    /**
-     * The sidebar (chat) is off-screen when hidden. Move it flush to the left
-     * side of the window when it should be visible.
-     */
-    &.slideInExt {
-        left: 0;
+    @media (max-width: 580px) {
+        width: 100%;
     }
 }
 
+.chat-panel {
+    display: flex;
+    flex-direction: column;
+    // extract header + tabs height
+    height: calc(100% - 102px);
+}
+
+.chat-panel-no-tabs {
+    // extract header height
+    height: calc(100% - 70px);
+}
+
 #chatconversation {
     box-sizing: border-box;
     flex: 1;
     font-size: 10pt;
+    // extract message input height
+    height: calc(100% - 68px);
     line-height: 20px;
     overflow: auto;
     padding: 16px;
     text-align: left;
-    width: $sidebarWidth;
     word-wrap: break-word;
 
     display: flex;
@@ -58,28 +63,6 @@
     a:active {
         color: black;
     }
-
-    &::-webkit-scrollbar {
-        background: #06a5df;
-        width: 7px;
-    }
-
-    &::-webkit-scrollbar-button {
-        display: none;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: black;
-    }
-
-    &::-webkit-scrollbar-track-piece {
-        background: black;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: #06a5df;
-        border-radius: 4px;
-    }
 }
 
 #chat-recipient {
@@ -319,10 +302,6 @@
         text-overflow: ellipsis;
         overflow: hidden;
     }
-
-    @media (max-width: 580px) {
-        display: none !important;
-    }
 }
 
 .sr-only {

css/_polls.scss

@@ -238,10 +238,6 @@ ol.poll-result-list {
 .polls-pane-content {
     height: calc(100% - 102px);
     position: relative;
-
-    @media (max-width: 580px) {
-        height: 100%;
-    }
 }
 
 .pane-content{

css/_variables.scss

@@ -122,7 +122,7 @@ $zindex10: 10;
 $reloadZ: 20;
 $poweredByZ: 100;
 $ringingZ: 300;
-$sideToolbarContainerZ: 200;
+$sideToolbarContainerZ: 300;
 $toolbarZ: 250;
 $drawerZ: 351;
 $tooltipsZ: 401;
@@ -269,4 +269,4 @@ $verySmallScreen: 500px;
 * Prejoin / premeeting screen
 */
 
-$prejoinDefaultContentWidth: 336px;
+$prejoinDefaultContentWidth: 336px;

react/features/chat/components/web/Chat.js

@@ -1,5 +1,6 @@
 // @flow
 
+import clsx from 'clsx';
 import React from 'react';
 
 import { translate } from '../../../base/i18n';
@@ -11,14 +12,12 @@ import AbstractChat, {
     type Props
 } from '../AbstractChat';
 
-import ChatDialog from './ChatDialog';
-import Header from './ChatDialogHeader';
+import ChatHeader from './ChatHeader';
 import ChatInput from './ChatInput';
 import DisplayNameForm from './DisplayNameForm';
 import KeyboardAvoider from './KeyboardAvoider';
 import MessageContainer from './MessageContainer';
 import MessageRecipient from './MessageRecipient';
-import TouchmoveHack from './TouchmoveHack';
 
 /**
  * React Component for holding the chat feature in a side panel that slides in
@@ -26,12 +25,6 @@ import TouchmoveHack from './TouchmoveHack';
  */
 class Chat extends AbstractChat<Props> {
 
-    /**
-     * Whether or not the {@code Chat} component is off-screen, having finished
-     * its hiding animation.
-     */
-    _isExited: boolean;
-
     /**
      * Reference to the React Component for displaying chat messages. Used for
      * scrolling to the end of the chat messages.
@@ -47,13 +40,13 @@ class Chat extends AbstractChat<Props> {
     constructor(props: Props) {
         super(props);
 
-        this._isExited = true;
         this._messageContainerRef = React.createRef();
 
         // Bind event handlers so they are only bound once for every instance.
-        this._renderPanelContent = this._renderPanelContent.bind(this);
+        this._onChatTabKeyDown = this._onChatTabKeyDown.bind(this);
         this._onChatInputResize = this._onChatInputResize.bind(this);
         this._onEscClick = this._onEscClick.bind(this);
+        this._onPollsTabKeyDown = this._onPollsTabKeyDown.bind(this);
         this._onToggleChat = this._onToggleChat.bind(this);
     }
 
@@ -78,21 +71,6 @@ class Chat extends AbstractChat<Props> {
             this._scrollMessageContainerToBottom(false);
         }
     }
-    _onEscClick: (KeyboardEvent) => void;
-
-    /**
-     * Click handler for the chat sidenav.
-     *
-     * @param {KeyboardEvent} event - Esc key click to close the popup.
-     * @returns {void}
-     */
-    _onEscClick(event) {
-        if (event.key === 'Escape' && this.props._isOpen) {
-            event.preventDefault();
-            event.stopPropagation();
-            this._onToggleChat();
-        }
-    }
 
     /**
      * Implements React's {@link Component#render()}.
@@ -101,10 +79,22 @@ class Chat extends AbstractChat<Props> {
      * @returns {ReactElement}
      */
     render() {
+        const { _isOpen, _isPollsEnabled, _showNamePrompt } = this.props;
+
         return (
-            <>
-                { this._renderPanelContent() }
-            </>
+            _isOpen ? <div
+                className = 'sideToolbarContainer'
+                id = 'sideToolbarContainer'
+                onKeyDown = { this._onEscClick } >
+                <ChatHeader
+                    className = 'chat-header'
+                    id = 'chat-header'
+                    isPollsEnabled = { _isPollsEnabled }
+                    onCancel = { this._onToggleChat } />
+                { _showNamePrompt
+                    ? <DisplayNameForm isPollsEnabled = { _isPollsEnabled } />
+                    : this._renderChat() }
+            </div> : null
         );
     }
 
@@ -121,6 +111,54 @@ class Chat extends AbstractChat<Props> {
         this._messageContainerRef.current.maybeUpdateBottomScroll();
     }
 
+    _onChatTabKeyDown: (KeyboardEvent) => void;
+
+    /**
+     * Key press handler for the chat tab.
+     *
+     * @param {KeyboardEvent} event - The event.
+     * @returns {void}
+     */
+    _onChatTabKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            this._onToggleChatTab();
+        }
+    }
+
+    _onEscClick: (KeyboardEvent) => void;
+
+    /**
+     * Click handler for the chat sidenav.
+     *
+     * @param {KeyboardEvent} event - Esc key click to close the popup.
+     * @returns {void}
+     */
+    _onEscClick(event) {
+        if (event.key === 'Escape' && this.props._isOpen) {
+            event.preventDefault();
+            event.stopPropagation();
+            this._onToggleChat();
+        }
+    }
+
+    _onPollsTabKeyDown: (KeyboardEvent) => void;
+
+    /**
+     * Key press handler for the polls tab.
+     *
+     * @param {KeyboardEvent} event - The event.
+     * @returns {void}
+     */
+    _onPollsTabKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            this._onTogglePollsTab();
+        }
+    }
+
     /**
      * Returns a React Element for showing chat messages and a form to send new
      * chat messages.
@@ -129,12 +167,18 @@ class Chat extends AbstractChat<Props> {
      * @returns {ReactElement}
      */
     _renderChat() {
+        const { _isPollsEnabled, _isPollsTabFocused } = this.props;
 
-        if (this.props._isPollsTabFocused) {
+        if (_isPollsTabFocused) {
             return (
                 <>
-                    { this.props._isPollsEnabled && this._renderTabs()}
-                    <TouchmoveHack isModal = { true }><PollsPane /></TouchmoveHack>
+                    {_isPollsEnabled && this._renderTabs()}
+                    <div
+                        aria-labelledby = 'polls-tab'
+                        id = 'polls-panel'
+                        role = 'tabpanel'>
+                        <PollsPane />
+                    </div>
                     <KeyboardAvoider />
                 </>
             );
@@ -142,19 +186,21 @@ class Chat extends AbstractChat<Props> {
 
         return (
             <>
-                {this.props._isPollsEnabled && this._renderTabs()}
-                <TouchmoveHack
-                    flex = { true }
-                    isModal = { this.props._isModal }>
+                {_isPollsEnabled && this._renderTabs()}
+                <div
+                    aria-labelledby = 'chat-tab'
+                    className = { clsx('chat-panel', !_isPollsEnabled && 'chat-panel-no-tabs') }
+                    id = 'chat-panel'
+                    role = 'tabpanel'>
                     <MessageContainer
                         messages = { this.props._messages }
                         ref = { this._messageContainerRef } />
-                </TouchmoveHack>
-                <MessageRecipient />
-                <ChatInput
-                    onResize = { this._onChatInputResize }
-                    onSend = { this._onSendMessage } />
-                <KeyboardAvoider />
+                    <MessageRecipient />
+                    <ChatInput
+                        onResize = { this._onChatInputResize }
+                        onSend = { this._onSendMessage } />
+                    <KeyboardAvoider />
+                </div>
             </>
         );
     }
@@ -166,36 +212,55 @@ class Chat extends AbstractChat<Props> {
      * @returns {ReactElement}
      */
     _renderTabs() {
+        const { _isPollsEnabled, _isPollsTabFocused, _nbUnreadMessages, _nbUnreadPolls, t } = this.props;
 
         return (
-            <div className = { 'chat-tabs-container' }>
+            <div
+                ariaLabel = { t(_isPollsEnabled ? 'chat.titleWithPolls' : 'chat.title') }
+                className = { 'chat-tabs-container' }
+                role = 'tablist'>
                 <div
+                    aria-controls = 'chat-panel'
+                    aria-label = { t('chat.tabs.chat') }
+                    aria-selected = { !_isPollsTabFocused }
                     className = { `chat-tab ${
-                        this.props._isPollsTabFocused ? '' : 'chat-tab-focus'
+                        _isPollsTabFocused ? '' : 'chat-tab-focus'
                     }` }
-                    onClick = { this._onToggleChatTab }>
-                    <span className = { 'chat-tab-title' }>
-                        {this.props.t('chat.tabs.chat')}
+                    id = 'chat-tab'
+                    onClick = { this._onToggleChatTab }
+                    onKeyDown = { this._onChatTabKeyDown }
+                    role = 'tab'
+                    tabIndex = '0'>
+                    <span
+                        className = { 'chat-tab-title' }>
+                        {t('chat.tabs.chat')}
                     </span>
                     {this.props._isPollsTabFocused
-                        && this.props._nbUnreadMessages > 0 && (
+                        && _nbUnreadMessages > 0 && (
                         <span className = { 'chat-tab-badge' }>
-                            {this.props._nbUnreadMessages}
+                            {_nbUnreadMessages}
                         </span>
                     )}
                 </div>
                 <div
+                    aria-controls = 'polls-panel'
+                    aria-label = { t('chat.tabs.polls') }
+                    aria-selected = { _isPollsTabFocused }
                     className = { `chat-tab ${
-                        this.props._isPollsTabFocused ? 'chat-tab-focus' : ''
+                        _isPollsTabFocused ? 'chat-tab-focus' : ''
                     }` }
-                    onClick = { this._onTogglePollsTab }>
+                    id = 'polls-tab'
+                    onClick = { this._onTogglePollsTab }
+                    onKeyDown = { this._onPollsTabKeyDown }
+                    role = 'tab'
+                    tabIndex = '0'>
                     <span className = { 'chat-tab-title' }>
-                        {this.props.t('chat.tabs.polls')}
+                        {t('chat.tabs.polls')}
                     </span>
-                    {!this.props._isPollsTabFocused
+                    {!_isPollsTabFocused
                         && this.props._nbUnreadPolls > 0 && (
                         <span className = { 'chat-tab-badge' }>
-                            {this.props._nbUnreadPolls}
+                            {_nbUnreadPolls}
                         </span>
                     )}
                 </div>
@@ -203,74 +268,6 @@ class Chat extends AbstractChat<Props> {
         );
     }
 
-    /**
-     * Instantiates a React Element to display at the top of {@code Chat} to
-     * close {@code Chat}.
-     *
-     * @private
-     * @returns {ReactElement}
-     */
-    _renderChatHeader() {
-        return (
-            <Header
-                className = 'chat-header'
-                id = 'chat-header'
-                isPollsEnabled = { this.props._isPollsEnabled }
-                onCancel = { this._onToggleChat } />
-        );
-    }
-
-    _renderPanelContent: () => React$Node | null;
-
-    /**
-     * Renders the contents of the chat panel.
-     *
-     * @private
-     * @returns {ReactElement | null}
-     */
-    _renderPanelContent() {
-        const { _isModal, _isOpen, _showNamePrompt } = this.props;
-        let ComponentToRender = null;
-
-        if (_isOpen) {
-            if (_isModal) {
-                ComponentToRender = (
-                    <ChatDialog isPollsEnabled = { this.props._isPollsEnabled }>
-                        { _showNamePrompt
-                            ? <DisplayNameForm isPollsEnabled = { this.props._isPollsEnabled } />
-                            : this._renderChat() }
-                    </ChatDialog>
-                );
-            } else {
-                ComponentToRender = (
-                    <>
-                        { this._renderChatHeader() }
-                        { _showNamePrompt
-                            ? <DisplayNameForm isPollsEnabled = { this.props._isPollsEnabled } />
-                            : this._renderChat() }
-                    </>
-                );
-            }
-        }
-        let className = '';
-
-        if (_isOpen) {
-            className = 'slideInExt';
-        } else if (this._isExited) {
-            className = 'invisible';
-        }
-
-        return (
-            <div
-                aria-haspopup = 'true'
-                className = { `sideToolbarContainer ${className}` }
-                id = 'sideToolbarContainer'
-                onKeyDown = { this._onEscClick } >
-                { ComponentToRender }
-            </div>
-        );
-    }
-
     /**
      * Scrolls the chat messages so the latest message is visible.
      *

react/features/chat/components/web/ChatDialog.js

@@ -1,43 +0,0 @@
-// @flow
-
-import React from 'react';
-
-import { Dialog } from '../../../base/dialog';
-
-import Header from './ChatDialogHeader';
-
-type Props = {
-
-    /**
-     * Children of the component.
-     */
-    children: React$Node,
-
-    /**
-     * Whether the polls feature is enabled or not.
-     */
-    isPollsEnabled: boolean
-}
-
-/**
- * Component that renders the content of the chat in a modal.
- *
- * @returns {React$Element<any>}
- */
-function ChatDialog({ children, isPollsEnabled }: Props) {
-    return (
-        <Dialog
-            customHeader = { Header }
-            disableEnter = { true }
-            disableFooter = { true }
-            hideCancelButton = { true }
-            submitDisabled = { true }
-            titleKey = { isPollsEnabled ? 'chat.titleWithPolls' : 'chat.title' } >
-            <div className = 'chat-dialog'>
-                {children}
-            </div>
-        </Dialog>
-    );
-}
-
-export default ChatDialog;